/* Model J — slate-blue panel, grey knobs, white sliders, red LEDs and an
   orange stripe (JP-8000 spirit). */

.mj {
  --ink: #e8edf3;
  --ink-dim: #93a0ae;
  --line: rgba(232, 237, 243, 0.45);
  --accent: #ff6a2a;
  width: max-content;
  padding: 10px 12px 0;
  border-radius: 8px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #3a4350 0%, #2c333d 40%, #252b33 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.2),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35),
    0 26px 34px rgba(0, 0, 0, 0.55),
    0 5px 10px rgba(0, 0, 0, 0.45);
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.mj-top { display: flex; gap: 10px; }
.mj-sound { display: flex; flex-direction: column; }
.mj .syn-part { display: flex; flex-direction: column; gap: 8px; }
.mj-line { display: flex; gap: 8px; }
.mj-line > .mj-sec { flex: 1 1 auto; }
.mj-line .mj-body { justify-content: space-evenly; }
/* The shared sections beside the two lines: KEY MODE · VOICE by the upper one, EFFECTS and
   MASTER by the lower one (not a tall column that leaves the lines' bottom empty). */
.mj-global {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "keys keys" "fx master";
  gap: 8px;
}
.mj-global > [aria-label="KEY MODE · VOICE"] { grid-area: keys; }
.mj-global > [aria-label="EFFECTS"] { grid-area: fx; }
.mj-global > [aria-label="MASTER"] { grid-area: master; }
.mj-global .mj-body { justify-content: space-evenly; }

.mj-sec {
  display: flex;
  flex-direction: column;
  padding: 0 7px 7px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.06);
}
.mj-title {
  margin: 0 -7px 6px;
  padding: 4px 8px;
  border-radius: 5px 5px 0 0;
  border-bottom: 2px solid var(--accent);
  background: rgba(255, 255, 255, 0.06);
  font: 800 8.5px/1 var(--font);
  letter-spacing: 0.22em;
  white-space: nowrap;
}
.mj-body { display: flex; align-items: flex-end; gap: 3px; flex: 1; }
.mj-col { display: flex; flex-direction: column; gap: 3px; }
.mj-choices { display: flex; gap: 0; }
.mj-waves { display: grid; grid-template-columns: repeat(2, auto); gap: 0 2px; }
.mj-penv { display: flex; align-items: flex-end; gap: 2px; padding-left: 6px; border-left: 1px dashed var(--line); }
.mj-faders { display: flex; gap: 2px; padding: 0 4px; }
.mj-fx { display: grid; grid-template-columns: repeat(4, auto); gap: 2px; }
.mj-osc1 .mj-body { position: relative; padding-bottom: 14px; }
.mj-ctrl-help {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  overflow: hidden;
  font: 600 7.5px/12px var(--font);
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink-dim);
}

.mj ws-knob.size-s { --k: 48px; width: 56px; }
.mj ws-knob.size-m { --k: 62px; width: 70px; }
.mj ws-knob.size-xs { --k: 38px; width: 48px; }
.mj ws-knob .knob-body .skirt { fill: url(#ws-knob-skirt-grey); }
.mj ws-knob .knob-body .cap { fill: url(#ws-knob-cap-grey); }
.mj ws-knob .knob-body .pointer { stroke: #1b1f24; }
.mj ws-led-button { --led: #ff3b1f; --btn: #20252c; --btn-hi: #424a55; width: 44px; }
.mj ws-led-button .ctl-label { min-height: 12px; font-size: 7px; }
.mj-waves ws-led-button .ctl-label { min-height: 10px; }
.mj ws-fader .fader { height: 92px; }
.mj ws-fader { width: 26px; }
.mj .power { margin-left: 4px; }

.mj .syn-part[data-part="b"] { position: relative; }
.mj .syn-part[data-part="b"]::before {
  content: "SOUND B";
  position: absolute;
  top: -8px;
  right: 6px;
  z-index: 1;
  padding: 1px 6px;
  border-radius: 2px;
  background: #e8c85a;
  color: #111;
  font: 800 7.5px var(--font);
  letter-spacing: 0.18em;
}

/* --------------------------------------------------------------- strip */

/* At the top (the jacks on the upper edge, so cables don't cross the panel). */
.mj-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: -10px -12px 10px;
  padding: 10px 16px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #1f242b, #171b20);
  border-bottom: 1px solid #485260;
}
.mj-logo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 230px; }
.mj-wordmark { font: 700 22px/1 var(--logo-font); color: #dfe5ec; }
.mj-model { font: 900 italic 21px/1 var(--font); letter-spacing: 0.06em; color: var(--accent); }
.mj-sub { flex-basis: 100%; font: 700 7px var(--font); letter-spacing: 0.26em; color: #8b97a4; }
.mj .preset-bar { margin-left: auto; }
.mj .vfd { width: 280px; }
.mj .scope-wrap { width: 180px; }

/* -------------------------------------------------------------- keybed */

.mj-keybed {
  display: flex;
  gap: 14px;
  margin: 0 -12px;
  padding: 12px 14px 0;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #0a0c0e, #15181c 30%, #101215);
  box-shadow: inset 0 8px 14px rgba(0, 0, 0, 0.9);
}
.mj-left {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-content: end;
  align-items: end;
  justify-content: center;
  justify-items: center;
  gap: 8px 16px;
  width: 150px;
  flex: none;
  padding-bottom: 12px;
}
/* BEND above the pitch wheel, HOLD above the mod wheel. */
.mj-left .wheels { display: contents; }
.mj ws-keyboard { height: 170px; border-top-color: #5a2f1a; }