/* Model C — black case, membrane buttons, orange accents and colour-coded
   envelope graphs: DCO blue, DCW amber, DCA green (CZ-5000 spirit). */

.mc {
  --ink: #e9e9e6;
  --ink-dim: #8f9194;
  --line: rgba(233, 233, 230, 0.4);
  --accent: #f08a24;
  width: max-content;
  padding: 10px 14px 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.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #232426, #161718);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.14),
    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;
}

/* ------------------------------------------------------------ head */

.mc-head { display: flex; align-items: center; gap: 18px; padding-bottom: 10px; border-bottom: 1px solid #2f3033; }
.mc-brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 250px; }
.mc-wordmark { font: 700 22px/1 var(--logo-font); color: #e3e3e0; }
.mc-model { font: 800 21px/1 var(--font); letter-spacing: 0.12em; color: var(--accent); }
.mc-sub-logo { flex-basis: 100%; font: 700 7px var(--font); letter-spacing: 0.26em; color: #8a8c8f; }
.mc .preset-bar { margin-left: auto; }
.mc .vfd { width: 280px; }
.mc .scope-wrap { width: 180px; }
.mc-out { display: flex; align-items: flex-end; gap: 4px; }

/* ------------------------------------------------------------ global row */

.mc-global { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; border-bottom: 1px solid #2f3033; }
.mc-group {
  display: flex;
  flex-direction: column;
  padding: 0 6px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.035);
}
.mc-title {
  margin: 0 -6px 4px;
  padding: 4px 8px;
  border-bottom: 2px solid var(--accent);
  font: 800 8.5px/1 var(--font);
  letter-spacing: 0.2em;
  white-space: nowrap;
}
.mc-body { display: flex; align-items: flex-end; gap: 2px; flex: 1; }
.mc-choices { display: flex; }
.mc-row { display: flex; align-items: flex-end; gap: 2px; }

/* ------------------------------------------------------------ lines */

.mc-lines { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; }
.mc-line { display: flex; align-items: stretch; gap: 10px; }
.mc-line.unused > :not(.mc-line-head) { opacity: 0.4; transition: opacity 0.15s; }
.mc-line.unused .mc-line-head { background: #5a4a3a; }
.mc-line-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 34px;
  border-radius: 4px;
  background: var(--accent);
  color: #1a1a1a;
}
.mc-line-num { font: 900 24px/1 var(--font); }
.mc-line-name { font: 800 7px var(--font); letter-spacing: 0.2em; }
.mc-line-osc { display: flex; flex-direction: column; gap: 2px; width: 196px; }
.mc-sub { font: 700 7px var(--font); letter-spacing: 0.2em; color: var(--ink-dim); }
.mc-waves { display: grid; grid-template-columns: repeat(4, 1fr); }
.mc-env { width: 300px; align-self: flex-end; }
.mc-dco { --se-line: #6fb7ff; --se-fill: rgba(111, 183, 255, 0.14); }
.mc-dcw { --se-line: #ffb347; --se-fill: rgba(255, 179, 71, 0.14); }
.mc-dca { --se-line: #7dff9a; --se-fill: rgba(125, 255, 154, 0.12); }

.mc ws-knob.size-s { --k: 46px; width: 54px; }
.mc ws-knob.size-m { --k: 60px; width: 68px; }
.mc ws-led-button { --led: #ff6a1f; --btn: #9a9c9f; --btn-hi: #d6d7d8; width: 46px; }
.mc ws-led-button .ctl-label { min-height: 12px; font-size: 7px; }
.mc .power { margin-left: 4px; }

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

.mc-strip { display: flex; align-items: center; gap: 16px; padding: 8px 0 10px; border-top: 1px solid #2f3033; }
.mc-actions { display: flex; align-items: center; gap: 12px; }
.mc-btn {
  height: 26px;
  padding: 0 12px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #d6d7d8, #9a9c9f);
  box-shadow: 0 2px 0 #050505, inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #1b1b1b;
  font: 800 8.5px var(--font);
  letter-spacing: 0.14em;
  cursor: pointer;
}
.mc-btn:active { transform: translateY(1px); }
.mc-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mc-hint { font: 600 8.5px var(--font); color: var(--ink-dim); }
.mc-head .syn-jacks { margin-left: 6px; } /* in the top row, after the output knobs */

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

.mc-keybed {
  display: flex;
  gap: 14px;
  margin: 0 -14px;
  padding: 12px 14px 0;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #050505, #111 30%, #0c0c0c);
  box-shadow: inset 0 8px 14px rgba(0, 0, 0, 0.9);
}
.mc-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 150px;
  flex: none;
  padding-bottom: 12px;
}
.mc-levers { display: flex; align-items: flex-end; gap: 6px; }
.mc ws-keyboard { height: 170px; border-top-color: #6a3a14; }