/* Model F — dark DX-style case, a yellow-green LCD, teal and maroon membrane
   buttons. Carriers are teal, modulators maroon, everywhere. */

.mf {
  --ink: #ece6d8;
  --ink-dim: #9d968a;
  --line: rgba(236, 230, 216, 0.5);
  --teal: #3a8783;
  --teal-hi: #66bdb6;
  --maroon: #8a2c3a;
  --maroon-hi: #cf5568;
  --amber: #e3b35c;
  --lcd-ink: #23310d;
  --well: rgba(0, 0, 0, 0.38);

  width: max-content;
  padding: 0 16px 16px;
  border-radius: 10px;
  border: 1px solid #0b0a0a;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' 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, #403b37 0%, #322e2b 45%, #282523 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35),
    0 26px 34px rgba(0, 0, 0, 0.55),
    0 5px 9px rgba(0, 0, 0, 0.45);
  color: var(--ink);
}

/* ------------------------------------------------------------ jacks, head */

.mf-io {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 -16px 12px;
  padding: 7px 16px 5px;
  border-radius: 10px 10px 0 0;
  background: rgba(0, 0, 0, 0.38);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 1px 0 rgba(0, 0, 0, 0.5);
}
.mf-io-note {
  margin-left: auto;
  font: 700 7.5px var(--font);
  letter-spacing: 0.26em;
  color: var(--ink-dim);
}

.mf-head { display: flex; align-items: center; gap: 22px; }
.mf-brand { display: flex; flex-direction: column; gap: 3px; min-width: 176px; }
.mf-logo {
  font: italic 800 31px/1 var(--logo-font);
  letter-spacing: 0.03em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.mf-sub { font: 700 7.5px var(--font); letter-spacing: 0.27em; color: var(--maroon-hi); }
.mf-wordmark { font: 700 12px/1 var(--logo-font); color: var(--ink-dim); }

/* The DX7's LCD: dark letters on yellow-green. */
.mf .preset-bar { margin-left: auto; }
.mf .vfd,
.mf .scope-wrap {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #c9d872 0%, #b1c552 100%);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 0 2px #141211, 0 0 0 3px #5d5852, 0 1px 0 3px #77716a;
}
.mf .vfd { width: 290px; color: var(--lcd-ink); text-shadow: none; }
.mf .vfd-edited { border-color: var(--lcd-ink); box-shadow: none; }
.mf .scope { --scope-trace: #23310d; --scope-grid: rgba(35, 49, 13, 0.12); }
.mf .scope-hint { color: var(--lcd-ink); text-shadow: none; opacity: 0.7; }
.mf .monitor { width: 214px; }
.mf .voice-leds { padding: 0; }
.mf .voice-leds .led { width: 8px; height: 8px; }

.mf-out { display: flex; align-items: center; gap: 4px; }
.mf-power { display: flex; align-items: center; gap: 10px; margin-left: 4px; }

/* ------------------------------------------------- tabs and action buttons */

.mf-bar { display: flex; align-items: center; gap: 16px; margin: 12px 0 8px; }
.mf-tabs, .mf-actions { display: flex; gap: 6px; }
.mf-actions { margin-left: auto; }

.mf-tab,
.mf-btn {
  position: relative;
  height: 30px;
  padding: 0 16px;
  border: 0;
  border-radius: 3px;
  color: #f4f0e6;
  font: 700 9.5px var(--font);
  letter-spacing: 0.16em;
  cursor: pointer;
}
.mf-tab {
  padding-left: 26px;
  background: linear-gradient(180deg, #3f7f7b, #2c625f);
  box-shadow: 0 2px 0 #0f2423, 0 3px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.mf-tab::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #3a1309;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}
.mf-tab.active { background: linear-gradient(180deg, #4d9994, #377571); }
.mf-tab.active::before { background: #ff4a2a; box-shadow: 0 0 6px 1px rgba(255, 74, 42, 0.8); }
.mf-btn {
  background: linear-gradient(180deg, #8e3242, #6c2230);
  box-shadow: 0 2px 0 #2a0b11, 0 3px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.mf-tab:active, .mf-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.mf-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.mf-tab:focus-visible, .mf-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------------------------------- pages */

/* One size for every page (the OPERATORS page is the widest), so switching
   pages never moves the jacks and their cables. */
.mf-pages {
  position: relative;
  width: 1434px;
  height: 330px;
  padding: 10px;
  border-radius: 6px;
  background: linear-gradient(180deg, #1c1a19, #151413);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.08);
}
.mf-page { display: flex; gap: 10px; height: 100%; }
.mf-page[hidden] { display: none; }

.mf-card {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.035);
}
.mf-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--maroon);
  font: 800 9px/1 var(--font);
  letter-spacing: 0.22em;
  white-space: nowrap;
  color: var(--ink);
}
.mf-title b { color: var(--teal-hi); }
.mf-title .mf-pill { margin-left: auto; }
.mf-note { margin: 8px 0 0; font: 500 9.5px/1.4 var(--font); color: var(--ink-dim); }
.mf-row { display: flex; align-items: flex-end; gap: 8px; }
.mf-mini-label { width: 100%; font: 700 6.5px var(--font); letter-spacing: 0.14em; color: var(--ink-dim); }

.mf-pill {
  height: 18px;
  padding: 0 7px;
  border: 1px solid rgba(236, 230, 216, 0.3);
  border-radius: 9px;
  background: transparent;
  color: var(--ink-dim);
  font: 700 7.5px var(--font);
  letter-spacing: 0.12em;
  cursor: pointer;
}
.mf-pill:hover { color: var(--ink); border-color: var(--ink); }
.mf-pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #1d1b1a; }
.mf-pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.mf-step {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #4b4743, #2e2b29);
  box-shadow: 0 1px 0 #000, inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--ink);
  font: 700 10px/1 var(--font);
  cursor: pointer;
}
.mf-step:active { transform: translateY(1px); }
.mf-step:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ------------------------------------------------------- algorithm diagrams */

.mf-algo { display: block; width: 100%; height: 100%; }
.mf-algo .wire { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; opacity: 0.7; }
.mf-algo .wire.fb { stroke: var(--amber); opacity: 0.95; }
.mf-algo .op rect { fill: var(--maroon); stroke: rgba(0, 0, 0, 0.65); stroke-width: 1; }
.mf-algo .op.carrier rect { fill: var(--teal); }
.mf-algo .op text {
  fill: #fff;
  font: 700 10px var(--font);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.mf-algo .op.dim { opacity: 0.35; }
.mf-algo .op.hl rect { stroke: #fff; stroke-width: 1.8; }
.js-algo .op { cursor: pointer; }
.js-algo .op:hover rect { stroke: #fff; }

.mf-algo-box {
  display: block;
  width: 100%;
  height: 168px;
  padding: 8px;
  border: 0;
  border-radius: 4px;
  background: var(--well);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}
button.mf-algo-box { cursor: pointer; }
button.mf-algo-box:focus-visible { outline: 2px solid var(--focus); }

.mf-algo-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mf-algo-name { font: 800 9px var(--font); letter-spacing: 0.2em; }
.mf-algo-name b { font: 700 15px var(--mono); color: var(--teal-hi); margin-left: 4px; }

.mf-algo-picker {
  position: absolute;
  inset: 6px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 5px;
  background: rgba(24, 22, 21, 0.97);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
}
.mf-algo-picker[hidden] { display: none; }
.mf-picker-head { display: flex; align-items: center; justify-content: space-between; font: 800 9px var(--font); letter-spacing: 0.22em; }
.mf-picker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; flex: 1; }
.mf-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  cursor: pointer;
}
.mf-pick svg { height: 50px; }
.mf-pick span { font: 700 9px var(--font); }
.mf-pick:hover { background: rgba(255, 255, 255, 0.12); }
.mf-pick.selected { box-shadow: inset 0 0 0 2px var(--teal-hi); }
.mf-pick:focus-visible { outline: 2px solid var(--focus); }

/* ------------------------------------------------------------------- QUICK */

.mf-quick-algo { width: 220px; }
.mf-macros { width: 470px; }
.mf-macro-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 10px; }
.mf-macro { display: flex; flex-direction: column; align-items: center; }
.mf-macro-ends {
  display: flex;
  justify-content: space-between;
  width: 80px;
  margin-top: -1px;
  font: 700 6.5px var(--font);
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}

.mf-overview { flex: 1; }
.mf-ov-list { display: flex; flex-direction: column; gap: 4px; }
.mf-ov {
  display: grid;
  grid-template-columns: 20px 74px 1fr 76px;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 8px 0 4px;
  border: 0;
  border-radius: 3px;
  background: var(--well);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.mf-ov:hover { background: rgba(0, 0, 0, 0.55); }
.mf-ov:focus-visible { outline: 2px solid var(--focus); }
.mf-ov.off { opacity: 0.4; }
.mf-ov-num {
  display: grid;
  place-items: center;
  height: 18px;
  border-radius: 2px;
  background: var(--maroon);
  font: 800 10px var(--font);
}
.mf-ov.carrier .mf-ov-num { background: var(--teal); }
.mf-ov-ratio { font: 700 11px var(--mono); }
.mf-ov-bar { height: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.55); overflow: hidden; }
.mf-ov-bar span { display: block; height: 100%; background: var(--maroon-hi); }
.mf-ov.carrier .mf-ov-bar span { background: var(--teal-hi); }
.mf-ov-role { font: 700 7.5px var(--font); letter-spacing: 0.12em; color: var(--ink-dim); text-align: right; }

/* --------------------------------------------------------------- OPERATORS */

.mf-ops-algo { width: 200px; }
.mf-ops-algo .mf-algo-box { height: 150px; }
.mf-ops-algo > .mf-pill { align-self: center; margin-top: 6px; }
.mf-ops-fb { display: flex; align-items: center; gap: 6px; margin-top: auto; }
.mf-ops-fb .mf-note { margin: 0; font-size: 8.5px; }

.mf-op-grid { display: grid; grid-template-columns: repeat(3, 396px); grid-template-rows: repeat(2, 1fr); gap: 8px; }
.mf-op {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 5px 8px 6px;
  border-left: 3px solid var(--maroon);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
}
.mf-op.carrier { border-left-color: var(--teal); }
.mf-op.off .mf-op-body { opacity: 0.35; }
.mf-op.flash { animation: mf-flash 1.1s ease-out; }
@keyframes mf-flash {
  0% { background: rgba(255, 255, 255, 0.22); }
  100% { background: rgba(255, 255, 255, 0.04); }
}

.mf-op-head { display: flex; align-items: center; gap: 6px; height: 24px; }
.mf-op-on {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 7px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #4b4743, #2e2b29);
  box-shadow: 0 1px 0 #000, inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--ink);
  cursor: pointer;
}
.mf-op-num { font: 800 12px/1 var(--font); }
.mf-op-led { width: 6px; height: 6px; border-radius: 50%; background: #3a1309; }
.mf-op-on[aria-pressed="true"] .mf-op-led { background: #ff4a2a; box-shadow: 0 0 5px 1px rgba(255, 74, 42, 0.8); }
.mf-op-on:focus-visible { outline: 2px solid var(--focus); }
.mf-role {
  padding: 3px 5px;
  border-radius: 2px;
  background: var(--maroon);
  color: #fff;
  font: 700 7.5px/1 var(--font);
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.mf-op.carrier .mf-role { background: var(--teal); }

.mf-freq { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.mf-freq-read { display: flex; flex-direction: column; align-items: center; min-width: 76px; line-height: 1; }
.mf-freq-read b { font: 700 12px var(--mono); }
.mf-freq-read small { margin-top: 2px; font: 600 6.5px var(--font); letter-spacing: 0.08em; color: var(--ink-dim); text-transform: uppercase; }

.mf-op-body { display: flex; align-items: center; gap: 4px; flex: 1; min-height: 0; margin-top: 2px; }
.mf-op-back { display: none; }
.mf-op.back .mf-op-back { display: flex; }
.mf-op.back .mf-op-front { display: none; }
.mf-op-knobs { display: flex; }
.mf-op ws-knob.size-xs { width: 52px; }
.mf-op .ctl-label { font-size: 7.5px; min-height: 14px; }

ws-fm-env {
  position: relative;
  display: block;
  flex: 1;
  aspect-ratio: 2;
  border-radius: 3px;
  background: var(--well);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
.mf-env-svg { display: block; width: 100%; height: 100%; overflow: visible; touch-action: none; cursor: crosshair; }
.mf-env-svg .base { stroke: rgba(236, 230, 216, 0.25); stroke-width: 1; }
.mf-env-svg .area { fill: rgba(207, 85, 104, 0.18); }
.mf-op.carrier .mf-env-svg .area { fill: rgba(102, 189, 182, 0.2); }
.mf-env-svg .curve { fill: none; stroke: var(--maroon-hi); stroke-width: 2; stroke-linejoin: round; }
.mf-op.carrier .mf-env-svg .curve { stroke: var(--teal-hi); }
ws-fm-env.pitch .area { fill: rgba(227, 179, 92, 0.16); }
ws-fm-env.pitch .curve { stroke: var(--amber); }
.mf-env-svg .key-off { stroke: rgba(236, 230, 216, 0.3); stroke-width: 1; stroke-dasharray: 3 3; }
.mf-env-svg .corner { outline: none; cursor: grab; }
.mf-env-svg .hit { fill: transparent; }
.mf-env-svg .dot { fill: var(--ink); stroke: #000; stroke-width: 1; }
.mf-env-svg .corner.active .dot,
.mf-env-svg .corner:focus-visible .dot { fill: #fff; stroke: var(--focus); stroke-width: 2; }
ws-fm-env.dragging .mf-env-svg,
ws-fm-env.dragging .corner { cursor: grabbing; }
.mf-env-readout {
  position: absolute;
  left: 5px;
  top: 3px;
  font: 600 7.5px var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink);
  pointer-events: none;
}

/* Keyboard scaling (the back of a card). */
.mf-scale { display: flex; flex-direction: column; gap: 4px; width: 132px; flex: none; }
.mf-scale-svg { display: block; width: 132px; height: 52px; border-radius: 3px; background: var(--well); }
.mf-scale-svg .zero { stroke: rgba(236, 230, 216, 0.25); stroke-width: 0.8; }
.mf-scale-svg .bp { stroke: var(--amber); stroke-width: 0.8; stroke-dasharray: 2 2; }
.mf-scale-svg .curve { fill: none; stroke: var(--maroon-hi); stroke-width: 1.6; }
.mf-op.carrier .mf-scale-svg .curve { stroke: var(--teal-hi); }
.mf-scale-svg .bp-label { fill: var(--amber); font: 700 7px var(--font); text-anchor: middle; }
.mf-curve-row { display: flex; gap: 6px; }
.mf-curves { display: flex; flex-wrap: wrap; gap: 2px; width: 63px; }
.mf-curve {
  width: 14px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--well);
  cursor: pointer;
}
.mf-curve svg { display: block; width: 100%; height: 100%; }
.mf-curve svg.mirror { transform: scaleX(-1); }
.mf-curve path { fill: none; stroke: var(--ink-dim); stroke-width: 1.6; }
.mf-curve[aria-pressed="true"] { background: var(--ink); }
.mf-curve[aria-pressed="true"] path { stroke: #1d1b1a; }
.mf-curve:focus-visible { outline: 2px solid var(--focus); }

/* ------------------------------------------------------------------- VOICE */

.mf-peg { width: 360px; }
.mf-lfo { width: 340px; }
.mf-lfo .mf-row + .mf-row { margin-top: 6px; }
.mf-voice { flex: 1; }
.mf-voice .mf-row + .mf-row { margin-top: 10px; align-items: center; }
.mf-voice .mf-note { margin: 0; }

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

.mf-keybed {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  padding: 12px 10px 0;
  border-radius: 6px;
  background: linear-gradient(180deg, #100f0e, #1b1918 30%, #161514);
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.85);
}
.mf-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 12px;
}
.mf-wheels { display: flex; gap: 14px; }
.mf ws-keyboard { height: 168px; }
.mf ws-wheel .wheel-slot { height: 96px; }