.pet-trainer{width:100%;max-width:100%;margin:24px auto;padding:24px;border:1px solid #dbe3ee;border-radius:22px;background:transparent;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#111827;box-sizing:border-box}.pet-trainer *{box-sizing:border-box}.pet-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.pet-header-actions{display:flex;gap:10px;align-items:center}.pet-label{text-transform:uppercase;letter-spacing:.08em;color:#64748b;font-size:14px;font-weight:700}.pet-title{margin:4px 0 8px;font-size:30px;line-height:1.15}.pet-compact-status{display:flex;gap:9px;align-items:center;flex-wrap:wrap;color:#475569;font-size:15px}.pet-dot{color:#94a3b8}.pet-start-midi,.pet-reset,.pet-demo,.pet-loop,.pet-performance,.pet-toggle-names,.pet-performance{border:1px solid #dbe3ee;background:#fff;border-radius:14px;padding:12px 16px;font-weight:700;cursor:pointer;font-size:16px}.pet-start-midi{background:#4f46e5!important;color:white!important}.pet-midi-connected .pet-start-midi{background:#f8fafc!important;color:#047857!important;border-color:#bbf7d0!important}.pet-reset:hover,.pet-demo:hover,.pet-loop,.pet-performance:hover,.pet-toggle-names,.pet-performance:hover{background:#eef2ff}.pet-instructions{margin:18px 0;padding:14px 16px;background:#fff;border:1px solid #dbe3ee;border-radius:14px;font-size:18px}.pet-score{background:white;border:1px solid #dbe3ee;border-radius:18px;padding:8px 12px;overflow:auto;min-height:390px;display:flex;align-items:flex-start;width:100%;margin:0 0 18px}.pet-score svg{width:100%!important;height:auto!important;max-width:100%;display:block;overflow:visible}.pet-osmd-score{width:100%;min-width:100%;min-height:430px;display:block;transform-origin:top left}.pet-osmd-score>div,.pet-osmd-score svg{max-width:100%}.pet-osmd-score [id^=osmdCanvasPage]{width:100%!important;min-width:100%!important}
.pet-feedback{margin:0 0 12px}.pet-note-chip{display:none!important}.pet-progress-bar{width:100%;height:12px;background:#eef2f7;border-radius:999px;overflow:hidden}.pet-progress-fill{display:block;width:0%;height:100%;background:#22c55e;border-radius:999px;transition:width .25s ease}.pet-keyboard{display:flex;align-items:flex-start;gap:0;margin-top:0;min-height:125px;overflow:hidden;padding-bottom:0;max-width:100%;flex-wrap:nowrap}.pet-keyboard:empty{display:none}.pet-key{border:1px solid #111827;background:#fff;color:#111827;display:flex;align-items:flex-end;justify-content:center;font-size:14px;font-weight:700;position:relative;cursor:pointer;transition:transform .08s ease,background-color .08s ease,box-shadow .08s ease}.pet-keyboard-full .pet-key.white{width:55px;height:115px;border-radius:0 0 8px 8px;margin-right:-1px;padding-bottom:12px}.pet-keyboard-full .pet-key.black{width:36px;height:84px;background:#111827;color:#fff;border-radius:0 0 6px 6px;margin-left:-18px;margin-right:-18px;z-index:2;padding-bottom:12px;font-size:13px}.pet-key.pressed{transform:translateY(2px);background:#e5e7eb;box-shadow:inset 0 3px 8px rgba(15,23,42,.18)}.pet-key.black.pressed{background:#374151}.pet-key.current{outline:2px solid #4f46e5;outline-offset:-3px}.pet-controls{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 0}.pet-status{font-weight:600;margin:.75rem 0 0}.pet-error{color:#b91c1c;font-weight:600}.pet-collection .pet-trainer{margin-bottom:2rem}.pet-completion{margin-top:.85rem;padding:.9rem 1rem;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:14px}.pet-completion-title{display:block;margin-bottom:.25rem}.pet-stars{display:inline-block;margin-right:.6rem;color:#f59e0b;font-size:1.15rem;letter-spacing:.05em}.pet-completion-summary{color:#166534;font-weight:600}.pet-controls button:disabled{opacity:.45;cursor:not-allowed}.pet-highlight-layer,.pet-note-highlight{pointer-events:none}.pet-note-highlight-halo,.pet-note-highlight-dot{transition:fill .18s ease,stroke .18s ease,opacity .18s ease,transform .18s ease;transform-origin:center}.pet-note-highlight-wrong .pet-note-highlight-halo{fill:#ef4444!important;stroke:#dc2626!important;opacity:.75!important}.pet-note-highlight-wrong .pet-note-highlight-dot{fill:#ef4444!important;opacity:.75!important}@media(max-width:700px){.pet-trainer{padding:18px}.pet-header{align-items:flex-start;flex-direction:column}.pet-header-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}.pet-instructions{font-size:16px}.pet-title{font-size:26px}.pet-score{min-height:235px;padding:8px 10px}.pet-keyboard{overflow-x:auto}.pet-keyboard-full .pet-key.white{min-width:50px}.pet-keyboard-full .pet-key.black{min-width:34px}}


/* v1.5.6: cleaner scale controls */
.pet-progress-bar{display:none!important}
.pet-header-actions button,.pet-controls button,.pet-start-midi,.pet-reset,.pet-demo,.pet-loop,.pet-performance,.pet-toggle-names,.pet-performance{
  background:#2271b1!important;
  color:#fff!important;
  border:1px solid #2271b1!important;
  border-radius:8px!important;
  padding:10px 14px!important;
  font-weight:600!important;
  font-size:16px!important;
  line-height:1.35!important;
  cursor:pointer!important;
  box-shadow:none!important;
}
.pet-header-actions button:hover,.pet-controls button:hover,.pet-start-midi:hover,.pet-reset:hover,.pet-demo:hover,.pet-loop,.pet-performance:hover,.pet-toggle-names,.pet-performance:hover{
  filter:brightness(.95);
  background:#2271b1!important;
}
.pet-midi-connected .pet-start-midi{
  background:#2271b1!important;
  color:#fff!important;
  border-color:#2271b1!important;
}
.pet-controls{gap:8px!important}

/* v1.5.8: VexFlow scale staff with real note styling */
.pet-vex-score{width:100%;max-width:100%;overflow:visible;min-height:390px}
.pet-vex-score svg{width:100%!important;height:auto!important;max-width:100%;display:block;overflow:visible}


/* v1.5.12: place Play Scale with the main action buttons */
.pet-header-actions .pet-demo{display:inline-flex!important;align-items:center;gap:6px}
.pet-header-actions .pet-start-midi,.pet-header-actions .pet-demo,.pet-header-actions .pet-loop,.pet-performance,.pet-header-actions .pet-reset{white-space:nowrap}


/* v1.5.15: hide/remove any legacy current-note display between staff and keyboard */
.pet-trainer .pet-note-chip,
.pet-trainer [class*="note-chip"],
.pet-trainer .pet-current-note,
.pet-trainer .pet-current-label {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
.pet-trainer .pet-score + .pet-note-chip,
.pet-trainer .pet-score ~ .pet-note-chip {
  display: none !important;
}


/* v1.5.19: align and style header action buttons like reference */
.pet-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;}
.pet-header-actions button,.pet-start-midi,.pet-demo,.pet-loop,.pet-performance,.pet-reset{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;}
.pet-header-actions button:hover,.pet-start-midi:hover,.pet-demo:hover,.pet-loop,.pet-performance:hover,.pet-reset:hover{background:#1f6aa5!important;border-color:#1f6aa5!important;filter:none!important;}
.pet-btn-icon{display:inline-flex!important;align-items:center!important;line-height:1!important;}
@media(max-width:700px){.pet-header-actions{justify-content:flex-start!important;flex-wrap:wrap!important;}}

/* v1.5.20: Loop button active state */
.pet-loop,.pet-performance.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,.pet-performance.is-looping,.pet-toggle-names,.pet-performance.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 */
.pet-header{display:block!important;}
.pet-header-actions{margin-top:16px!important;justify-content:flex-start!important;flex-wrap:wrap!important;}
.pet-title{max-width:none!important;}
.pet-compact-status{margin-top:8px!important;}

.pet-musicxml-exercise .pet-toggle-names,.pet-performance{display:none!important}.pet-musicxml-exercise .pet-score{scrollbar-gutter:stable;overflow-anchor:none}.pet-musicxml-exercise .pet-osmd-score{overflow-anchor:none}

/* v1.7.4: MusicXML layout and metadata polish */
.pet-musicxml-exercise .pet-score{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  justify-content:center!important;
  align-items:flex-start!important;
  min-height:420px!important;
  padding:18px 22px!important;
}
.pet-musicxml-exercise .pet-osmd-score{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0 auto!important;
  overflow:hidden!important;
}
.pet-musicxml-exercise .pet-osmd-score [id^="osmdCanvasPage"]{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
}
.pet-musicxml-exercise .pet-osmd-score svg{
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  display:block!important;
  margin:0 auto!important;
}
@media(max-width:700px){
  .pet-musicxml-exercise .pet-score{min-height:320px!important;padding:10px 12px!important;}
}


/* v1.7.5: MusicXML auto-height, centered/cropped responsive score, optional keyboard */
.pet-musicxml-exercise .pet-score{
  min-height:0!important;
  height:auto!important;
  padding:22px 26px!important;
  display:flex!important;
  justify-content:center!important;
  align-items:flex-start!important;
  overflow:hidden!important;
}
.pet-musicxml-exercise .pet-osmd-score{
  min-height:0!important;
  width:100%!important;
  max-width:100%!important;
  margin:0 auto!important;
}
.pet-musicxml-exercise .pet-osmd-score svg{
  width:100%!important;
  height:auto!important;
  margin:0 auto!important;
}
.pet-musicxml-exercise.pet-hide-keyboard .pet-keyboard{display:none!important}
@media(max-width:700px){
  .pet-musicxml-exercise .pet-score{padding:14px 12px!important;}
}

/* v1.9.1: MusicXML playback/practice highlighting by musical moment */
.pet-musicxml-exercise .pet-osmd-score .pet-osmd-note-completed,
.pet-musicxml-exercise .pet-osmd-score .pet-osmd-note-completed * {
  fill: #4caf50 !important;
  stroke: #43a047 !important;
}

.pet-musicxml-exercise .pet-osmd-score .pet-osmd-note-current,
.pet-musicxml-exercise .pet-osmd-score .pet-osmd-note-current * {
  fill: #0284c7 !important;
  stroke: #0284c7 !important;
}

.pet-musicxml-exercise .pet-osmd-score .pet-osmd-playback-cursor {
  display: none !important;
  stroke: rgba(14, 165, 233, 0.72);
  stroke-width: 7px;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

/* v1.9.6: polished BPM tempo control */
.pet-tempo-control{
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:170px!important;
  max-width:245px!important;
  padding:6px 8px!important;
  border:1px solid #cbd5e1!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#0f172a!important;
}
.pet-tempo-label{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  column-gap:7px!important;
  align-items:center!important;
  justify-items:center!important;
  width:100%!important;
  line-height:1.05!important;
  color:#334155!important;
}
.pet-tempo-label-text{
  display:block!important;
  grid-column:1!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  color:#64748b!important;
}
.pet-tempo-value{
  display:block!important;
  grid-column:1!important;
  font-size:14px!important;
  font-weight:900!important;
  color:#0f172a!important;
  white-space:nowrap!important;
}
.pet-tempo-reset{
  grid-column:2!important;
  grid-row:1 / span 2!important;
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  padding:0!important;
  border-radius:999px!important;
  border:1px solid #cbd5e1!important;
  background:#f8fafc!important;
  color:#2271b1!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  cursor:pointer!important;
}
.pet-tempo-reset:hover{background:#e0f2fe!important;border-color:#7dd3fc!important;}
.pet-tempo-row{
  display:grid!important;
  grid-template-columns:auto 26px minmax(82px,1fr) 26px auto!important;
  gap:3px!important;
  align-items:center!important;
  width:100%!important;
}
.pet-tempo-min,.pet-tempo-max{
  font-size:11px!important;
  color:#64748b!important;
  font-weight:800!important;
}
.pet-tempo-down,.pet-tempo-up{
  width:26px!important;
  height:24px!important;
  min-width:26px!important;
  padding:0!important;
  border-radius:6px!important;
  border:1px solid #2271b1!important;
  background:#2271b1!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:900!important;
  line-height:1!important;
  cursor:pointer!important;
}
.pet-tempo-down:hover,.pet-tempo-up:hover{filter:brightness(.95);}
.pet-tempo-slider{
  width:100%!important;
  min-width:82px!important;
  accent-color:#2271b1!important;
  cursor:pointer!important;
}
@media(max-width:700px){
  .pet-tempo-control{width:100%!important;max-width:320px!important;align-items:stretch!important;}
}

}


/* v1.9.7: MusicXML measure loop controls */
.pet-measure-loop-control{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  padding:8px 9px!important;
  border:1px solid #cbd5e1!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#0f172a!important;
  white-space:nowrap!important;
}
.pet-measure-loop-control[hidden]{display:none!important;}
.pet-measure-loop-label{
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  color:#64748b!important;
}
.pet-measure-loop-control input{
  width:48px!important;
  height:30px!important;
  min-height:30px!important;
  padding:2px 4px!important;
  border:1px solid #cbd5e1!important;
  border-radius:6px!important;
  background:#fff!important;
  color:#0f172a!important;
  font-size:14px!important;
  font-weight:800!important;
  text-align:center!important;
}
.pet-measure-loop-separator{font-weight:900!important;color:#64748b!important;}
@media(max-width:700px){
  .pet-measure-loop-control{width:100%!important;justify-content:center!important;}
}

/* v1.9.8: move practice controls below the staff */
.pet-practice-settings{
  display:flex!important;
  align-items:stretch!important;
  justify-content:space-between!important;
  gap:16px!important;
  margin:14px auto 10px!important;
  width:100%!important;
  max-width:900px!important;
}
.pet-practice-settings .pet-tempo-control{
  flex:1 1 70%!important;
  max-width:none!important;
  min-width:280px!important;
  align-items:stretch!important;
  padding:10px 12px!important;
}
.pet-practice-settings .pet-measure-loop-control{
  flex:0 1 30%!important;
  min-width:190px!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:10px 12px!important;
}
.pet-practice-settings .pet-measure-loop-control[hidden]{display:none!important;}
.pet-measure-loop-fields{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
}
.pet-practice-settings .pet-tempo-label{
  grid-template-columns:auto 1fr auto!important;
  justify-items:start!important;
  column-gap:6px!important;
}
.pet-practice-settings .pet-tempo-label-text{
  grid-column:1!important;
  font-size:13px!important;
  text-transform:none!important;
  letter-spacing:0!important;
  color:#334155!important;
}
.pet-practice-settings .pet-tempo-value{
  grid-column:2!important;
  font-size:15px!important;
}
.pet-practice-settings .pet-tempo-reset{
  grid-column:3!important;
  grid-row:1!important;
}
.pet-practice-settings .pet-tempo-row{
  grid-template-columns:auto 28px minmax(160px,1fr) 28px auto!important;
  gap:6px!important;
}
@media(max-width:760px){
  .pet-practice-settings{
    flex-direction:column!important;
    gap:10px!important;
  }
  .pet-practice-settings .pet-tempo-control,
  .pet-practice-settings .pet-measure-loop-control{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
}


/* v1.9.8: move practice settings below the staff */
.pet-practice-settings{
  display:grid!important;
  grid-template-columns:minmax(0,7fr) minmax(150px,3fr)!important;
  gap:14px!important;
  align-items:stretch!important;
  margin:0 0 16px!important;
}
.pet-practice-settings .pet-tempo-control{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  align-items:stretch!important;
  padding:12px 14px!important;
}
.pet-practice-settings .pet-tempo-label{
  grid-template-columns:auto 1fr auto!important;
  justify-items:start!important;
  column-gap:8px!important;
  margin-bottom:6px!important;
}
.pet-practice-settings .pet-tempo-label-text{
  grid-column:1!important;
  font-size:14px!important;
  text-transform:none!important;
  letter-spacing:0!important;
  color:#334155!important;
  align-self:center!important;
}
.pet-practice-settings .pet-tempo-value{
  grid-column:2!important;
  font-size:14px!important;
  align-self:center!important;
}
.pet-practice-settings .pet-tempo-reset{
  grid-column:3!important;
  grid-row:1!important;
}
.pet-practice-settings .pet-tempo-row{
  grid-template-columns:auto 30px minmax(170px,1fr) 30px auto!important;
  gap:7px!important;
}
.pet-practice-settings .pet-measure-loop-control{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
  padding:12px 14px!important;
}
.pet-practice-settings .pet-measure-loop-control[hidden]{display:none!important;}
.pet-practice-settings .pet-measure-loop-label{
  font-size:14px!important;
  text-transform:none!important;
  letter-spacing:0!important;
  color:#334155!important;
}
.pet-measure-loop-fields{display:flex!important;align-items:center!important;gap:8px!important;}
.pet-practice-settings .pet-measure-loop-control input{width:56px!important;height:34px!important;font-size:15px!important;}
.pet-musicxml-exercise .pet-header-actions{gap:10px!important;}
@media(max-width:700px){
  .pet-practice-settings{grid-template-columns:1fr!important;}
  .pet-practice-settings .pet-tempo-row{grid-template-columns:auto 30px minmax(120px,1fr) 30px auto!important;}
}


/* v1.9.9: cleaner MusicXML practice settings layout */
.pet-musicxml-exercise .pet-score{
  margin-top:24px!important;
  margin-bottom:16px!important;
}
.pet-musicxml-exercise .pet-practice-settings{
  display:grid!important;
  grid-template-columns:minmax(0,3fr) minmax(180px,2fr)!important;
  gap:14px!important;
  align-items:stretch!important;
  width:100%!important;
  max-width:760px!important;
  margin:0 auto 16px!important;
}
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-control,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-control{
  min-width:0!important;
  padding:8px 12px!important;
  border-radius:10px!important;
}
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-label{
  margin-bottom:4px!important;
}
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-label-text,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-label{
  font-size:13px!important;
  font-weight:800!important;
}
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-value{
  font-size:14px!important;
}
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-row{
  grid-template-columns:auto 28px minmax(140px,1fr) 28px auto!important;
  gap:6px!important;
}
.pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-control{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
}
.pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-control[hidden]{
  display:flex!important;
}
.pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-fields{
  margin-top:4px!important;
}
@media(max-width:700px){
  .pet-musicxml-exercise .pet-score{margin-top:18px!important;}
  .pet-musicxml-exercise .pet-practice-settings{
    grid-template-columns:1fr!important;
    max-width:none!important;
  }
}


/* v2.0.2: fuller generated/MusicXML score width and cleaner score spacing */
.pet-musicxml-exercise .pet-score{
  padding:18px 20px!important;
}
.pet-musicxml-exercise .pet-osmd-score.pet-osmd-rendered svg{
  width:100%!important;
  max-width:100%!important;
}
.pet-musicxml-exercise .pet-instructions:empty{display:none!important;}


/* v2.0.6: wrong MIDI input flashes the current note/chord red */
.pet-musicxml-exercise .pet-osmd-score .pet-osmd-note-wrong,
.pet-musicxml-exercise .pet-osmd-score .pet-osmd-note-wrong * {
  fill: #dc2626 !important;
  stroke: #b91c1c !important;
}

/* v2.0.7: wrong single MIDI key feedback without marking the whole chord red */
.pet-key.wrong{
  background:#fecaca!important;
  border-color:#dc2626!important;
  box-shadow:inset 0 0 0 3px rgba(220,38,38,.35)!important;
}
.pet-key.black.wrong{
  background:#7f1d1d!important;
  border-color:#dc2626!important;
}


/* v2.1.1: stronger single wrong-note feedback */
.pet-musicxml-exercise .pet-osmd-score .pet-osmd-note-wrong,
.pet-musicxml-exercise .pet-osmd-score .pet-osmd-note-wrong *,
.pet-vex-score .pet-osmd-note-wrong,
.pet-vex-score .pet-osmd-note-wrong *{
  fill:#dc2626!important;
  stroke:#b91c1c!important;
}
.pet-key.wrong,
.pet-key.white.wrong,
.pet-key.black.wrong{
  background:#dc2626!important;
  color:#fff!important;
  border-color:#991b1b!important;
  outline:3px solid rgba(220,38,38,.45)!important;
  outline-offset:-3px!important;
  box-shadow:0 0 0 3px rgba(220,38,38,.22), inset 0 0 0 2px rgba(255,255,255,.45)!important;
}
.pet-key.black.wrong{
  background:#991b1b!important;
}


/* v2.1.4: remove outer background color and place action buttons directly below the title */
.pet-trainer{background:transparent!important;}
.pet-header{display:block!important;}
.pet-title{margin-bottom:14px!important;}
.pet-header-actions{margin-top:0!important;margin-bottom:14px!important;justify-content:flex-start!important;flex-wrap:wrap!important;}
.pet-compact-status{margin-top:0!important;}


/* v2.2.2: larger, clearer full-width grand staff */
.pet-score{min-height:320px!important;padding:8px 12px!important;align-items:flex-start!important;}
.pet-vex-score svg{overflow:visible!important;}
.pet-osmd-score{min-height:430px!important;}
@media(max-width:700px){.pet-score{min-height:235px!important;padding:8px 10px!important;}}


/* v2.2.3: clearer large grand staff for desktop/tablet */
.pet-score{min-height:390px;}
.pet-vex-score{min-height:390px;}
.pet-vex-score svg{overflow:visible!important;}
@media(max-width:700px){.pet-score{min-height:300px}.pet-vex-score{min-height:300px}}


/* v2.2.5: minimal segmented outline action buttons */
.pet-header-actions{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:0!important;
  margin-top:0!important;
  margin-bottom:16px!important;
  padding:0!important;
  border:1px solid #9ca3af!important;
  border-radius:10px!important;
  background:transparent!important;
  overflow:hidden!important;
  box-shadow:none!important;
  width:auto!important;
  max-width:100%!important;
}
.pet-header-actions button,
.pet-header-actions .pet-start-midi,
.pet-header-actions .pet-demo,
.pet-header-actions .pet-loop,.pet-performance,
.pet-header-actions .pet-reset,
.pet-header-actions .pet-toggle-names,.pet-performance{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:48px!important;
  min-width:152px!important;
  margin:0!important;
  padding:0 28px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#111827!important;
  font-size:16px!important;
  font-weight:400!important;
  line-height:1!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  box-shadow:none!important;
  filter:none!important;
  text-shadow:none!important;
  cursor:pointer!important;
}
.pet-header-actions .pet-demo{min-width:120px!important;}
.pet-header-actions .pet-loop,.pet-performance,
.pet-header-actions .pet-reset{min-width:130px!important;}
.pet-header-actions button:not(:last-child){
  border-right:1px solid #9ca3af!important;
}
.pet-header-actions button:hover,
.pet-header-actions button:focus,
.pet-header-actions button:active,
.pet-header-actions .pet-start-midi:hover,
.pet-header-actions .pet-demo:hover,
.pet-header-actions .pet-loop,.pet-performance:hover,
.pet-header-actions .pet-reset:hover{
  background:transparent!important;
  color:#111827!important;
  border-color:#9ca3af!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  outline:none!important;
}
.pet-header-actions button:focus-visible{
  outline:2px solid #111827!important;
  outline-offset:-4px!important;
}
.pet-header-actions button:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}
.pet-midi-connected .pet-header-actions .pet-start-midi,
.pet-header-actions .pet-loop,.pet-performance.is-looping,
.pet-header-actions .pet-toggle-names,.pet-performance.is-showing-names{
  background:transparent!important;
  color:#111827!important;
  border-color:#9ca3af!important;
  text-decoration:underline!important;
  text-underline-offset:4px!important;
  font-weight:400!important;
}
@media(max-width:700px){
  .pet-header-actions{
    display:flex!important;
    width:100%!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
  }
  .pet-header-actions button,
  .pet-header-actions .pet-start-midi,
  .pet-header-actions .pet-demo,
  .pet-header-actions .pet-loop,.pet-performance,
  .pet-header-actions .pet-reset{
    min-width:auto!important;
    flex:1 0 auto!important;
    padding:0 18px!important;
    font-size:15px!important;
  }
}

/* v2.2.9: compact minimal top-row tempo and loop controls */
.pet-top-controls{
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  width:100%!important;
  max-width:100%!important;
  margin:0 0 14px!important;
}
.pet-top-controls .pet-header-actions{
  flex:0 0 auto!important;
  margin:0!important;
}
.pet-top-controls .pet-practice-settings{
  flex:1 1 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:0!important;
  width:auto!important;
  max-width:none!important;
  min-height:48px!important;
  margin:0!important;
  padding:0 22px!important;
  border:1px solid #c7cbd1!important;
  border-radius:8px!important;
  background:#fff!important;
  box-shadow:none!important;
  color:#222!important;
  overflow:hidden!important;
}
.pet-top-controls .pet-tempo-control,
.pet-top-controls .pet-measure-loop-control{
  flex:0 0 auto!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:18px!important;
  min-width:0!important;
  max-width:none!important;
  width:auto!important;
  height:48px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
  color:#222!important;
}
.pet-top-controls .pet-tempo-control{
  flex:1 1 auto!important;
}
.pet-top-controls .pet-measure-loop-control{
  margin-left:22px!important;
  padding-left:22px!important;
  border-left:1px solid #c7cbd1!important;
}
.pet-top-controls .pet-tempo-label{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  width:auto!important;
  margin:0!important;
  line-height:1!important;
  color:#222!important;
}
.pet-top-controls .pet-tempo-label-text,
.pet-top-controls .pet-tempo-value,
.pet-top-controls .pet-measure-loop-label,
.pet-top-controls .pet-tempo-min,
.pet-top-controls .pet-tempo-max,
.pet-top-controls .pet-measure-loop-separator{
  font-size:16px!important;
  font-weight:400!important;
  letter-spacing:0!important;
  text-transform:none!important;
  color:#222!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.pet-top-controls .pet-tempo-row{
  flex:1 1 auto!important;
  display:grid!important;
  grid-template-columns:44px auto minmax(160px,1fr) auto 44px!important;
  align-items:center!important;
  gap:18px!important;
  width:100%!important;
  min-width:360px!important;
}
.pet-top-controls .pet-tempo-down,
.pet-top-controls .pet-tempo-up{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:44px!important;
  height:34px!important;
  min-width:44px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #c7cbd1!important;
  border-radius:5px!important;
  background:#fff!important;
  color:#222!important;
  font-size:18px!important;
  font-weight:400!important;
  line-height:1!important;
  box-shadow:none!important;
  filter:none!important;
  cursor:pointer!important;
}
.pet-top-controls .pet-tempo-down:hover,
.pet-top-controls .pet-tempo-up:hover{
  background:#fff!important;
  color:#222!important;
  border-color:#9ca3af!important;
  box-shadow:none!important;
  filter:none!important;
}
.pet-top-controls .pet-tempo-reset{display:none!important;}
.pet-top-controls .pet-tempo-slider{
  width:100%!important;
  min-width:160px!important;
  height:18px!important;
  margin:0!important;
  accent-color:#8f949a!important;
  cursor:pointer!important;
}
.pet-top-controls .pet-tempo-slider::-webkit-slider-runnable-track{
  height:4px!important;
  border-radius:999px!important;
  background:#d6d8dc!important;
}
.pet-top-controls .pet-tempo-slider::-webkit-slider-thumb{
  -webkit-appearance:none!important;
  width:18px!important;
  height:18px!important;
  margin-top:-7px!important;
  border:1px solid #aeb4bb!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:none!important;
}
.pet-top-controls .pet-tempo-slider::-moz-range-track{
  height:4px!important;
  border-radius:999px!important;
  background:#d6d8dc!important;
}
.pet-top-controls .pet-tempo-slider::-moz-range-progress{
  height:4px!important;
  border-radius:999px!important;
  background:#a7abb1!important;
}
.pet-top-controls .pet-tempo-slider::-moz-range-thumb{
  width:18px!important;
  height:18px!important;
  border:1px solid #aeb4bb!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:none!important;
}
.pet-top-controls .pet-measure-loop-fields{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  margin:0!important;
}
.pet-top-controls .pet-measure-loop-control input{
  width:72px!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0 4px!important;
  border:1px solid #c7cbd1!important;
  border-radius:5px!important;
  background:#fff!important;
  color:#222!important;
  font-size:16px!important;
  font-weight:400!important;
  text-align:center!important;
  box-shadow:none!important;
}
.pet-score{margin-top:0!important;}
@media(max-width:1120px){
  .pet-top-controls{flex-direction:column!important;align-items:flex-start!important;}
  .pet-top-controls .pet-practice-settings{width:100%!important;}
}
@media(max-width:760px){
  .pet-top-controls .pet-practice-settings{flex-direction:column!important;align-items:stretch!important;height:auto!important;padding:12px!important;gap:12px!important;}
  .pet-top-controls .pet-tempo-control,.pet-top-controls .pet-measure-loop-control{width:100%!important;height:auto!important;}
  .pet-top-controls .pet-measure-loop-control{margin-left:0!important;padding-left:0!important;border-left:0!important;}
  .pet-top-controls .pet-tempo-row{grid-template-columns:40px auto minmax(120px,1fr) auto 40px!important;min-width:0!important;gap:10px!important;}
}

/* v2.2.10: compact top controls typography and layout refinements */
.pet-trainer .pet-top-controls{
  align-items:center!important;
  gap:16px!important;
  flex-wrap:nowrap!important;
}
.pet-trainer .pet-top-controls .pet-header-actions{
  margin:0!important;
  flex:0 0 auto!important;
}
.pet-trainer .pet-top-controls .pet-practice-settings,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings{
  flex:1 1 560px!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  min-height:50px!important;
  height:50px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:0!important;
  padding:0 20px!important;
  border:1px solid #9ca3af!important;
  border-radius:10px!important;
  background:#fff!important;
  overflow:visible!important;
  box-shadow:none!important;
}
.pet-trainer .pet-top-controls .pet-tempo-control,
.pet-trainer .pet-top-controls .pet-measure-loop-control,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-tempo-control,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-measure-loop-control{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  height:50px!important;
  min-height:50px!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  gap:14px!important;
  box-shadow:none!important;
}
.pet-trainer .pet-top-controls .pet-tempo-control,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-tempo-control{
  flex:1 1 auto!important;
  overflow:visible!important;
}
.pet-trainer .pet-top-controls .pet-measure-loop-control,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-measure-loop-control{
  flex:0 0 auto!important;
  margin-left:20px!important;
  padding-left:20px!important;
  border-left:1px solid #9ca3af!important;
  overflow:visible!important;
}
.pet-trainer .pet-top-controls .pet-tempo-label,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-tempo-label{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:auto!important;
  min-width:126px!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
}
.pet-trainer .pet-top-controls .pet-tempo-label-text,
.pet-trainer .pet-top-controls .pet-tempo-value,
.pet-trainer .pet-top-controls .pet-measure-loop-label,
.pet-trainer .pet-top-controls .pet-tempo-min,
.pet-trainer .pet-top-controls .pet-tempo-max,
.pet-trainer .pet-top-controls .pet-measure-loop-separator,
.pet-trainer .pet-top-controls .pet-measure-loop-control input,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-tempo-label-text,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-tempo-value,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-measure-loop-label,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-tempo-min,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-tempo-max,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-measure-loop-separator{
  font-family:inherit!important;
  font-size:16px!important;
  font-weight:400!important;
  letter-spacing:0!important;
  text-transform:none!important;
  line-height:1!important;
  color:#111827!important;
  white-space:nowrap!important;
}
.pet-trainer .pet-top-controls .pet-tempo-row,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-tempo-row{
  display:grid!important;
  grid-template-columns:44px auto minmax(120px,160px) auto 44px!important;
  align-items:center!important;
  gap:12px!important;
  width:auto!important;
  min-width:0!important;
  flex:0 1 auto!important;
}
.pet-trainer .pet-top-controls .pet-tempo-down,
.pet-trainer .pet-top-controls .pet-tempo-up,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-tempo-down,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-tempo-up{
  width:44px!important;
  height:34px!important;
  min-width:44px!important;
  min-height:34px!important;
  border:1px solid #c7cbd1!important;
  border-radius:5px!important;
  background:#fff!important;
  color:#111827!important;
  font-family:inherit!important;
  font-size:18px!important;
  font-weight:400!important;
  line-height:1!important;
  box-shadow:none!important;
}
.pet-trainer .pet-top-controls .pet-tempo-slider,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-tempo-slider{
  width:160px!important;
  min-width:120px!important;
  max-width:160px!important;
  height:18px!important;
  margin:0!important;
  accent-color:#a7abb1!important;
}
.pet-trainer .pet-top-controls .pet-tempo-slider::-webkit-slider-runnable-track,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-tempo-slider::-webkit-slider-runnable-track{
  height:4px!important;
  border-radius:999px!important;
  background:#d9dadd!important;
}
.pet-trainer .pet-top-controls .pet-tempo-slider::-webkit-slider-thumb,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-tempo-slider::-webkit-slider-thumb{
  -webkit-appearance:none!important;
  width:18px!important;
  height:18px!important;
  margin-top:-7px!important;
  border:1px solid #aeb4bb!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:none!important;
}
.pet-trainer .pet-top-controls .pet-tempo-slider::-moz-range-track,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-tempo-slider::-moz-range-track{
  height:4px!important;
  border-radius:999px!important;
  background:#d9dadd!important;
}
.pet-trainer .pet-top-controls .pet-tempo-slider::-moz-range-progress,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-tempo-slider::-moz-range-progress{
  height:4px!important;
  border-radius:999px!important;
  background:#a7abb1!important;
}
.pet-trainer .pet-top-controls .pet-tempo-slider::-moz-range-thumb,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-tempo-slider::-moz-range-thumb{
  width:18px!important;
  height:18px!important;
  border:1px solid #aeb4bb!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:none!important;
}
.pet-trainer .pet-top-controls .pet-measure-loop-fields,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-measure-loop-fields{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  margin:0!important;
  padding:0!important;
}
.pet-trainer .pet-top-controls .pet-measure-loop-control input,
.pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-measure-loop-control input{
  width:74px!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0 4px!important;
  border:1px solid #c7cbd1!important;
  border-radius:5px!important;
  background:#fff!important;
  box-shadow:none!important;
  text-align:center!important;
}
@media(max-width:1280px){
  .pet-trainer .pet-top-controls{flex-wrap:wrap!important;}
  .pet-trainer .pet-top-controls .pet-practice-settings,
  .pet-musicxml-exercise .pet-top-controls .pet-practice-settings{flex:1 1 100%!important;width:100%!important;}
}
@media(max-width:760px){
  .pet-trainer .pet-top-controls .pet-practice-settings,
  .pet-musicxml-exercise .pet-top-controls .pet-practice-settings{height:auto!important;min-height:50px!important;flex-direction:column!important;align-items:stretch!important;padding:12px!important;gap:12px!important;}
  .pet-trainer .pet-top-controls .pet-tempo-control,
  .pet-trainer .pet-top-controls .pet-measure-loop-control,
  .pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-tempo-control,
  .pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-measure-loop-control{width:100%!important;height:auto!important;min-height:0!important;}
  .pet-trainer .pet-top-controls .pet-measure-loop-control,
  .pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-measure-loop-control{margin-left:0!important;padding-left:0!important;border-left:0!important;}
  .pet-trainer .pet-top-controls .pet-tempo-row,
  .pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-tempo-row{grid-template-columns:40px auto minmax(120px,1fr) auto 40px!important;width:100%!important;}
  .pet-trainer .pet-top-controls .pet-tempo-slider,
  .pet-musicxml-exercise .pet-top-controls .pet-practice-settings .pet-tempo-slider{width:100%!important;max-width:none!important;}
}

/* v2.2.11: move practice settings back below the staff and make them full width */
.pet-trainer .pet-top-controls{
  display:block!important;
  width:100%!important;
  margin:0 0 14px!important;
}
.pet-trainer .pet-top-controls .pet-header-actions{
  width:auto!important;
  max-width:max-content!important;
  margin:0!important;
}
.pet-trainer .pet-practice-settings,
.pet-musicxml-exercise .pet-practice-settings{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:0!important;
  width:100%!important;
  max-width:100%!important;
  min-height:58px!important;
  height:auto!important;
  margin:16px 0 0!important;
  padding:0 22px!important;
  border:1px solid #c7cbd1!important;
  border-radius:10px!important;
  background:#fff!important;
  box-shadow:none!important;
  overflow:visible!important;
  color:#222!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-control,
.pet-trainer .pet-practice-settings .pet-measure-loop-control,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-control,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-control{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:18px!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  min-height:58px!important;
  height:58px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-control,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-control{
  flex:1 1 auto!important;
}
.pet-trainer .pet-practice-settings .pet-measure-loop-control,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-control{
  flex:0 0 auto!important;
  margin-left:24px!important;
  padding-left:24px!important;
  border-left:1px solid #c7cbd1!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-label,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-label{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:auto!important;
  min-width:128px!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-label-text,
.pet-trainer .pet-practice-settings .pet-tempo-value,
.pet-trainer .pet-practice-settings .pet-measure-loop-label,
.pet-trainer .pet-practice-settings .pet-tempo-min,
.pet-trainer .pet-practice-settings .pet-tempo-max,
.pet-trainer .pet-practice-settings .pet-measure-loop-separator,
.pet-trainer .pet-practice-settings .pet-measure-loop-control input,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-label-text,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-value,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-label,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-min,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-max,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-separator,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-control input{
  font-family:inherit!important;
  font-size:16px!important;
  font-weight:400!important;
  letter-spacing:0!important;
  text-transform:none!important;
  line-height:1!important;
  color:#222!important;
  white-space:nowrap!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-row,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-row{
  display:grid!important;
  grid-template-columns:44px auto minmax(220px,1fr) auto 44px!important;
  align-items:center!important;
  gap:16px!important;
  width:100%!important;
  min-width:0!important;
  flex:1 1 auto!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-down,
.pet-trainer .pet-practice-settings .pet-tempo-up,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-down,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-up{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:44px!important;
  height:34px!important;
  min-width:44px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #c7cbd1!important;
  border-radius:5px!important;
  background:#fff!important;
  color:#222!important;
  font-family:inherit!important;
  font-size:18px!important;
  font-weight:400!important;
  line-height:1!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-down:hover,
.pet-trainer .pet-practice-settings .pet-tempo-up:hover,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-down:hover,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-up:hover{
  background:#fff!important;
  border-color:#9ca3af!important;
  color:#222!important;
  box-shadow:none!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-reset,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-reset{display:none!important;}
.pet-trainer .pet-practice-settings .pet-tempo-slider,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider{
  width:100%!important;
  min-width:220px!important;
  max-width:none!important;
  height:18px!important;
  margin:0!important;
  accent-color:#b7b9bd!important;
  cursor:pointer!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-slider::-webkit-slider-runnable-track,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-webkit-slider-runnable-track{
  height:4px!important;
  border-radius:999px!important;
  background:#e0e1e4!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-slider::-webkit-slider-thumb,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-webkit-slider-thumb{
  -webkit-appearance:none!important;
  width:18px!important;
  height:18px!important;
  margin-top:-7px!important;
  border:1px solid #b4b8bf!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:none!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-slider::-moz-range-track,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-moz-range-track{
  height:4px!important;
  border-radius:999px!important;
  background:#e0e1e4!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-slider::-moz-range-progress,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-moz-range-progress{
  height:4px!important;
  border-radius:999px!important;
  background:#b7b9bd!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-slider::-moz-range-thumb,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-moz-range-thumb{
  width:18px!important;
  height:18px!important;
  border:1px solid #b4b8bf!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:none!important;
}
.pet-trainer .pet-practice-settings .pet-measure-loop-fields,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-fields{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  margin:0!important;
  padding:0!important;
}
.pet-trainer .pet-practice-settings .pet-measure-loop-control input,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-control input{
  width:82px!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0 4px!important;
  border:1px solid #c7cbd1!important;
  border-radius:5px!important;
  background:#fff!important;
  box-shadow:none!important;
  text-align:center!important;
}
.pet-trainer .pet-score{margin-bottom:0!important;}
@media(max-width:980px){
  .pet-trainer .pet-practice-settings,
  .pet-musicxml-exercise .pet-practice-settings{flex-direction:column!important;align-items:stretch!important;padding:12px!important;gap:12px!important;}
  .pet-trainer .pet-practice-settings .pet-tempo-control,
  .pet-trainer .pet-practice-settings .pet-measure-loop-control,
  .pet-musicxml-exercise .pet-practice-settings .pet-tempo-control,
  .pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-control{width:100%!important;height:auto!important;min-height:0!important;}
  .pet-trainer .pet-practice-settings .pet-measure-loop-control,
  .pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-control{margin-left:0!important;padding-left:0!important;border-left:0!important;}
}
@media(max-width:640px){
  .pet-trainer .pet-practice-settings .pet-tempo-control,
  .pet-musicxml-exercise .pet-practice-settings .pet-tempo-control{flex-direction:column!important;align-items:stretch!important;gap:10px!important;}
  .pet-trainer .pet-practice-settings .pet-tempo-row,
  .pet-musicxml-exercise .pet-practice-settings .pet-tempo-row{grid-template-columns:40px auto minmax(120px,1fr) auto 40px!important;gap:10px!important;}
  .pet-trainer .pet-practice-settings .pet-tempo-slider,
  .pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider{min-width:120px!important;}
}


/* v2.2.13: simplify measure label and remove tempo/measures divider */
.pet-trainer .pet-practice-settings .pet-measure-loop-control,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-control{
  margin-left:24px!important;
  padding-left:0!important;
  border-left:0!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-label-text,
.pet-trainer .pet-practice-settings .pet-tempo-value,
.pet-trainer .pet-practice-settings .pet-measure-loop-label,
.pet-trainer .pet-practice-settings .pet-tempo-min,
.pet-trainer .pet-practice-settings .pet-tempo-max,
.pet-trainer .pet-practice-settings .pet-measure-loop-separator,
.pet-trainer .pet-practice-settings .pet-measure-loop-control input,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-label-text,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-value,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-label,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-min,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-max,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-separator,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-control input{
  font-family:inherit!important;
  font-size:16px!important;
  font-weight:400!important;
  color:#222!important;
}
@media(max-width:980px){
  .pet-trainer .pet-practice-settings .pet-measure-loop-control,
  .pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-control{
    margin-left:0!important;
  }
}

/* v2.2.14: visible measure arrows and softer tempo slider */
.pet-trainer .pet-practice-settings .pet-tempo-slider,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider{
  accent-color:#b8b9bc!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-slider::-webkit-slider-runnable-track,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-webkit-slider-runnable-track{
  height:4px!important;
  border-radius:999px!important;
  background:#e2e3e5!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-slider::-webkit-slider-thumb,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-webkit-slider-thumb{
  width:18px!important;
  height:18px!important;
  margin-top:-7px!important;
  border:1px solid #b9bcc2!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:none!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-slider::-moz-range-track,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-moz-range-track{
  height:4px!important;
  border-radius:999px!important;
  background:#e2e3e5!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-slider::-moz-range-progress,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-moz-range-progress{
  height:4px!important;
  border-radius:999px!important;
  background:#b8b9bc!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-slider::-moz-range-thumb,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-moz-range-thumb{
  width:18px!important;
  height:18px!important;
  border:1px solid #b9bcc2!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:none!important;
}
.pet-trainer .pet-practice-settings .pet-measure-loop-fields,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-loop-fields{
  gap:12px!important;
}
.pet-trainer .pet-practice-settings .pet-measure-stepper,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-stepper{
  display:inline-flex!important;
  align-items:stretch!important;
  width:82px!important;
  height:34px!important;
  border:1px solid #c7cbd1!important;
  border-radius:5px!important;
  background:#fff!important;
  overflow:hidden!important;
}
.pet-trainer .pet-practice-settings .pet-measure-stepper input,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-stepper input{
  width:54px!important;
  height:32px!important;
  min-height:32px!important;
  border:0!important;
  border-radius:0!important;
  padding:0 4px!important;
  margin:0!important;
  background:#fff!important;
  text-align:center!important;
  appearance:textfield!important;
  -moz-appearance:textfield!important;
}
.pet-trainer .pet-practice-settings .pet-measure-stepper input::-webkit-outer-spin-button,
.pet-trainer .pet-practice-settings .pet-measure-stepper input::-webkit-inner-spin-button,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-stepper input::-webkit-outer-spin-button,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-stepper input::-webkit-inner-spin-button{
  -webkit-appearance:none!important;
  margin:0!important;
}
.pet-trainer .pet-practice-settings .pet-measure-arrows,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-arrows{
  display:flex!important;
  flex-direction:column!important;
  width:28px!important;
  height:32px!important;
  border-left:1px solid #d0d3d8!important;
  background:#fff!important;
}
.pet-trainer .pet-practice-settings .pet-measure-step,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-step{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:28px!important;
  height:16px!important;
  min-width:28px!important;
  min-height:16px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  color:#555!important;
  font-family:inherit!important;
  font-size:9px!important;
  font-weight:400!important;
  line-height:1!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
.pet-trainer .pet-practice-settings .pet-measure-step:first-child,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-step:first-child{
  border-bottom:1px solid #e1e3e6!important;
}
.pet-trainer .pet-practice-settings .pet-measure-step:hover,
.pet-musicxml-exercise .pet-practice-settings .pet-measure-step:hover{
  background:#f7f7f7!important;
  color:#222!important;
}


/* v2.2.15: uniform quiet tempo slider track */
.pet-trainer .pet-practice-settings .pet-tempo-slider,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider{
  accent-color:#e2e3e5!important;
  background:transparent!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-slider::-webkit-slider-runnable-track,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-webkit-slider-runnable-track{
  height:4px!important;
  border-radius:999px!important;
  background:#e2e3e5!important;
  box-shadow:none!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-slider::-webkit-slider-thumb,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-webkit-slider-thumb{
  -webkit-appearance:none!important;
  width:18px!important;
  height:18px!important;
  margin-top:-7px!important;
  border:1px solid #b9bcc2!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:none!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-slider::-moz-range-track,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-moz-range-track{
  height:4px!important;
  border-radius:999px!important;
  background:#e2e3e5!important;
  box-shadow:none!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-slider::-moz-range-progress,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-moz-range-progress{
  height:4px!important;
  border-radius:999px!important;
  background:#e2e3e5!important;
  box-shadow:none!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-slider::-moz-range-thumb,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-moz-range-thumb{
  width:18px!important;
  height:18px!important;
  border:1px solid #b9bcc2!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:none!important;
}

/* v2.2.16: remove dark native slider fill; use one constant light-gray track */
.pet-trainer .pet-practice-settings .pet-tempo-slider,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider{
  -webkit-appearance:none!important;
  appearance:none!important;
  background:transparent!important;
  accent-color:#e2e3e5!important;
  height:18px!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-slider::-webkit-slider-runnable-track,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-webkit-slider-runnable-track{
  height:4px!important;
  border-radius:999px!important;
  background:#e2e3e5!important;
  border:0!important;
  box-shadow:none!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-slider::-webkit-slider-thumb,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-webkit-slider-thumb{
  -webkit-appearance:none!important;
  appearance:none!important;
  width:18px!important;
  height:18px!important;
  margin-top:-7px!important;
  border:1px solid #b9bcc2!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:none!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-slider::-moz-range-track,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-moz-range-track,
.pet-trainer .pet-practice-settings .pet-tempo-slider::-moz-range-progress,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-moz-range-progress{
  height:4px!important;
  border-radius:999px!important;
  background:#e2e3e5!important;
  border:0!important;
  box-shadow:none!important;
}
.pet-trainer .pet-practice-settings .pet-tempo-slider::-moz-range-thumb,
.pet-musicxml-exercise .pet-practice-settings .pet-tempo-slider::-moz-range-thumb{
  width:18px!important;
  height:18px!important;
  border:1px solid #b9bcc2!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:none!important;
}

/* v2.2.18: left-align score and remove inner score border */
.pet-trainer .pet-score,
.pet-musicxml-exercise .pet-score{
  border:none!important;
  box-shadow:none!important;
  justify-content:flex-start!important;
}
.pet-trainer .pet-vex-score,
.pet-trainer .pet-osmd-score,
.pet-musicxml-exercise .pet-vex-score,
.pet-musicxml-exercise .pet-osmd-score{
  margin-left:0!important;
  margin-right:auto!important;
}
.pet-trainer .pet-score svg,
.pet-trainer .pet-vex-score svg,
.pet-trainer .pet-osmd-score svg,
.pet-musicxml-exercise .pet-score svg,
.pet-musicxml-exercise .pet-vex-score svg,
.pet-musicxml-exercise .pet-osmd-score svg{
  margin-left:0!important;
  margin-right:auto!important;
}
.pet-musicxml-exercise .pet-osmd-score [id^="osmdCanvasPage"]{
  margin-left:0!important;
  margin-right:auto!important;
}

/* v2.2.19: force generated staff to start at the content left edge */
.pet-trainer .pet-score,
.pet-musicxml-exercise .pet-score{
  justify-content:flex-start!important;
  text-align:left!important;
  padding-left:0!important;
  padding-right:0!important;
}
.pet-trainer .pet-vex-score,
.pet-trainer .pet-osmd-score,
.pet-musicxml-exercise .pet-vex-score,
.pet-musicxml-exercise .pet-osmd-score{
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
}
.pet-trainer .pet-vex-score svg,
.pet-trainer .pet-score svg,
.pet-musicxml-exercise .pet-vex-score svg,
.pet-musicxml-exercise .pet-score svg{
  margin-left:0!important;
  margin-right:0!important;
  display:block!important;
}


/* v2.2.20: lighter exercise title */
h3.pet-title {
    font-size: 1.25em;
    font-weight: 400;
}


/* v2.2.62: tighter frontend score panel and reliable fallback-score highlighting */
.pet-trainer .pet-score,
.pet-musicxml-exercise .pet-score{
  min-height:180px!important;
  height:auto!important;
  align-items:flex-start!important;
}
.pet-trainer .pet-vex-score,
.pet-musicxml-exercise .pet-vex-score{
  min-height:150px!important;
  height:auto!important;
}
.pet-trainer .pet-vex-score svg,
.pet-musicxml-exercise .pet-vex-score svg{
  height:auto!important;
  max-height:220px!important;
}
.pet-musicxml-exercise .pet-osmd-score{
  min-height:0!important;
}
.pet-musicxml-exercise .pet-score:has(.pet-vex-score){
  padding-top:8px!important;
  padding-bottom:8px!important;
}
@media(max-width:700px){
  .pet-trainer .pet-score,
  .pet-musicxml-exercise .pet-score{min-height:150px!important;}
  .pet-trainer .pet-vex-score,
  .pet-musicxml-exercise .pet-vex-score{min-height:130px!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;
}


/* v2.2.65: keep fallback VexFlow score at the same height before/during playback.
   The cropped SVG viewBox is smaller than the rendered score box; shrinking to it makes the clef jump. */
.pet-score[data-pet-renderer="fallback-vexflow"],
.pet-score-layout-locked .pet-score[data-pet-renderer="fallback-vexflow"],
.pet-is-playing .pet-score[data-pet-renderer="fallback-vexflow"]{
  min-height:180px!important;
  height:180px!important;
  overflow:hidden!important;
}
.pet-score[data-pet-renderer="fallback-vexflow"] .pet-vex-score,
.pet-score-layout-locked .pet-score[data-pet-renderer="fallback-vexflow"] .pet-vex-score,
.pet-is-playing .pet-score[data-pet-renderer="fallback-vexflow"] .pet-vex-score{
  min-height:180px!important;
  height:180px!important;
  overflow:visible!important;
}
.pet-score[data-pet-renderer="fallback-vexflow"] svg,
.pet-score-layout-locked .pet-score[data-pet-renderer="fallback-vexflow"] svg,
.pet-is-playing .pet-score[data-pet-renderer="fallback-vexflow"] svg{
  height:180px!important;
  max-height:none!important;
  overflow:visible!important;
  transform:none!important;
}


/* v2.2.67: fallback MusicXML/VexFlow must never shrink to the cropped 95px box during Play. */
.pet-score[data-pet-renderer="fallback-vexflow"],
.pet-score[data-pet-renderer="fallback-vexflow"]:has(.pet-vex-score),
.pet-is-playing .pet-score[data-pet-renderer="fallback-vexflow"],
.pet-score-layout-locked .pet-score[data-pet-renderer="fallback-vexflow"]{
  height:180px!important;
  min-height:180px!important;
  max-height:none!important;
  overflow:hidden!important;
}
.pet-score[data-pet-renderer="fallback-vexflow"] .pet-vex-score,
.pet-is-playing .pet-score[data-pet-renderer="fallback-vexflow"] .pet-vex-score,
.pet-score-layout-locked .pet-score[data-pet-renderer="fallback-vexflow"] .pet-vex-score{
  height:180px!important;
  min-height:180px!important;
  max-height:none!important;
  overflow:visible!important;
}
.pet-score[data-pet-renderer="fallback-vexflow"] svg,
.pet-is-playing .pet-score[data-pet-renderer="fallback-vexflow"] svg,
.pet-score-layout-locked .pet-score[data-pet-renderer="fallback-vexflow"] svg{
  height:180px!important;
  min-height:180px!important;
  max-height:none!important;
  transform:none!important;
  margin-top:0!important;
}


/* v2.2.77: force fallback VexFlow notation to occupy the full score panel width. */
.pet-trainer .pet-score,
.pet-musicxml-exercise .pet-score{
  width:100%!important;
  max-width:100%!important;
}
.pet-trainer .pet-vex-score,
.pet-musicxml-exercise .pet-vex-score{
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
}
.pet-trainer .pet-vex-score svg,
.pet-musicxml-exercise .pet-vex-score svg{
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
}


/* v2.2.78: delayed crop/fit scripts must not collapse fallback grand staff width. */
.pet-score[data-pet-renderer="fallback-vexflow"],
.pet-score[data-pet-renderer="fallback-vexflow"] .pet-vex-score{
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
}
.pet-score[data-pet-renderer="fallback-vexflow"] svg{
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:180px!important;
  max-height:none!important;
}


/* v2.2.79: full-width fallback scores must preserve the SVG aspect ratio.
   Do not force grand-staff SVGs into a 180px box; that vertically squashes noteheads. */
.pet-score[data-pet-renderer="fallback-vexflow"][data-pet-fallback-clef="grand"],
.pet-score-layout-locked .pet-score[data-pet-renderer="fallback-vexflow"][data-pet-fallback-clef="grand"],
.pet-is-playing .pet-score[data-pet-renderer="fallback-vexflow"][data-pet-fallback-clef="grand"]{
  height:330px!important;
  min-height:330px!important;
  overflow:hidden!important;
}
.pet-score[data-pet-renderer="fallback-vexflow"][data-pet-fallback-clef="grand"] .pet-vex-score,
.pet-score-layout-locked .pet-score[data-pet-renderer="fallback-vexflow"][data-pet-fallback-clef="grand"] .pet-vex-score,
.pet-is-playing .pet-score[data-pet-renderer="fallback-vexflow"][data-pet-fallback-clef="grand"] .pet-vex-score{
  height:330px!important;
  min-height:330px!important;
  overflow:visible!important;
}
.pet-score[data-pet-renderer="fallback-vexflow"] svg,
.pet-score-layout-locked .pet-score[data-pet-renderer="fallback-vexflow"] svg,
.pet-is-playing .pet-score[data-pet-renderer="fallback-vexflow"] svg{
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  transform:none!important;
}