.hg-tip-exercise-demo {
  border: 1px solid rgba(246, 205, 155, .62);
  background: rgba(246, 205, 155, .06);
  color: #f6cd9b;
}

.hg-tip-exercise-demo:hover,
.hg-tip-exercise-demo.is-open {
  border-color: #f6cd9b;
  background: rgba(246, 205, 155, .14);
  color: #ffd9a8;
}

.hg-tip-demo-inline[hidden],
.hg-tip-demo-panel[hidden] { display: none !important; }

.hg-tip-demo-inline {
  width: 100%;
  margin-top: 12px;
}

.hg-tip-demo-dialog {
  width: min(1220px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100vh - 40px);
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(246, 205, 155, .3);
  border-radius: 14px;
  background: #0f1115;
  color: #fff;
}

.hg-tip-demo-dialog::backdrop { background: rgba(4, 5, 8, .82); }

.hg-tip-demo-dialog-frame > header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: #171a21;
}

.hg-tip-demo-dialog-frame > header div { display: grid; gap: 2px; }
.hg-tip-demo-dialog-frame > header small { color: #f6cd9b; font-size: .7rem; font-weight: 850; letter-spacing: .08em; }
.hg-tip-demo-dialog-frame > header h2 { margin: 0; color: #fff; font-size: 1.05rem; line-height: 1.3; }

.hg-tip-demo-dialog-frame > header button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: #101319;
  color: #fff;
  font: inherit;
  font-size: 1.45rem;
  cursor: pointer;
}

.hg-tip-demo-dialog-frame > header button:hover { border-color: #f6cd9b; color: #f6cd9b; }
[data-hg-tip-demo-desktop-host] { padding: 14px; }

.hg-tip-demo-panel {
  --demo-bg: #0f1115;
  --demo-surface: #171a21;
  --demo-gold: #f6cd9b;
  --demo-gold-hover: #ffd9a8;
  --demo-muted: #b8b8b8;
  width: 100%;
  color: #fff;
}

.hg-tip-demo-lab,
.hg-tip-demo-lab * { box-sizing: border-box; }

.hg-tip-demo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 12px;
}

.hg-tip-demo-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.hg-tip-demo-toolbar strong { color: #fff; font-size: 1rem; }
.hg-tip-demo-toolbar [data-hg-tip-demo-bpm] { color: var(--demo-gold); font-size: .78rem; font-weight: 850; }
.hg-tip-demo-toolbar .transport { display: flex; gap: 8px; }

.hg-tip-demo-tempo-custom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
}

.hg-tip-demo-tempo-custom label { display: inline-flex; align-items: center; gap: 6px; }
.hg-tip-demo-tempo-custom label > span { color: #b8b8b8; font-size: .76rem; font-weight: 750; }
.hg-tip-demo-tempo-custom input {
  width: 72px;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  background: #0f1115;
  color: #fff;
  font: inherit;
  font-size: .84rem;
  font-weight: 800;
}

.hg-tip-demo-tempo-custom button {
  min-height: 36px;
  padding: 6px 11px;
  border: 1px solid rgba(246, 205, 155, .58);
  border-radius: 8px;
  background: rgba(246, 205, 155, .08);
  color: var(--demo-gold);
  font: inherit;
  font-size: .78rem;
  font-weight: 850;
  cursor: pointer;
}

.hg-tip-demo-tempo-custom button:hover { border-color: var(--demo-gold); background: rgba(246, 205, 155, .14); }
.hg-tip-demo-tempo-custom input:focus-visible,
.hg-tip-demo-tempo-custom button:focus-visible,
.hg-tip-demo-tempo-mobile select:focus-visible,
.hg-tip-demo-bluetooth-delay select:focus-visible { outline: 3px solid rgba(246, 205, 155, .42); outline-offset: 2px; }
.hg-tip-demo-tempo-mobile { display: none; }
.hg-tip-demo-bluetooth-delay { display: none; }

.hg-tip-demo-toolbar .button {
  min-width: 86px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: #11141a;
  color: #fff;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.hg-tip-demo-toolbar .button:hover:not(:disabled) { border-color: rgba(246, 205, 155, .62); }
.hg-tip-demo-toolbar .button.primary { border-color: var(--demo-gold); background: var(--demo-gold); color: var(--demo-bg); }
.hg-tip-demo-toolbar .button.primary:hover:not(:disabled) { border-color: var(--demo-gold-hover); background: var(--demo-gold-hover); }
.hg-tip-demo-toolbar .button:disabled { cursor: not-allowed; opacity: .42; }

.hg-tip-demo-lab .stage-panel {
  position: relative;
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgba(246, 205, 155, .22);
  border-radius: 10px;
  background: #090b0f;
}

.hg-tip-demo-score-scroll {
  position: absolute;
  top: 8px;
  right: 8px;
  left: 8px;
  z-index: 10;
  width: auto;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
  scrollbar-color: rgba(217, 169, 106, .72) rgba(15, 17, 21, .12);
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}

.hg-tip-demo-score { width: 100%; min-width: 0; }
.hg-tip-demo-score .hg-notation-stack { display: block; padding: 2px 8px; }
.hg-tip-demo-score .hg-gongo-notation { display: block; width: 100%; height: 92px; }

.hg-tip-demo-lab .stage-scroll {
  width: 100%;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.hg-tip-demo-lab .drum-stage {
  position: relative;
  width: var(--stage-width);
  max-width: none;
  aspect-ratio: 1175 / 663;
  overflow: hidden;
  border-radius: 8px;
  background: #07090c;
  isolation: isolate;
  user-select: none;
}

.hg-tip-demo-lab .drum-kit-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hg-tip-demo-lab .stage-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(4, 5, 7, .62) 0, rgba(4, 5, 7, 0) 17%), radial-gradient(circle at 50% 45%, transparent 58%, rgba(0, 0, 0, .2) 100%);
  pointer-events: none;
}

.hg-tip-demo-lab .hit-map { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.hg-tip-demo-lab .hit-point { position: absolute; border-radius: 50%; }
.hg-tip-demo-lab .hit-point::before,
.hg-tip-demo-lab .hit-point::after { position: absolute; content: ""; pointer-events: none; }
.hg-tip-demo-lab .hit-point::before { inset: 8%; border: 2px solid transparent; border-radius: inherit; opacity: 0; }
.hg-tip-demo-lab .hit-point::after { top: 50%; left: 50%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: var(--demo-gold-hover); opacity: 0; transform: translate(-50%, -50%) scale(.25); }
.hg-tip-demo-lab .hit-point.is-hit::before { animation: hg-tip-demo-hit-ring 260ms cubic-bezier(.16, 1, .3, 1) both; }
.hg-tip-demo-lab .hit-point.is-hit::after { animation: hg-tip-demo-hit-core 210ms cubic-bezier(.16, 1, .3, 1) both; }
.hg-tip-demo-lab .hit-point-cr1 { left: 1.7%; top: -.7%; width: 21.2%; aspect-ratio: 1; }
.hg-tip-demo-lab .hit-point-hh { left: 4.2%; top: 38%; width: 13.5%; aspect-ratio: 1; }
.hg-tip-demo-lab .hit-point-sd { left: 20.2%; top: 44.4%; width: 20.8%; aspect-ratio: 1; }
.hg-tip-demo-lab .hit-point-t1 { left: 28.9%; top: 20%; width: 14.4%; aspect-ratio: 1; }
.hg-tip-demo-lab .hit-point-t2 { left: 42.7%; top: 20%; width: 14.4%; aspect-ratio: 1; }
.hg-tip-demo-lab .hit-point-k { left: 38.7%; top: 51%; width: 14%; aspect-ratio: 1; }
.hg-tip-demo-lab .hit-point-ft { left: 59.6%; top: 41%; width: 20%; aspect-ratio: 1; }
.hg-tip-demo-lab .hit-point-rd { left: 62%; top: 1.7%; width: 17.5%; aspect-ratio: 1; }
.hg-tip-demo-lab .hit-point-cr2 { left: 79.5%; top: 7.2%; width: 19.7%; aspect-ratio: 1; }

.hg-tip-demo-lab .arm {
  position: absolute;
  bottom: -10%;
  z-index: 4;
  width: 32%;
  aspect-ratio: 2 / 3;
  opacity: .9;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .42));
  will-change: transform, filter;
  pointer-events: none;
}

.hg-tip-demo-lab .arm-left { left: 23.8%; bottom: -8.5%; transform: translateX(-50%) rotate(12deg) scale(.68); }
.hg-tip-demo-lab .arm-right { left: 46%; bottom: -7%; transform: translateX(-50%) rotate(-28deg) scale(.68); }
.hg-tip-demo-lab .arm img { position: absolute; inset: 0; display: block; width: 100%; height: auto; transform-origin: 50% 72%; will-change: transform, filter; pointer-events: none; }
.hg-tip-demo-lab .arm-left img {
  /* Mirror independently from wrist animation to prevent left-hand flashes. */
  scale: -1 1;
}
.hg-tip-demo-lab .arm .arm-forearm { z-index: 1; clip-path: inset(63.5% 0 0 0); }
.hg-tip-demo-lab .arm .arm-wrist { z-index: 2; clip-path: inset(0 0 28% 0); transform-origin: 50% 72%; }

.hg-tip-demo-lab .foot {
  position: absolute;
  bottom: -14.5%;
  z-index: 3;
  width: 14%;
  opacity: .96;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .46));
  pointer-events: none;
}

.hg-tip-demo-lab .foot-left { left: 20%; transform: translateX(-50%) rotate(-12deg); }
.hg-tip-demo-lab .foot-right { left: 46.4%; bottom: -11.5%; transform: translateX(-50%) rotate(2deg); }
.hg-tip-demo-lab .foot img { display: block; width: 100%; height: auto; transform-origin: 50% 30%; will-change: transform, filter; pointer-events: none; }
.hg-tip-demo-lab .foot-left img { transform: scaleX(-1); }

.hg-tip-demo-lab .kick-beater-static-mask {
  position: absolute;
  top: 65.1%;
  left: 45.05%;
  z-index: 2;
  width: 2.55%;
  height: 7.45%;
  border-radius: 48% 48% 36% 36%;
  background: radial-gradient(ellipse at 50% 18%, rgba(22, 23, 24, .99) 0 38%, rgba(13, 15, 17, .98) 67%, rgba(9, 11, 13, .82) 82%, transparent 100%);
  pointer-events: none;
}

.hg-tip-demo-lab .kick-beater {
  position: absolute;
  top: 65.7%;
  left: 46.32%;
  z-index: 3;
  width: 1.85%;
  height: 7.9%;
  transform: translateX(-50%);
  pointer-events: none;
}

.hg-tip-demo-lab .kick-beater-motion {
  position: absolute;
  inset: 0;
  transform: perspective(480px) rotateX(0deg) scaleY(1) translateY(0);
  transform-origin: 50% 94%;
  will-change: transform, filter;
}

.hg-tip-demo-lab .kick-beater-rod {
  position: absolute;
  bottom: 5%;
  left: 50%;
  width: 12%;
  height: 76%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b3e42 0, #d7d9d9 43%, #777b80 68%, #24272b 100%);
  box-shadow: 0 0 1px rgba(255, 255, 255, .38);
  transform: translateX(-50%);
}

.hg-tip-demo-lab .kick-beater-head {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(116, 119, 120, .42);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #3c3e40 0 13%, #1c1e20 37%, #090a0c 72%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .62);
  transform: translateX(-50%);
}

.hg-tip-demo-lab .kick-beater-pivot {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 48%;
  aspect-ratio: 1;
  border: 1px solid rgba(164, 168, 170, .52);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 35%, #c9cbcb 0 12%, #55595d 38%, #17191c 76%);
  transform: translateX(-50%);
}

.hg-tip-demo-runtime { display: none !important; }

@keyframes hg-tip-demo-hit-ring {
  0% { border-color: rgba(246, 205, 155, 0); opacity: 0; transform: scale(.72); }
  28% { border-color: rgba(255, 217, 168, .95); opacity: 1; }
  100% { border-color: rgba(246, 205, 155, 0); opacity: 0; transform: scale(1.13); }
}

@keyframes hg-tip-demo-hit-core {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  35% { opacity: .9; transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 20px rgba(246, 205, 155, .72); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}

@media (max-width: 768px) {
  .hg-tip-exercise-actions {
    grid-template-columns: minmax(0, .82fr) minmax(0, .82fr) minmax(0, 1.6fr);
    gap: 8px;
  }
  .hg-tip-exercise-actions .hg-tip-exercise-practice { grid-column: auto; }
  .hg-tip-exercise-actions button {
    min-width: 0;
    padding-inline: 8px;
    font-size: .8rem;
    white-space: nowrap;
  }
  .hg-tip-demo-dialog { display: none; }
  .hg-tip-demo-inline { margin-top: 10px; }
  .hg-tip-demo-panel { padding: 10px; border: 1px solid rgba(246, 205, 155, .22); border-radius: 12px; background: #0f1115; }
  .hg-tip-demo-lab { display: flex; flex-direction: column; }
  .hg-tip-demo-toolbar { display: contents; }
  .hg-tip-demo-heading {
    order: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    gap: 4px 8px;
  }
  .hg-tip-demo-heading strong { grid-column: 1 / -1; }
  .hg-tip-demo-heading [data-hg-tip-demo-bpm] { display: none; }
  .hg-tip-demo-tempo-custom { display: none; }
  .hg-tip-demo-tempo-mobile { display: inline-flex; grid-column: 1; align-items: center; justify-self: start; }
  .hg-tip-demo-tempo-mobile > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hg-tip-demo-tempo-mobile select {
    width: min(100%, 128px);
    min-height: 40px;
    padding: 7px 30px 7px 10px;
    border: 1px solid rgba(246, 205, 155, .42);
    border-radius: 8px;
    background: #171a21;
    color: #fff;
    font: inherit;
    font-size: .82rem;
    font-weight: 800;
  }
  .hg-tip-demo-bluetooth-delay {
    display: inline-flex;
    grid-column: 2;
    align-items: center;
    justify-self: end;
    min-width: 0;
  }
  .hg-tip-demo-bluetooth-delay > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hg-tip-demo-bluetooth-delay select {
    width: min(100%, 148px);
    min-height: 40px;
    padding: 7px 28px 7px 10px;
    border: 1px solid rgba(246, 205, 155, .42);
    border-radius: 8px;
    background: #171a21;
    color: #fff;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
  }
  .hg-tip-demo-toolbar .transport { order: 3; width: 100%; padding-top: 10px; }
  .hg-tip-demo-toolbar .button { flex: 1; min-width: 0; min-height: 44px; padding-inline: 12px; }
  .hg-tip-demo-lab .stage-panel { order: 2; padding: 4px; }
  .hg-tip-demo-score-scroll {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    z-index: auto;
    width: 100%;
    margin-bottom: 4px;
    overflow-x: hidden;
    background: rgba(255, 255, 255, .96);
  }
  .hg-tip-demo-score { min-width: 0; }
  .hg-tip-demo-score .hg-gongo-notation { height: auto; }
  .hg-tip-demo-score .hg-notation-system + .hg-notation-system { margin-top: 2px; }
}

@media (max-width: 420px) {
  .hg-tip-demo-toolbar { display: contents; }
  .hg-tip-demo-heading { gap-inline: 6px; }
  .hg-tip-demo-tempo-mobile select { width: min(100%, 116px); }
  .hg-tip-demo-bluetooth-delay select { width: min(100%, 132px); padding-inline: 8px 22px; font-size: .76rem; }
  .hg-tip-demo-toolbar .transport { gap: 6px; }
  .hg-tip-demo-toolbar .button { min-width: 0; padding-inline: 9px; font-size: .84rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hg-tip-exercise-demo,
  .hg-tip-demo-toolbar .button,
  .hg-tip-demo-tempo-custom button { transition: none; }
  .hg-tip-demo-lab .hit-point.is-hit::before,
  .hg-tip-demo-lab .hit-point.is-hit::after { animation-duration: 1ms; }
}

/* Direct-render Ghost kits use the source artwork's native HH, snare and kick positions. */
.hg-tip-demo-lab .drum-stage[data-drummer-visual-style^="ghost"] .hit-point-hh { left: 3.9%; top: 36%; }
.hg-tip-demo-lab .drum-stage[data-drummer-visual-style^="ghost"] .hit-point-sd { left: 19%; top: 42.2%; }
.hg-tip-demo-lab .drum-stage[data-drummer-visual-style^="ghost"] .hit-point-k { left: 39.65%; top: 51.1%; }
.hg-tip-demo-lab .drum-stage[data-drummer-visual-style^="ghost"] .foot-right { left: 46.65%; }
.hg-tip-demo-lab .drum-stage[data-drummer-visual-style^="ghost"] .kick-beater-static-mask { left: 45.38%; }
.hg-tip-demo-lab .drum-stage[data-drummer-visual-style^="ghost"] .kick-beater { left: 46.65%; }