.mtp-xy-bar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-bottom: 14px; }
.mtp-xy-group { display: flex; align-items: center; gap: 8px; }
.mtp-xy-group input[type="range"] { width: 120px; accent-color: var(--mtp-brass); }
.mtp-xy-scroll { max-width: 100%; overflow-x: auto; padding: 6px 0 10px; -webkit-overflow-scrolling: touch; }
.mtp-xy-bars { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: calc(var(--xy-n, 8) * 46px); height: clamp(200px, 36vw, 280px); user-select: none; -webkit-user-select: none; }
.mtp-tool-panel button.mtp-xy-bar-el:not(.mtp-button) {
  flex: 1 1 0; min-width: 0; max-width: 90px; height: calc(var(--xy-h, 1) * 100%); padding: 6px 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background: var(--xy-c); color: #111; border: 2px solid rgba(0,0,0,.35); border-radius: 10px; font-size: 17px; font-weight: 800; touch-action: none; cursor: pointer;
}
.mtp-tool-panel button.mtp-xy-bar-el.is-sharp { color: #fff; background: linear-gradient(var(--xy-stripe) 0 8px, var(--xy-c) 8px); height: calc(var(--xy-h, 1) * 78%); align-self: flex-start; margin-top: 4%; }
.mtp-xy-bar-el .lab { pointer-events: none; font-size: 15px; }
.mtp-xy-bar-el .hint { pointer-events: none; font-size: 11px; font-weight: 400; opacity: .7; }
.mtp-tool-panel button.mtp-xy-bar-el.is-hit { filter: brightness(1.35); transform: scale(.96); }
.mtp-tool-panel button.mtp-xy-bar-el.is-target { outline: 4px solid #fff; outline-offset: 2px; box-shadow: 0 0 18px 4px #fff8; }
@media (hover: none) { .mtp-xy-bar-el .hint, .mtp-xy-hint { display: none; } }
.mtp-xy-last { margin: 4px 0 0; min-height: 22px; color: var(--mtp-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.mtp-xy-hint { margin: 6px 0 0; color: var(--mtp-muted); font-size: 13px; }
.mtp-xy-learn { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--mtp-line); }
.mtp-xy-learn h3 { margin: 0 0 10px; font-size: 18px; }
.mtp-xy-status { margin: 4px 0 0; color: var(--mtp-muted); font-size: 14px; max-width: 70ch; }
.mtp-xy-group { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.mtp-xy-group select { min-width: 0; max-width: 100%; }