:root {
  --panel-highlight: color-mix(in srgb, var(--accent-blue) 18%, transparent);
  --panel-shadow: rgba(2, 8, 23, .34);
}

body {
  background-image:
    radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--accent-blue) 14%, transparent), transparent 30%),
    radial-gradient(circle at 92% 12%, rgba(16, 185, 129, .10), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--bg-page) 96%, #020617), var(--bg-page)) !important;
  background-attachment: fixed;
}

.main-container {
  grid-template-columns: minmax(0, 1.85fr) minmax(340px, .95fr) !important;
  max-width: 1680px !important;
}

.video-container { max-height: 76vh; aspect-ratio: 16 / 9; }

.top-controls-btns { flex-wrap: wrap; }
.top-controls-btns button { min-width: 96px; }

.app-hero {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  max-width: 1500px;
  min-height: 124px;
  box-sizing: border-box;
  margin: 0 auto 14px;
  padding: 18px 92px;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, .48);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 30%, rgba(37, 99, 235, .24), transparent 38%),
    linear-gradient(120deg, #061022, #0b1933 62%, #081226);
  box-shadow: 0 16px 42px rgba(2, 8, 23, .42), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: min-height .35s ease, padding .35s ease, background-position .6s ease;
}

.app-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(56, 189, 248, .16) 48%, transparent 70%);
  transform: translateX(-35%);
  animation: hero-shimmer 10s ease-in-out infinite alternate;
  pointer-events: none;
}

.hero-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 90%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.app-hero h1 {
  margin: 0 0 7px !important;
  color: #f8fbff !important;
  font-size: clamp(1.65rem, 2.3vw, 2.25rem) !important;
  letter-spacing: .025em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .8), 0 0 26px rgba(59, 130, 246, .55);
}

.app-hero p {
  max-height: 45px;
  margin: 0 !important;
  color: rgba(241, 245, 249, .92) !important;
  font-size: .9rem !important;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .92);
  transition: opacity .25s ease, max-height .35s ease;
}

.app-hero .pro-badge {
  border-color: rgba(125, 211, 252, .8);
  color: #e0f2fe;
  background: linear-gradient(135deg, rgba(37, 99, 235, .72), rgba(14, 165, 233, .42));
  box-shadow: 0 0 20px rgba(56, 189, 248, .24);
}

body.camera-running .app-hero {
  min-height: 72px;
  padding-block: 10px;
}

body.camera-running .app-hero h1 { margin-bottom: 0 !important; font-size: 1.55rem !important; }
body.camera-running .app-hero p { max-height: 0; opacity: 0; overflow: hidden; }

.panel,
.status-bar,
.audio-health > div {
  background-image: linear-gradient(145deg, var(--panel-highlight), transparent 48%) !important;
  box-shadow: 0 7px 20px var(--panel-shadow), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

.panel {
  border-inline-start: 3px solid color-mix(in srgb, var(--accent-blue) 78%, white) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.col-settings .panel:nth-child(3n + 2) { border-inline-start-color: #10b981 !important; }
.col-settings .panel:nth-child(3n) { border-inline-start-color: #a855f7 !important; }
.panel:hover { box-shadow: 0 9px 25px var(--panel-shadow), inset 0 1px 0 rgba(255, 255, 255, .07) !important; }

.panel h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  color: color-mix(in srgb, var(--accent-blue) 78%, #e0f2fe) !important;
}

.panel h3.mms-h {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  justify-content: flex-start;
}

.panel h3.mms-h::after {
  content: '\25BE';
  margin-inline-start: auto;
  font-size: 12px;
  opacity: .72;
  transition: transform .16s ease;
}

.panel.mms-collapsed h3.mms-h::after { transform: rotate(-90deg); }
.panel.mms-collapsed h3.mms-h { margin-bottom: 0 !important; }
.panel.mms-collapsed > :not(h3) { display: none !important; }

.fullscreen-hint {
  position: absolute;
  z-index: 28;
  inset-inline-start: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  padding: 5px 10px;
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: 999px;
  background: rgba(2, 8, 23, .62);
  color: rgba(241, 245, 249, .78);
  font-size: 11px;
  font-weight: 750;
  pointer-events: none;
  backdrop-filter: blur(5px);
}

#video-box:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #020617 !important;
}

#video-box:fullscreen video,
#video-box:fullscreen canvas { width: 100%; height: 100%; }

body.camera-fullscreen {
  overflow: hidden !important;
  padding: 0 !important;
  background: #020617 !important;
}

body.camera-fullscreen > :not(.main-container):not(.spec-pop):not(.spec-btn),
body.camera-fullscreen .col-settings,
body.camera-fullscreen .status-bar,
body.camera-fullscreen #staff-container,
body.camera-fullscreen .spec-pop,
body.camera-fullscreen .spec-btn { display: none !important; }

body.camera-fullscreen .main-container,
body.camera-fullscreen .col-visual {
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.camera-fullscreen #video-box {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482000 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #020617 !important;
}

@media (max-width: 950px) {
  .main-container { grid-template-columns: 1fr !important; }
}

.panel h3::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.status-bar {
  border-color: rgba(16, 185, 129, .52) !important;
  color: #34d399 !important;
  text-shadow: 0 0 12px rgba(16, 185, 129, .3);
}

.video-container {
  border-color: color-mix(in srgb, var(--accent-blue) 68%, var(--border)) !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, .2), 0 12px 32px rgba(2, 8, 23, .56) !important;
}

#staff-container {
  border-color: color-mix(in srgb, var(--accent-blue) 42%, var(--border)) !important;
  box-shadow: 0 10px 28px rgba(2, 8, 23, .34), 0 0 24px rgba(59, 130, 246, .08) !important;
}

.harmony-progression-display {
  display: grid;
  grid-template-columns: minmax(180px, .22fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 104px;
  padding: 14px 16px;
  border: 1px solid rgba(168, 85, 247, .5);
  border-inline-start: 4px solid #a855f7;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(30, 41, 80, .94), rgba(38, 20, 71, .9));
  box-shadow: 0 10px 28px rgba(2, 8, 23, .38), inset 0 1px 0 rgba(255, 255, 255, .05);
  color: #f8fafc;
}

.harmony-progression-display[hidden] { display: none !important; }
.harmony-progression-heading { display: grid; gap: 3px; min-width: 0; }
.harmony-progression-heading span { color: #c4b5fd; font-size: .78rem; font-weight: 800; }
.harmony-progression-heading strong { overflow: hidden; color: #f5f3ff; font-size: 1.08rem; text-overflow: ellipsis; white-space: nowrap; }
.harmony-progression-chords {
  display: grid;
  grid-template-columns: repeat(8, minmax(76px, 1fr));
  align-items: stretch;
  gap: 9px;
  overflow: visible;
  padding: 4px 2px;
}
.harmony-progression-chord {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
  min-height: 58px;
  padding: 16px 10px 12px;
  border: 1px solid rgba(125, 211, 252, .44);
  border-radius: 10px;
  background: rgba(2, 12, 27, .7);
  color: #fff7d6;
  font: 900 clamp(1.05rem, 1.35vw, 1.42rem)/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: center;
}
.harmony-progression-chord::before { content: attr(data-step); position: absolute; inset-inline-start: 7px; top: 6px; color: rgba(196, 181, 253, .78); font: 800 10px/1 system-ui, sans-serif; }
.harmony-progression-chord-name { white-space: nowrap; }
.harmony-progression-degree {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  padding: 3px 7px;
  border: 1px solid rgba(251, 191, 36, .42);
  border-radius: 999px;
  background: rgba(120, 53, 15, .34);
  color: #fde68a;
  font: 900 clamp(.72rem, .9vw, .9rem)/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .02em;
}
.harmony-progression-empty { color: #94a3b8; font-size: .78rem; font-weight: 700; }
.midi-audio-settings { margin-top: 8px; }

@media (max-width: 700px) {
  .harmony-progression-display { grid-template-columns: 1fr; gap: 7px; }
  .harmony-progression-chords { grid-template-columns: repeat(4, minmax(62px, 1fr)); }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .harmony-progression-chords { grid-template-columns: repeat(4, minmax(72px, 1fr)); }
}

button,
select {
  transition: transform .14s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent-blue) 76%, white);
  box-shadow: 0 6px 16px rgba(2, 8, 23, .28);
  filter: brightness(1.08);
}

button.primary {
  background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
  box-shadow: 0 7px 18px rgba(37, 99, 235, .28);
}

button.warning-btn {
  background: rgba(127, 29, 29, .28) !important;
  color: #fecaca !important;
  border: 1px solid rgba(248, 113, 113, .42) !important;
  box-shadow: none !important;
}

.top-controls-btns #panic-btn {
  flex: 0 0 auto !important;
  min-width: 82px;
  padding: 7px 10px;
  font-size: 11px;
  opacity: .82;
}

.top-controls-btns #panic-btn:hover { opacity: 1; background: rgba(153, 27, 27, .48) !important; }

.harmony-main-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(167, 139, 250, .18);
}

.harmony-main-controls button {
  min-width: 82px;
  padding: 7px 10px;
  font-size: 11px;
}

.harmony-play-btn {
  color: #ede9fe !important;
  border-color: rgba(167, 139, 250, .55) !important;
  background: rgba(109, 40, 217, .34) !important;
}

.harmony-play-btn.is-playing {
  color: #bbf7d0 !important;
  border-color: rgba(52, 211, 153, .5) !important;
  background: rgba(5, 150, 105, .22) !important;
}

.harmony-stop-btn { color: #fecaca !important; border-color: rgba(248, 113, 113, .34) !important; }

.harmony-main-controls label {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) 36px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 11px;
}

.harmony-main-controls label { grid-column: span 1; }

.harmony-main-controls input { width: 100%; min-width: 70px; accent-color: #a855f7; }
.harmony-main-controls output { min-width: 48px; color: #f0abfc; font-weight: 800; text-align: center; }

.harmony-main-controls .harmony-key-control {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(110px, 1fr);
}

.harmony-key-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.harmony-key-picker {
  position: relative;
  width: 100%;
  min-width: 110px;
}

.harmony-key-button {
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 11px;
  border: 1px solid rgba(129, 140, 248, .55);
  border-radius: 9px;
  color: #e0e7ff;
  background: linear-gradient(135deg, #0b1326, #111d38);
  font-weight: 800;
  text-align: start;
}

.harmony-key-button:hover,
.harmony-key-button[aria-expanded='true'] {
  border-color: rgba(96, 165, 250, .78);
  background: #101b33;
}

.harmony-key-button-value { color: #f8fafc; }
.harmony-key-button-arrow { color: #7dd3fc; font-size: 14px; }

.harmony-key-menu {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 5px);
  z-index: 120;
  display: grid;
  max-height: 270px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(96, 165, 250, .62);
  border-radius: 10px;
  background: #070d1b;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .72), 0 0 0 1px rgba(15, 23, 42, .8);
}

.harmony-key-menu[hidden] { display: none; }

.harmony-key-option {
  width: 100%;
  padding: 9px 12px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: #e5e7eb !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  text-align: start;
}

.harmony-key-option:hover,
.harmony-key-option:focus-visible {
  color: #fff !important;
  background: #172554 !important;
}

.harmony-key-option[aria-selected='true'] {
  color: #e0f2fe !important;
  background: linear-gradient(90deg, #1d4ed8, #075985) !important;
  box-shadow: inset 3px 0 0 #38bdf8;
}

.harmony-main-status {
  grid-column: 1 / -1;
  overflow: hidden;
  color: #c4b5fd;
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
button.active { background: linear-gradient(135deg, #ef4444, #db2777) !important; }
select:focus-visible, button:focus-visible { outline: 2px solid rgba(56, 189, 248, .8); outline-offset: 2px; }
input[type='range'] { accent-color: var(--accent-blue); }

.right-x-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max-content;
  max-width: 88%;
  transform: translate(-50%, -50%);
  padding: 5px 9px;
  border: 1px solid rgba(52, 211, 153, .58);
  border-radius: 999px;
  color: #d1fae5;
  background: rgba(3, 20, 18, .72);
  box-shadow: 0 0 18px rgba(16, 185, 129, .2);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  backdrop-filter: blur(4px);
  z-index: 2;
}

.right-x-hint b { color: #6ee7b7; font-variant-numeric: tabular-nums; }

.left-x-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max-content;
  max-width: 88%;
  transform: translate(-50%, -50%);
  padding: 5px 9px;
  border: 1px solid rgba(251, 146, 60, .68);
  border-radius: 999px;
  color: #ffedd5;
  background: rgba(45, 16, 5, .74);
  box-shadow: 0 0 18px rgba(249, 115, 22, .2);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  backdrop-filter: blur(4px);
  z-index: 2;
}

.left-x-hint b { color: #fdba74; font-variant-numeric: tabular-nums; }

.right-pinch-status {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 34px;
  padding: 3px 7px;
  border: 1px solid rgba(52, 211, 153, .48);
  border-radius: 999px;
  color: #a7f3d0;
  background: rgba(3, 20, 18, .74);
  font-size: 9px;
  font-weight: 800;
  transition: color 80ms ease, border-color 80ms ease, background 80ms ease, box-shadow 80ms ease;
}

.right-pinch-status.muted {
  border-color: rgba(244, 63, 94, .9);
  color: #fecdd3;
  background: rgba(76, 5, 25, .86);
  box-shadow: 0 0 16px rgba(244, 63, 94, .38);
}

.pitch-rail-status {
  position: absolute;
  z-index: 2;
  right: 8px;
  top: 34px;
  padding: 3px 7px;
  border: 1px solid rgba(56, 189, 248, .34);
  border-radius: 999px;
  color: rgba(186, 230, 253, .66);
  background: rgba(3, 20, 32, .66);
  font-size: 9px;
  font-weight: 800;
  transition: all 80ms ease;
}

.pitch-rail-status.active {
  border-color: rgba(56, 189, 248, .95);
  color: #e0f2fe;
  background: rgba(7, 89, 133, .86);
  box-shadow: 0 0 18px rgba(56, 189, 248, .48);
}

.right-x-clean-zone {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 20%;
  border-inline-end: 1px dashed rgba(125, 211, 252, .72);
  border-radius: 5px 0 0 5px;
  background: linear-gradient(90deg, rgba(14, 165, 233, .2), rgba(16, 185, 129, .08));
  box-shadow: inset -8px 0 16px rgba(14, 165, 233, .06);
  transition: width 100ms ease;
}

.right-x-clean-zone em {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: max-content;
  transform: translateX(-50%);
  color: #bae6fd;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  text-shadow: 0 1px 5px #020617;
}

.zone-pitch > .zone-label { position: relative; z-index: 1; }

.motion-control-grid {
  display: grid;
  grid-template-columns: minmax(70px, auto) minmax(0, 1fr);
  gap: 7px 9px;
  align-items: center;
  margin-top: 7px;
}

.motion-control-grid > label {
  color: var(--text-muted-2);
  font-size: .73rem;
  font-weight: 800;
}

.motion-control-grid select { width: 100%; }

.cc-number-wrap {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

.cc-number-wrap input {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-main);
  background: var(--bg-page);
  font-size: 12px;
  font-weight: 800;
}

.cc-number-wrap span {
  overflow: hidden;
  color: var(--text-muted);
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.motion-meter {
  height: 7px;
  margin-top: 9px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #10b981 45%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-page) 78%, #020617);
}

.motion-meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0ea5e9, #10b981, #f59e0b);
  box-shadow: 0 0 10px rgba(16, 185, 129, .7);
  transition: width 60ms linear;
}

.left-motion-meter { border-color: color-mix(in srgb, #f97316 58%, var(--border)); }
.left-motion-meter span {
  background: linear-gradient(90deg, #fb7185, #f97316, #fbbf24);
  box-shadow: 0 0 10px rgba(249, 115, 22, .72);
}

.left-fx-control select:focus-visible,
.left-fx-control input:focus-visible { outline-color: rgba(249, 115, 22, .9); }

.motion-help {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: .66rem;
  line-height: 1.35;
}

.clean-zone-control { margin-top: 7px; }
.clean-zone-control label { width: 78px; }
.clean-zone-control output {
  min-width: 34px;
  color: #38bdf8;
  font-size: .72rem;
  font-weight: 800;
  text-align: end;
}

.pinch-noteoff-control {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: #34d399;
  font-size: .72rem;
  font-weight: 800;
}

.pinch-noteoff-control input { margin: 0; accent-color: #10b981; }

.pinch-envelope-control {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: #fbbf24;
  font-size: .72rem;
  font-weight: 800;
}

.pinch-envelope-control input { margin: 0; accent-color: #f59e0b; }
.envelope-time-control { margin-top: 4px; }
.envelope-time-control label { width: 90px; }
.envelope-time-control output {
  min-width: 52px;
  color: #fbbf24;
  font-size: .7rem;
  font-weight: 800;
  text-align: end;
}

.pitch-note-display {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 24;
  max-width: 92%;
  padding: 7px 12px;
  border: 1px solid rgba(125, 211, 252, .72);
  border-radius: 999px;
  background: rgba(2, 12, 27, .78);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28), 0 0 20px rgba(56, 189, 248, .18);
  color: #f8fafc;
  font: 800 clamp(13px, 1.7vw, 21px)/1.1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.pitch-note-display.hidden { display: none; }

.chord-name-display {
  position: absolute;
  top: calc(43% + 54px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  max-width: 90%;
  padding: 8px 16px;
  border: 1px solid rgba(251, 191, 36, .88);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(120, 53, 15, .9), rgba(30, 20, 52, .92));
  box-shadow: 0 8px 28px rgba(0, 0, 0, .32), 0 0 22px rgba(251, 191, 36, .24);
  color: #fff7d6;
  font: 900 clamp(15px, 2vw, 25px)/1.1 system-ui, sans-serif;
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.chord-name-display::before { content: "♬  "; color: #fbbf24; }
.chord-name-display.hidden { display: none; }

.finger-count-control {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: minmax(155px, .8fr) minmax(175px, 1.2fr);
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(34, 211, 238, .92);
  border-radius: 12px;
  background: linear-gradient(105deg, rgba(6, 182, 212, .22), rgba(16, 185, 129, .16));
  box-shadow: 0 0 0 2px rgba(34, 211, 238, .08), 0 8px 22px rgba(4, 47, 46, .18);
}

.finger-count-control label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-main);
  font-size: .78rem;
  font-weight: 900;
  cursor: pointer;
}

.finger-hand-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: linear-gradient(145deg, #22d3ee, #10b981);
  box-shadow: 0 5px 14px rgba(6, 182, 212, .28);
  font-size: 20px;
}

.finger-count-control select {
  width: 100%;
  min-height: 38px;
  border-color: #22d3ee !important;
  background-color: color-mix(in srgb, var(--bg-controls) 82%, #0891b2 18%) !important;
  color: var(--text-main) !important;
  font-weight: 850;
}

.finger-count-control:focus-within {
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .22), 0 10px 28px rgba(4, 47, 46, .24);
}

.harmony-main-controls input[type='range'],
.harmony-master-volume input[type='range'] {
  direction: ltr;
}

@media (max-width: 560px) {
  .finger-count-control { grid-template-columns: 1fr; }
}

.harmony-toggle-btn {
  border-color: rgba(192, 132, 252, .72) !important;
  background: linear-gradient(135deg, #7c3aed, #c026d3) !important;
  box-shadow: 0 7px 18px rgba(147, 51, 234, .28);
}

.harmony-toggle-btn.lab-loaded::after { content: " •"; color: #86efac; }

.harmony-lab-shell {
  position: fixed;
  inset: 10px;
  z-index: 10000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, .78);
  border-radius: 18px;
  background: #080811;
  box-shadow: 0 26px 90px rgba(0, 0, 0, .68), 0 0 0 9999px rgba(2, 6, 23, .72);
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
}

.harmony-lab-shell.hidden {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: scale(.985);
}

.harmony-lab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 64px;
  padding: 9px 13px;
  border-bottom: 1px solid rgba(139, 92, 246, .42);
  background: linear-gradient(110deg, #14102a, #1d1639 48%, #101827);
  color: #f8fafc;
}

.harmony-lab-header > div:first-child {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 9px;
}

.harmony-lab-header strong { font-size: 1rem; }

.harmony-lab-header small {
  grid-column: 2;
  color: #c4b5fd;
  font-size: .7rem;
}

.harmony-live-dot {
  grid-row: 1 / span 2;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 14px rgba(167, 139, 250, .9);
}

.harmony-performance-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #e9d5ff;
  font-size: .72rem;
}

.harmony-sync-toggle,
.harmony-master-volume {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid rgba(167, 139, 250, .28);
  border-radius: 10px;
  background: rgba(15, 23, 42, .72);
}

.harmony-sync-toggle input { accent-color: #8b5cf6; }
.harmony-master-volume input { width: 112px; accent-color: #a855f7; }
.harmony-master-volume output { min-width: 34px; color: #f0abfc; font-weight: 800; text-align: center; }

.harmony-sync-status {
  min-width: 138px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(16, 185, 129, .12);
  color: #86efac;
  border: 1px solid rgba(52, 211, 153, .24);
  text-align: center;
  font-weight: 750;
}

.midi-scale-status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  margin: -1px 0 10px;
  padding: 7px 10px;
  border: 1px solid rgba(56, 189, 248, .26);
  border-radius: 10px;
  background: rgba(14, 165, 233, .09);
  color: #bae6fd;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
}

.midi-scale-status.connected {
  border-color: rgba(52, 211, 153, .42);
  background: rgba(16, 185, 129, .12);
  color: #a7f3d0;
  box-shadow: inset 0 0 14px rgba(16, 185, 129, .07);
}

.midi-output-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  width: 100%;
  align-items: center;
}

.midi-output-control select { min-width: 0; width: 100%; }
.midi-output-control button { min-height: 34px; padding: 5px 10px; white-space: nowrap; }
.midi-output-control button.refreshing { color: #7dd3fc; border-color: rgba(56, 189, 248, .48); }
.midi-output-control button.repair {
  color: #fed7aa;
  border-color: rgba(251, 146, 60, .58);
  background: rgba(154, 52, 18, .25);
}

.midi-program-control {
  display: grid;
  grid-template-columns: auto 72px minmax(112px, auto);
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 30%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-controls) 88%, var(--accent-blue) 12%);
}

.midi-program-control label {
  color: var(--text-muted-2);
  font-size: 11px;
  font-weight: 800;
}

.midi-program-control input {
  width: 72px;
  min-width: 0;
  box-sizing: border-box;
  text-align: center;
}

.midi-program-control button { min-height: 30px; padding: 5px 9px; }
.midi-program-control span {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1;
  text-align: center;
}
.midi-program-control.sent span { color: #6ee7b7; }

@media (max-width: 520px) {
  .midi-program-control { grid-template-columns: auto 62px 1fr; width: 100%; }
  .midi-program-control input { width: 62px; }
}

.harmony-lab-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.harmony-lab-actions button { min-width: max-content; }
.harmony-lab-shell iframe { width: 100%; height: 100%; border: 0; background: #080811; }
body.harmony-lab-open { overflow: hidden; }

@media (max-width: 720px) {
  .harmony-lab-shell { inset: 4px; border-radius: 12px; }
  .harmony-lab-header { align-items: stretch; flex-direction: column; }
  .harmony-performance-controls { justify-content: stretch; }
  .harmony-sync-toggle, .harmony-master-volume, .harmony-sync-status { flex: 1 1 100%; justify-content: center; }
  .harmony-master-volume input { flex: 1; max-width: 220px; }
  .harmony-lab-actions button { flex: 1; }
  .harmony-main-controls { grid-template-columns: 1fr 1fr; }
  .harmony-main-controls label, .harmony-main-status { grid-column: 1 / -1; }
}

.pitch-visual-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 1fr);
  gap: 8px;
  align-items: center;
  margin: 6px 0;
}

.pitch-visual-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-blue);
  font-size: 12px;
  font-weight: 750;
}

.slider-group output {
  min-width: 50px;
  color: var(--accent-amber);
  font: 750 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: end;
}

@media (max-width: 520px) {
  .pitch-visual-controls { grid-template-columns: 1fr; }
}

.pinch-envelope-readout {
  margin-top: 5px;
  padding: 4px 7px;
  border: 1px solid rgba(245, 158, 11, .32);
  border-radius: 6px;
  color: #fde68a;
  background: rgba(120, 53, 15, .14);
  font: 800 .69rem/1.2 monospace;
  text-align: center;
}

.pitch-rail-control {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: #38bdf8;
  font-size: .72rem;
  font-weight: 800;
}

.pitch-rail-control input { margin: 0; accent-color: #0ea5e9; }
.rail-tolerance-control { margin-top: 5px; }
.rail-tolerance-control label { width: 92px; }
.rail-tolerance-control output {
  min-width: 34px;
  color: #38bdf8;
  font-size: .72rem;
  font-weight: 800;
  text-align: end;
}

.camera-health.live {
  background: rgba(16, 185, 129, .09);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .18);
}

@keyframes hero-shimmer {
  to { transform: translateX(35%); }
}

@media (max-width: 950px) {
  .app-hero { min-height: 104px; padding-inline: 58px; }
}

@media (max-width: 620px) {
  .app-hero { min-height: 92px; padding: 14px 46px; border-radius: 14px; }
  .app-hero p { font-size: .76rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .app-hero::before { animation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}