.hg-drummer-player.has-measure-loop-controls [data-hg-loop-measures] {
  width: 96px;
  min-width: 0;
  min-height: 34px;
  border: 1px solid #3a414d;
  border-radius: 7px;
  padding: 4px;
  background: #0f1115;
  color: #f6cd9b;
  font: inherit;
  font-size: 12px;
}
.hg-drummer-player[data-hg-score-practice].has-measure-loop-controls .hg-drummer-loop-control {
  display: grid;
  grid-template-columns: auto 96px minmax(52px, 64px) auto minmax(52px, 64px) auto;
  justify-content: start;
  gap: 6px;
  align-items: center;
}
.hg-drummer-player[data-hg-score-practice].has-measure-loop-controls .hg-drummer-loop-control > input {
  width: 100%;
  min-width: 0;
}
.hg-drummer-player[data-hg-score-practice="true"].is-mobile-app-controls.has-measure-loop-controls .hg-drummer-loop-control {
  grid-template-columns: auto 96px minmax(52px, 64px) auto minmax(52px, 64px) auto;
}
.hg-drummer-player[data-hg-score-practice].has-measure-loop-controls .hg-drummer-loop-control > .hg-loop-actions {
  grid-column: 6;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.hg-drummer-player.has-measure-loop-controls .hg-drummer-control-label {
  white-space: nowrap;
}
.hg-drummer-player.has-measure-loop-controls .hg-drummer-controls-toggle.is-loop-enabled,
.hg-drummer-player.has-measure-loop-controls [data-hg-loop-enable] {
  color: #fff;
  background: #287747;
  border-color: #73d898;
  box-shadow: 0 4px 16px rgba(74, 194, 115, .28);
}
.hg-drummer-player.has-measure-loop-controls .hg-drummer-controls-toggle.is-loop-quick,
.hg-drummer-player.has-measure-loop-controls [data-hg-loop-quick] {
  color: #0f1115;
  background: #f2a956;
  border-color: #ffd3a1;
  box-shadow: 0 4px 16px rgba(242, 169, 86, .24);
}
.hg-drummer-player.has-measure-loop-controls [data-hg-loop-quick]:hover {
  background: #ffc180;
  border-color: #ffe1b9;
}
.hg-loop-actions > button { font-weight: 800; }
.hg-loop-controls-anchor { position: relative; display: inline-flex; }
.hg-drummer-player[data-hg-score-practice="true"].has-measure-loop-controls > .hg-drummer-player-controls {
  position: relative;
  z-index: 120;
  padding-top: 48px;
}
.hg-loop-count-in-lights {
  position: absolute;
  left: 0;
  bottom: calc(100% + 5px);
  z-index: 121;
  display: inline-flex;
  gap: 8px;
  padding: 6px 7px;
  border: 1px solid #4c525e;
  border-radius: 22px;
  background: #171a21;
  pointer-events: none;
}
.hg-loop-count-in-lights > span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #747b85;
}
.hg-loop-count-in-lights > span.is-lit { background: #55d885; box-shadow: 0 0 8px rgba(85, 216, 133, .55); }
.hg-drummer-player[data-hg-score-practice="true"]:not(.is-mobile-app-controls) .hg-loop-count-in-lights--mobile,
.hg-drummer-player[data-hg-score-practice="true"].is-mobile-app-controls .hg-loop-count-in-lights--desktop { display: none; }
.hg-drummer-player[data-hg-score-practice="true"]:not(.is-mobile-app-controls) .hg-loop-count-in-lights--desktop {
  position: relative;
  bottom: auto;
  left: auto;
  flex: 0 0 auto;
  align-items: center;
}
.hg-drummer-player[data-hg-score-practice="true"] .hg-loop-desktop-metronome {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.hg-drummer-player[data-hg-score-practice="true"] .hg-loop-desktop-metronome > .hg-loop-playback-status {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 24px;
  padding: 3px 8px;
  color: #f6cd9b;
  background: #171a21;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.hg-drummer-player[data-hg-score-practice="true"] .hg-loop-desktop-metronome > .hg-loop-playback-status:not(:has(output:not(:empty))) { display: none; }
.hg-drummer-player[data-hg-score-practice="true"]:not(.is-mobile-app-controls).has-measure-loop-controls > .hg-drummer-player-controls { padding-top: 0; }
.score-practice-player[data-hg-score-view-device="desktop"] .hg-drummer-player.has-simple-score-practice-controls > .hg-drummer-player-controls { margin-top: 10px; }
.hg-drummer-player[data-hg-score-practice="true"] .hg-drummer-controls-toggle.is-entitlement-locked {
  position: relative;
  overflow: visible;
}
.hg-drummer-player[data-hg-score-practice="true"] .hg-drummer-controls-toggle.is-entitlement-locked .hg-drummer-lock-icon {
  display: none;
}
.hg-drummer-player[data-hg-score-practice="true"] .hg-drummer-controls-toggle.is-entitlement-locked::after {
  content: "";
  position: absolute;
  top: -8px;
  left: -8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid #f6cd9b;
  border-radius: 50%;
  background: #171a21 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6cd9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.hg-drummer-player[data-hg-score-practice="true"] [data-hg-controls-panel][data-entitlement-locked="true"] {
  cursor: pointer;
}
.hg-drummer-player[data-hg-score-practice="true"] [data-hg-controls-panel][data-entitlement-locked="true"] > :not([data-hg-controls-lock-note]) {
  pointer-events: none;
}
.hg-drummer-player[data-hg-score-practice="true"] [data-hg-controls-panel][data-entitlement-locked="true"]:focus-visible {
  outline: 2px solid #ffd9a8;
  outline-offset: 2px;
}
.hg-drummer-player.has-measure-loop-controls [data-hg-loop-enable]:hover {
  background: #329158;
  border-color: #8be4a8;
}
.hg-drummer-player.has-measure-loop-controls [data-hg-loop-clear] {
  color: #fff;
  background: #812b34;
  border-color: #cf7b84;
}
.hg-drummer-player.has-measure-loop-controls [data-hg-loop-clear]:hover {
  background: #a03640;
  border-color: #ec9ba2;
}
.hg-drummer-player.has-measure-loop-controls [data-hg-loop-enable]:focus-visible,
.hg-drummer-player.has-measure-loop-controls [data-hg-loop-clear]:focus-visible,
.hg-drummer-player.has-measure-loop-controls [data-hg-loop-quick]:focus-visible,
.hg-drummer-player.has-measure-loop-controls [data-hg-measure-prev]:focus-visible,
.hg-drummer-player.has-measure-loop-controls [data-hg-measure-next]:focus-visible {
  outline: 2px solid #ffd9a8;
  outline-offset: 2px;
}
.hg-drummer-player.has-measure-loop-controls .hg-measure-loop-count-in {
  white-space: nowrap;
  min-height: 40px;
  flex: 0 0 auto;
  min-width: 0;
  cursor: pointer;
}
.hg-drummer-player.has-measure-loop-controls .hg-loop-toggle-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 0 4px;
}
.hg-drummer-player.has-measure-loop-controls .hg-measure-loop-count-in input[type="checkbox"],
.hg-drummer-player.has-measure-loop-controls .hg-loop-progressive-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  vertical-align: middle;
  accent-color: #f6cd9b;
}
.hg-drummer-player.has-measure-loop-controls .hg-measure-loop-count-in output {
  white-space: nowrap;
}
.hg-measure-loop-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 8px;
  font-size: 13px;
}
.hg-measure-loop-summary:not(:has(output:not(:empty))) { display: none; }
.hg-drummer-player.has-measure-loop-controls .hg-loop-progressive {
  padding: 0 4px 8px;
  font-size: 13px;
}
.hg-drummer-player.has-measure-loop-controls .hg-loop-progressive[hidden] { display: none; }
.hg-loop-progressive-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  white-space: nowrap;
  cursor: pointer;
}
.hg-drummer-player.has-measure-loop-controls .hg-loop-progressive-toggle input {
  width: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: #f6cd9b;
}
.hg-drummer-player[data-hg-score-practice="true"].has-measure-loop-controls > .hg-loop-playback-status {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 24px;
  padding: 3px 12px;
  color: #f6cd9b;
  background: #171a21;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow-x: auto;
}
.hg-drummer-player[data-hg-score-practice="true"].has-measure-loop-controls > .hg-loop-playback-status:not(:has(output:not(:empty))),
.hg-loop-playback-status > output:empty { display: none; }
.hg-loop-progressive-fields {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: start;
  gap: 12px;
  flex-basis: 100%;
  padding-top: 4px;
}
.hg-loop-progressive-fields[hidden] { display: none; }
.hg-loop-progressive-fields > label { display: grid; gap: 4px; color: #b8b8b8; }
.hg-loop-value { display: flex; align-items: center; gap: 5px; }
.hg-drummer-player.has-measure-loop-controls .hg-loop-value :is(input, select) {
  width: 64px;
  min-width: 0;
  min-height: 36px;
  padding: 5px;
  color: #fff;
  background: #0f1115;
  border: 1px solid #6e6253;
  border-radius: 6px;
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.hg-drummer-player.has-measure-loop-controls .hg-loop-value input[readonly] { border-color: transparent; background: transparent; }
.hg-loop-progressive-fields > p { grid-column: 1 / -1; margin: 0; color: #ffc0b4; }
.hg-loop-progressive-fields > p:empty { display: none; }
.hg-loop-progressive :is(input, select):focus-visible { outline: 2px solid #ffd9a8; outline-offset: 2px; }
.hg-loop-progressive :is(input, select):disabled { opacity: .5; cursor: not-allowed; }
.hg-drummer-player[data-hg-score-practice].has-measure-loop-controls .hg-drummer-controls-panel {
  bottom: calc(100% + 40px);
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  color-scheme: dark;
}
.hg-drummer-player[data-hg-score-practice="true"].is-mobile-app-controls.has-measure-loop-controls .hg-drummer-controls-panel {
  width: min(760px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
}
@media (max-width: 600px) {
  .hg-loop-progressive-fields { grid-template-columns: repeat(2, max-content); }
  .hg-drummer-player.has-measure-loop-controls .hg-measure-loop-count-in { min-height: 44px; }
  .hg-drummer-player.has-measure-loop-controls .hg-loop-value :is(input, select) { min-height: 44px; }
  .hg-drummer-player[data-hg-score-practice].has-measure-loop-controls .hg-drummer-controls-panel {
    position: fixed;
    inset: auto auto 96px 50%;
    bottom: 126px;
    max-height: calc(100dvh - 120px);
    transform: translateX(-50%);
    overflow: auto;
    z-index: 100;
  }
  .hg-drummer-player[data-hg-score-practice].has-measure-loop-controls .hg-drummer-speed-control {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .hg-drummer-player[data-hg-score-practice].has-measure-loop-controls .hg-drummer-speed-control label {
    display: flex;
    flex: 1 1 120px;
    min-width: 0;
  }
  .hg-drummer-player[data-hg-score-practice].has-measure-loop-controls .hg-drummer-speed-control label input {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

@media (max-width: 700px) {
  .hg-drummer-player[data-hg-score-practice="true"].is-mobile-app-controls.has-measure-loop-controls .hg-drummer-controls-panel {
    width: min(640px, calc(100vw - 8px));
    max-width: calc(100vw - 8px);
    padding-inline: 6px;
  }
  .hg-drummer-player[data-hg-score-practice="true"].is-mobile-app-controls.has-measure-loop-controls .hg-drummer-loop-control {
    grid-template-columns: auto 88px minmax(42px, 1fr) auto minmax(42px, 1fr);
    column-gap: 4px;
  }
  .hg-drummer-player[data-hg-score-practice="true"].is-mobile-app-controls.has-measure-loop-controls .hg-drummer-loop-control > .hg-loop-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr 1fr 1fr;
    gap: 4px;
  }
  .hg-drummer-player[data-hg-score-practice="true"].is-mobile-app-controls.has-measure-loop-controls .hg-loop-actions > button {
    min-width: 0;
    width: 100%;
    padding-inline: 2px;
    font-size: 12px;
    white-space: nowrap;
  }
  .hg-drummer-player[data-hg-score-practice="true"].is-mobile-app-controls.has-measure-loop-controls .hg-drummer-loop-control > .hg-drummer-control-volume {
    grid-row: 3;
  }
}

.hg-drummer-player[data-hg-score-practice="true"].is-mobile-app-controls.has-measure-loop-controls.is-phone-score-controls .hg-drummer-controls-panel {
  width: min(620px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  padding: 7px;
  gap: 5px;
}
.hg-drummer-player[data-hg-score-practice="true"].is-phone-score-controls .hg-drummer-loop-control > .hg-loop-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hg-drummer-player[data-hg-score-practice="true"].is-phone-score-controls .hg-loop-toggle-row {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
}
.hg-drummer-player[data-hg-score-practice="true"].is-phone-score-controls .hg-loop-toggle-row > .hg-measure-loop-count-in {
  width: auto;
  min-height: 44px;
}
.hg-drummer-player[data-hg-score-practice="true"].is-phone-score-controls .hg-loop-progressive-toggle {
  min-height: 44px;
}
.hg-drummer-player[data-hg-score-practice="true"].is-phone-score-controls .hg-loop-progressive-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px) {
  .hg-drummer-player[data-hg-score-practice="true"].is-phone-score-controls .hg-loop-progressive-fields {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.hg-drummer-player[data-hg-score-practice="true"].is-mobile-app-controls .hg-drummer-speed-control {
  grid-template-columns: 44px 44px minmax(88px, 1fr) 44px auto auto 56px 56px;
  gap: 4px;
}
.hg-drummer-player[data-hg-score-practice="true"].is-phone-score-controls .hg-drummer-speed-control label {
  grid-template-columns: auto minmax(0, 1fr);
}
.hg-drummer-player[data-hg-score-practice="true"].is-phone-score-controls .hg-drummer-speed-control label input {
  min-width: 0;
  max-width: none;
}
.hg-drummer-player[data-hg-score-practice="true"].is-mobile-app-controls .hg-drummer-speed-control > [data-hg-measure-prev] {
  grid-column: 7;
  grid-row: 1;
}
.hg-drummer-player[data-hg-score-practice="true"].is-mobile-app-controls .hg-drummer-speed-control > [data-hg-measure-next] {
  grid-column: 8;
  grid-row: 1;
}
.hg-drummer-player[data-hg-score-practice="true"].is-phone-score-controls .hg-drummer-speed-control > :is([data-hg-measure-prev], [data-hg-measure-next]) {
  min-width: 44px;
  padding-inline: 2px;
  font-size: 12px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .hg-drummer-player[data-hg-score-practice="true"].is-mobile-app-controls.is-phone-score-controls .hg-drummer-speed-control {
    display: grid;
    grid-template-columns: 44px 44px minmax(0, 1fr) 44px 44px;
  }
  .hg-drummer-player[data-hg-score-practice="true"].is-phone-score-controls .hg-drummer-speed-control > [data-hg-speed-reset] { grid-column: 1; grid-row: 1; }
  .hg-drummer-player[data-hg-score-practice="true"].is-phone-score-controls .hg-drummer-speed-control > [data-hg-speed-step="-1"] { grid-column: 2; grid-row: 1; }
  .hg-drummer-player[data-hg-score-practice="true"].is-phone-score-controls .hg-drummer-speed-control > label { grid-column: 3 / 5; grid-row: 1; }
  .hg-drummer-player[data-hg-score-practice="true"].is-phone-score-controls .hg-drummer-speed-control > [data-hg-speed-step="1"] { grid-column: 5; grid-row: 1; }
  .hg-drummer-player[data-hg-score-practice="true"].is-phone-score-controls .hg-drummer-speed-control > [data-hg-speed-current] { grid-column: 1 / 3; grid-row: 2; }
  .hg-drummer-player[data-hg-score-practice="true"].is-phone-score-controls .hg-drummer-speed-control > [data-hg-speed-rate] { grid-column: 3; grid-row: 2; }
  .hg-drummer-player[data-hg-score-practice="true"].is-mobile-app-controls.is-phone-score-controls .hg-drummer-speed-control > [data-hg-measure-prev] { grid-column: 4; grid-row: 2; }
  .hg-drummer-player[data-hg-score-practice="true"].is-mobile-app-controls.is-phone-score-controls .hg-drummer-speed-control > [data-hg-measure-next] { grid-column: 5; grid-row: 2; }
}

/* Keep the score stable while returning to A and resuming after count-in. */
.hg-drummer-player[data-hg-score-practice].has-measure-loop-controls .hg-drummer-score-row {
  animation: none;
  transition: none;
  opacity: 1;
}