:root {
  color-scheme: light;
  --page:#eee9dc;
  --surface:#fffdf7;
  --surface-2:#e3ddcf;
  --surface-3:#d7d0c1;
  --ink:#0b0b0b;
  --muted:#6a675f;
  --hair:rgba(11,11,11,.16);
  --purple:#7657ff;
  --cyan:#42d8df;
  --lime:#b9ff45;
  --orange:#ff6638;
  --red:#ed4058;
  --blue:#4ca5ff;
  --yellow:#ffdb57;
  --mode:#42d8df;
  --shadow-lg:7px 7px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --mode-size:66px;
  --utility-size:56px;
  --dense-size:44px;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --page:#0d0f12;
  --surface:#171a1f;
  --surface-2:#22262d;
  --surface-3:#2c3139;
  --ink:#f2eee4;
  --muted:#aaa69d;
  --hair:rgba(242,238,228,.18);
  --shadow-lg:7px 7px 0 #000;
  --shadow-sm:4px 4px 0 #000;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body.mmf-main-page button,
body.mmf-main-page a.mode-button,
body.mmf-main-page .segmented label{
  border-radius:0!important;
  background-image:none!important;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--ink);
  background:
    linear-gradient(var(--hair) 1px,transparent 1px),
    linear-gradient(90deg,var(--hair) 1px,transparent 1px),
    var(--page);
  background-size:36px 36px;
  font:15px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
button,select,input{font:inherit}
button,a,summary{-webkit-tap-highlight-color:transparent}
svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid var(--cyan);
  outline-offset:3px;
}
.app{
  width:min(1160px,calc(100% - 24px));
  margin:0 auto;
  padding:10px 0 70px;
}
#header{
  min-height:64px;
  display:grid;
  grid-template-columns:minmax(140px,1fr) auto minmax(140px,1fr);
  align-items:center;
  gap:10px;
}
.header-side{display:flex;align-items:center;gap:7px}
.header-side.end{justify-content:flex-end}
#title{
  margin:0;
  text-align:center;
  font-size:clamp(29px,5vw,51px);
  line-height:.94;
  letter-spacing:-.068em;
  font-weight:950;
}
#title .midi{color:var(--purple)}
#title .face{
  text-decoration:underline;
  text-decoration-color:var(--lime);
  text-decoration-thickness:.16em;
  text-underline-offset:-.04em;
}
.btn,.icon-btn,.mode-button,.utility-button,.seg,.small-btn,.wizard-btn{
  border:2px solid var(--ink);
  border-radius:0;
  color:var(--ink);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:transform .08s linear,box-shadow .08s linear,background .14s linear,color .14s linear;
}
.btn:hover,.icon-btn:hover,.mode-button:hover,.utility-button:hover,.seg:hover,.small-btn:hover,.wizard-btn:hover{
  transform:translate(-1px,-1px)
}
.btn:active,.icon-btn:active,.mode-button:active,.utility-button:active,.seg:active,.small-btn:active,.wizard-btn:active{
  transform:translate(3px,3px);
  box-shadow:1px 1px 0 var(--ink)
}
.icon-btn{
  width:44px;height:44px;min-width:44px;
  display:grid;place-items:center;padding:0
}
.icon-btn svg{width:21px;height:21px}
.lang{
  min-width:42px;height:40px;padding:0 8px;
  font:850 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace
}
.lang[aria-pressed=true]{background:var(--ink);color:var(--page)}
.panel{
  border:3px solid var(--ink);
  background:var(--surface);
  box-shadow:var(--shadow-lg)
}
.panel-tab{
  height:10px;
  background:var(--mode);
  border-bottom:3px solid var(--ink);
  transition:background .18s ease
}
.panel-body{padding:16px}
#videoContainer{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
    radial-gradient(circle at 50% 48%,#222832,#080a0d 68%);
  background-size:48px 48px,48px 48px,auto;
  border:3px solid var(--ink);
  box-shadow:var(--shadow-lg)
}
#videoContainer::after{
  content:"";
  position:absolute;inset:0;z-index:5;pointer-events:none;
  opacity:.09;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.18) 0 1px,transparent 1px 5px)
}
#videoContainer > video,
#videoContainer > canvas.mmf-landmark-canvas{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover
}
#videoContainer > canvas.mmf-landmark-canvas{z-index:3}
.camera-status{
  position:absolute;z-index:8;left:10px;top:10px;
  min-height:30px;display:inline-flex;align-items:center;gap:7px;
  padding:0 9px;background:#0b0b0b;color:#fffdf7;
  font:750 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase
}
.camera-status .dot{
  width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)
}
.camera-tools{
  position:absolute;z-index:8;right:14px;top:16px;display:flex;gap:7px
}
.camera-tools .icon-btn{
  color:#fffdf7;background:rgba(11,11,11,.82);border-color:#fffdf7;
  box-shadow:3px 3px 0 rgba(255,255,255,.22)
}
.camera-readout{
  position:absolute;z-index:8;left:0;bottom:0;
  display:grid;grid-template-columns:repeat(3,auto);gap:1px;background:#0b0b0b
}
.camera-readout span{
  min-width:88px;padding:7px 9px;color:#0b0b0b;background:#fffdf7;
  font:750 10px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace
}
.face-loading-overlay{
  position:absolute;inset:0;z-index:20;display:grid;place-items:center;
  background:rgba(7,9,12,.84);backdrop-filter:blur(3px)
}
.face-loading-card{
  width:min(86%,420px);padding:22px;text-align:center;color:#fffdf7;
  background:#11151b;border:2px solid #fffdf7;box-shadow:7px 7px 0 var(--mode)
}
.face-loading-spinner{
  width:42px;height:42px;margin:0 auto 13px;border-radius:50%;
  border:3px solid rgba(255,255,255,.18);border-top-color:var(--mode);
  animation:spin .9s linear infinite
}
.face-loading-title{font-weight:900;font-size:18px}
.face-loading-subtitle{margin-top:7px;color:#b9b8b2;font-size:12px}
@keyframes spin{to{transform:rotate(360deg)}}
.tonality-strip{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin-top:12px;padding:10px;background:var(--lime);
  border:2px solid #0b0b0b;box-shadow:4px 4px 0 #0b0b0b
}
.field{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px
}
.field label,.label{
  color:inherit;font:800 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase
}
select,input[type=number],input[type=text]{
  width:100%;min-height:40px;padding:0 9px;
  color:#0b0b0b;background:#fffdf7;border:2px solid #0b0b0b;border-radius:0;font-weight:750
}
input[type=range]{width:100%;accent-color:var(--purple)}
.mode-shell{
  margin-top:20px;
  overflow:hidden;
}
.mode-shell-body{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,3fr) 2px minmax(0,2fr);
  gap:16px;
  align-items:stretch;
  padding:16px;
}
.mode-divider{
  align-self:stretch;
  background:var(--ink);
  opacity:.22;
}
.mode-controls{min-width:0}
.mode-cluster{
  --cluster-accent:var(--mode);
  position:relative;
  display:grid;
  align-items:start;
  justify-items:center;
  gap:12px;
  min-width:0;
  padding:31px 12px 12px;
  isolation:isolate;
  overflow:hidden;
  border:2px solid color-mix(in srgb,var(--ink) 54%,transparent);
  background:color-mix(in srgb,var(--cluster-accent) 6%,var(--surface));
}
.mode-cluster.instrument-cluster{
  --cluster-accent:var(--mode);
  grid-template-columns:repeat(3,minmax(80px,1fr));
}
.mode-cluster.network-cluster{
  --cluster-accent:var(--blue);
  grid-template-columns:repeat(2,minmax(90px,1fr));
}
.mode-cluster::before{
  content:attr(data-cluster-label);
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  min-height:21px;
  display:flex;
  align-items:center;
  padding:0 8px;
  color:var(--page);
  background:var(--ink);
  font:850 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.signal-rail{
  position:absolute;
  z-index:0;
  top:10px;
  left:104px;
  right:12px;
  height:1px;
  overflow:hidden;
  pointer-events:none;
  background:color-mix(in srgb,var(--cluster-accent) 52%,transparent);
}
.signal-pulse{
  position:absolute;
  top:-3px;
  left:0;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--cluster-accent);
  box-shadow:0 0 8px color-mix(in srgb,var(--cluster-accent) 58%,transparent);
  animation:railTravel 7.2s ease-in-out infinite;
}
.instrument-cluster .signal-pulse{opacity:.5}
.network-cluster .signal-pulse{
  background:var(--red);
  animation-duration:3.8s;
}
.network-cluster .signal-pulse::after{
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid var(--blue);
  border-radius:50%;
  animation:networkRipple 1.9s ease-out infinite;
}
.network-cluster::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:21px 0 0;
  pointer-events:none;
  opacity:.055;
  background:linear-gradient(100deg,transparent 10%,var(--blue) 48%,transparent 84%);
  transform:translateX(-75%);
  animation:networkSweep 5.6s ease-in-out infinite;
}
@keyframes railTravel{
  0%,100%{left:0;opacity:.35}
  50%{left:calc(100% - 7px);opacity:1}
}
@keyframes networkRipple{
  0%{transform:scale(.45);opacity:.75}
  100%{transform:scale(1.7);opacity:0}
}
@keyframes networkSweep{
  0%,100%{transform:translateX(-75%)}
  50%{transform:translateX(75%)}
}
.mode-tile{
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  gap:7px;
}
.mode-button{
  width:var(--mode-size);
  height:var(--mode-size);
  padding:0;
  display:grid;
  place-items:center;
}
.mode-button svg{width:31px;height:31px}
.mode-button[aria-pressed=true],.mode-button.active{background:var(--mode);color:#0b0b0b}
.mode-label{
  min-width:84px;
  padding:4px 7px;
  color:var(--ink);
  background:var(--surface);
  border:1.5px solid var(--ink);
  text-align:center;
  font:850 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.music-icon .solid{fill:currentColor;stroke:none}
.mode-button.pulse svg{animation:notePulse .28s ease}
@keyframes notePulse{50%{transform:translateY(-3px) scale(1.08)}}
@media(prefers-reduced-motion:reduce){
  .signal-pulse,
  .network-cluster .signal-pulse::after,
  .network-cluster::after,
  .mode-button.pulse svg{animation:none}
  .expression-source .squint-open,
  .expression-source .squint-closed,
  .expression-source-button .squint-open,
  .expression-source-button .squint-closed{animation:none!important}
  .expression-source .squint-open,
  .expression-source-button .squint-open{opacity:1}
  .expression-source .squint-closed,
  .expression-source-button .squint-closed{opacity:0}
}
.workspace{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:18px;margin-top:22px;align-items:start
}
.workspace > .panel,
.workspace .panel-body,
.workspace .performance-options,
.workspace .pitched-controls-host{min-width:0}
.mode-panel{min-height:330px}
.mode-content{display:none}
.mode-content.active{display:block}
.rack{display:grid;gap:12px}
.rack-row{
  display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:center;
  padding-bottom:11px;border-bottom:1px solid var(--hair)
}
.rack-row:last-child{border-bottom:0;padding-bottom:0}
.rack-label{
  color:var(--muted);font:800 10px/1.15 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase
}
.segmented{display:flex;flex-wrap:wrap;gap:7px}
.seg{min-height:38px;padding:0 11px;font-weight:850}
.seg[aria-pressed=true],.seg.active{background:var(--mode);color:#0b0b0b}
.value-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;align-items:center}
.value-row output{
  font:750 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:right
}
.percussion-viz{
  min-height:78px;display:flex;align-items:end;justify-content:center;gap:9px;
  padding:12px;background:#0b0b0b;border:2px solid #0b0b0b
}
.percussion-viz i{
  width:16px;height:var(--h);min-height:8px;background:var(--orange);
  border:1px solid #fffdf7;transition:height .18s ease
}
.theremin-flow{
  height:112px;position:relative;overflow:hidden;background:#0b0b0b;border:2px solid #0b0b0b
}
#thereminCanvas{
  width:100%;
  height:100%;
  display:block;
}
.subpanel{
  margin-top:12px;padding:12px;background:var(--surface-2);border:2px solid var(--ink)
}
.expression-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.expression-head strong{font-size:17px}
.velocity-meter{
  margin-left:auto;height:27px;display:flex;align-items:end;gap:3px
}
.velocity-meter span{width:4px;height:var(--h);background:var(--purple)}
.expression-sources{
  display:grid;grid-template-columns:repeat(3,1fr);gap:7px
}
.expression-source{
  min-height:76px;display:grid;place-items:center;align-content:center;gap:5px;
  border:2px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer
}
.expression-source[aria-pressed=true]{background:var(--lime);color:#0b0b0b}
.expression-source svg{width:28px;height:28px}
.expression-source span{font-size:10px;font-weight:850}
.squint-open{opacity:1}
.squint-closed{opacity:0}
.expression-source[aria-pressed=true] .squint-open,
.expression-source-button[aria-pressed=true] .squint-open{
  animation:squintOpen 1.8s steps(1,end) infinite
}
.expression-source[aria-pressed=true] .squint-closed,
.expression-source-button[aria-pressed=true] .squint-closed{
  animation:squintClosed 1.8s steps(1,end) infinite
}
@keyframes squintOpen{
  0%,52%,100%{opacity:1}
  53%,76%{opacity:0}
}
@keyframes squintClosed{
  0%,52%,100%{opacity:0}
  53%,76%{opacity:1}
}
.expression-controls{
  display:grid;grid-template-columns:84px minmax(0,1fr) 40px;gap:8px;align-items:center;margin-top:13px
}
.expression-controls label,.expression-controls output{
  font:750 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace
}
.expression-controls output{text-align:right}
.vibrato{
  margin-top:14px;padding-top:13px;border-top:2px solid var(--ink)
}
.vibrato-top{display:flex;align-items:center;gap:9px}
.vibrato-toggle{
  min-height:40px;padding:0 12px;font:850 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase
}
.vibrato-toggle[aria-pressed=true]{background:var(--cyan);color:#0b0b0b}
#waveCanvas{
  width:100%;height:78px;display:block;margin-top:10px;background:#0b0b0b;border:2px solid #0b0b0b
}
.vibrato-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px
}
.compact-control{display:grid;grid-template-columns:64px minmax(0,1fr) 32px;gap:7px;align-items:center}
.compact-control label,.compact-control output{
  font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace
}
.performer-toolbar{display:grid;gap:10px}
.performance-context{
  margin-top:12px;
  padding:12px;
  background:var(--surface-2);
  border:2px solid var(--ink);
}
.octave-control{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.octave-display{
  min-width:92px;
  min-height:40px;
  display:grid;
  place-items:center;
  border:2px solid var(--ink);
  background:var(--surface);
  font:850 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.computer-keyboard-map{
  display:grid;
  grid-template-columns:repeat(13,minmax(28px,1fr));
  gap:4px;
  margin-top:10px;
}
.computer-keyboard-map kbd{
  min-height:48px;
  display:grid;
  place-items:end center;
  padding:0 0 7px;
  color:#0b0b0b;
  background:#fffdf7;
  border:2px solid #0b0b0b;
  box-shadow:2px 2px 0 #0b0b0b;
  font:850 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.computer-keyboard-map kbd.accidental{
  color:#fffdf7;
  background:#0b0b0b;
  transform:translateY(-8px);
}
.computer-keyboard-map kbd.active{
  background:var(--lime);
  color:#0b0b0b;
  transform:translateY(-3px);
}
.performance-stage{margin-top:12px}
.stage-view{display:none}
.stage-view.active{display:block}
.piano{
  position:relative;height:130px;display:flex;background:#0b0b0b;border:2px solid var(--ink);overflow:hidden;user-select:none
}
.piano-key{
  position:relative;flex:1;height:100%;background:#fffdf7;border-right:1px solid #0b0b0b
}
.piano-key.black{
  position:absolute;z-index:3;top:0;width:5.2%;height:62%;background:#0b0b0b;border:1px solid #fffdf7
}
.piano-key.selected{background:var(--lime)}
.piano-key span{
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  color:#0b0b0b;font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace
}
.range-slider-wrap{margin-top:10px;display:grid;grid-template-columns:50px 1fr 50px;gap:8px;align-items:center}
.range-slider-wrap output{font:750 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center}
.wheel-wrap{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,1fr);gap:14px;align-items:center}
.harmonic-wheel{
  width:min(100%,340px);aspect-ratio:1;justify-self:center;position:relative;border-radius:50%;
  background:radial-gradient(circle,var(--surface) 0 24%,var(--surface-2) 24.5% 51%,var(--surface) 51.5%);
  border:3px solid var(--ink);box-shadow:var(--shadow-sm);transition:transform .4s ease
}
.degree{
  position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px;
  display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;
  background:var(--surface);color:var(--ink);font-weight:900;cursor:pointer;
  transform:rotate(var(--a)) translateY(-120px) rotate(calc(-1 * var(--a)))
}
.degree.active{background:var(--purple);color:#fffdf7}
.wheel-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:88px;height:88px;border-radius:50%;display:grid;place-items:center;
  background:var(--lime);color:#0b0b0b;border:3px solid #0b0b0b;font-weight:950
}
.wheel-data{display:grid;gap:8px}
.wheel-line{padding:9px;background:var(--surface-2);border:1.5px solid var(--ink)}
.wheel-line span{display:block;color:var(--muted);font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}
.pattern-head{
  display:grid;
  grid-template-columns:minmax(92px,.8fr) repeat(3,minmax(70px,1fr));
  gap:8px;
  margin-bottom:10px
}
.pattern-mode-row,
.pattern-presets,
.pattern-settings{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  margin-bottom:10px;
}
.pattern-mode-row{justify-content:space-between}
.pattern-lane{
  --steps:8;
  display:grid;
  grid-template-columns:repeat(var(--steps),minmax(38px,1fr));
  gap:5px;
  padding:9px;
  overflow-x:auto;
  background:#0b0b0b;
  border:2px solid #0b0b0b;
}
.pattern-step{
  min-width:38px;
  min-height:58px;
  display:grid;
  place-items:center;
  padding:0;
  color:#fffdf7;
  background:#171717;
  border:1px solid #666;
  cursor:pointer;
  font:900 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.pattern-step[data-tone="rest"]{color:#777}
.pattern-step[data-tone="1"],
.pattern-step[data-tone="root"]{background:var(--lime);color:#0b0b0b}
.pattern-step[data-tone="3"],
.pattern-step[data-tone="third"]{background:var(--cyan);color:#0b0b0b}
.pattern-step[data-tone="5"],
.pattern-step[data-tone="fifth"]{background:var(--purple)}
.pattern-step[data-tone="7"],
.pattern-step[data-tone="seventh"]{background:var(--orange);color:#0b0b0b}
.pattern-step[data-tone="8"],
.pattern-step[data-tone="octave"]{background:var(--blue);color:#0b0b0b}
.pattern-step.playing{
  outline:4px solid #fffdf7;
  outline-offset:-4px;
  transform:translateY(-3px);
}
.pattern-caption{
  color:var(--muted);
  font:750 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace
}
.utilities{
  margin-top:20px;padding:15px;color:#fffdf7;background:var(--purple);
  border:3px solid #0b0b0b;box-shadow:7px 7px 0 #0b0b0b
}
.utility-toolbar{
  display:grid;grid-template-columns:repeat(3,minmax(88px,1fr));gap:16px 8px;justify-items:center
}
.utility-tile{display:grid;justify-items:center;gap:6px}
.utility-button{
  width:var(--utility-size);height:var(--utility-size);padding:0;display:grid;place-items:center;
  color:#0b0b0b;background:#fffdf7;border-color:#0b0b0b;box-shadow:4px 4px 0 #0b0b0b
}
.utility-button svg{width:27px;height:27px}
.utility-button[aria-pressed=true]{background:var(--lime)}
.utility-label{color:#fffdf7;text-align:center;font-size:10px}
.utility-detail-tray{
  margin-top:14px;padding-top:14px;border-top:2px solid rgba(255,255,255,.6)
}
.utilities input[type=range]{accent-color:var(--lime)}
.sound-controls{display:grid;gap:14px}
.envelope-wrap{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px}
.envelope-controls{display:grid;gap:9px}
.envelope-row{
  display:grid;grid-template-columns:72px 68px minmax(0,1fr) repeat(3,44px);gap:7px;align-items:center
}
.envelope-row .small-btn{width:44px;height:44px;padding:0;font-size:8px;text-transform:uppercase}
.envelope-value{font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.envelope-visual{
  position:relative;
  min-height:210px;
  overflow:hidden;
  background:#0b0b0b;
  border:2px solid #0b0b0b;
}
#envelopeCanvas{width:100%;height:210px;display:block}
.envelope-stage{
  position:absolute;
  left:9px;
  top:9px;
  z-index:2;
  min-width:66px;
  padding:5px 7px;
  color:#0b0b0b;
  background:var(--lime);
  border:1.5px solid #0b0b0b;
  font:850 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;
}
.effects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.effect-card{padding:11px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.35);color:#fffdf7}
.effect-card .field{grid-template-columns:74px 1fr}
.gesture-mappings{
  margin-top:20px;color:#fffdf7;background:#0b0b0b;border:3px solid #0b0b0b;
  box-shadow:7px 7px 0 var(--purple)
}
.gesture-mappings summary{
  min-height:54px;display:flex;align-items:center;gap:10px;padding:0 14px;list-style:none;cursor:pointer
}
.gesture-mappings summary::-webkit-details-marker{display:none}
.gesture-mappings-title{font-size:17px;font-weight:900}
.gesture-mappings-counts{color:var(--cyan);font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.gesture-mappings-warning{
  margin-left:auto;padding:4px 7px;color:#0b0b0b;background:var(--lime);
  font:850 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace
}
.gesture-summary{padding:0 12px 13px;overflow-x:auto}
.gesture-summary-header,.gesture-summary-row{
  display:grid;
  grid-template-columns:minmax(128px,1fr) 54px 54px 58px repeat(5,48px);
  gap:6px;align-items:center;min-width:660px
}
body[data-mode=percussion] .gesture-summary-header,
body[data-mode=percussion] .gesture-summary-row{
  grid-template-columns:minmax(128px,1fr) 54px 54px 58px repeat(5,48px) 68px;
  min-width:734px
}
.gesture-summary-header{
  padding:0 3px 5px;color:#858585;text-align:center;text-transform:uppercase;
  font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace
}
.gesture-summary-header>div:first-child{text-align:left}
.gesture-summary-row{
  min-height:58px;padding:7px 0 1px;border-top:1px solid #3d3d3d;--channel:var(--cyan)
}
.gesture-summary-row:nth-of-type(3){--channel:var(--purple)}
.gesture-summary-row:nth-of-type(4){--channel:var(--orange)}
.gesture-summary-row:nth-of-type(5){--channel:var(--lime)}
.gesture-summary-row:nth-of-type(6){--channel:var(--blue)}
.gesture-summary-row:nth-of-type(7){--channel:var(--yellow)}
.gesture-summary-name{
  min-height:37px;display:flex;align-items:center;padding:0 9px;color:#0b0b0b;
  background:var(--channel);font-weight:850
}
.gesture-summary-value,.gesture-midi-val,.gesture-note-name{
  min-height:32px;display:grid;place-items:center;color:var(--lime);background:#050505;
  border:1px solid #494949;font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace
}
.gesture-mappings .icon-btn{
  color:#fffdf7;background:#171717;border-color:#707070;box-shadow:3px 3px 0 #000
}
.gesture-mappings .icon-btn[aria-pressed=true],.gesture-mappings .icon-btn.active{
  color:#0b0b0b;background:var(--channel);border-color:#fffdf7
}
.sample-action{
  width:68px;height:44px;padding:0 7px;color:#fffdf7;background:#171717;
  border:2px solid #707070;box-shadow:3px 3px 0 #000;
  font:850 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase
}
.sample-action[aria-pressed=true]{color:#0b0b0b;background:var(--channel);border-color:#fffdf7}
body:not([data-mode=percussion]) .sample-column{display:none!important}
.midi-status{
  margin-top:18px;display:grid;grid-template-columns:auto auto minmax(180px,1fr) auto;
  gap:9px;align-items:center;padding:10px 12px;border:2px solid var(--ink);
  background:var(--surface-2);box-shadow:var(--shadow-sm)
}
.status-light{width:11px;height:11px;background:var(--lime);border:2px solid #0b0b0b}
.midi-status label{font-weight:850}
.status-copy{color:var(--muted);font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.overlay{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  padding:14px;background:rgba(3,4,6,.78);backdrop-filter:blur(5px)
}
.modal{
  width:min(940px,100%);max-height:calc(100vh - 28px);overflow:auto;
  color:var(--ink);background:var(--surface);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--purple)
}
.modal.small{width:min(520px,100%)}
.modal-head{
  position:sticky;top:0;z-index:2;min-height:58px;display:flex;align-items:center;gap:10px;
  padding:0 14px;background:var(--surface-2);border-bottom:3px solid var(--ink)
}
.modal-head h2{margin:0;font-size:18px}
.modal-head .close{margin-left:auto}
.modal-body{padding:15px}
.modal-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:14px}
.close{
  width:42px;height:42px;padding:0;display:grid;place-items:center;font-size:22px
}
.manual-grid{display:grid;gap:9px}
.manual-row{
  display:grid;grid-template-columns:100px 62px 1fr 1fr 136px;gap:8px;align-items:center;
  padding:9px;background:var(--surface-2);border:1.5px solid var(--ink)
}
.manual-row strong{font-size:12px}
.manual-row .live{
  min-height:36px;display:grid;place-items:center;color:var(--lime);background:#0b0b0b;
  font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace
}
.cal-frame-letter{
  width:44px;height:44px;display:grid;place-items:center;position:relative;font:950 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace
}
.cal-frame-letter::before{
  content:"";position:absolute;inset:4px;
  background:
    linear-gradient(currentColor,currentColor) left top/8px 2px no-repeat,
    linear-gradient(currentColor,currentColor) left top/2px 8px no-repeat,
    linear-gradient(currentColor,currentColor) right top/8px 2px no-repeat,
    linear-gradient(currentColor,currentColor) right top/2px 8px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom/8px 2px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom/2px 8px no-repeat,
    linear-gradient(currentColor,currentColor) right bottom/8px 2px no-repeat,
    linear-gradient(currentColor,currentColor) right bottom/2px 8px no-repeat
}
.wizard-step{display:none}
.wizard-step.active{display:block}
.wizard-layout{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1fr);gap:15px;align-items:center}
.wizard-demo{
  width:100%;aspect-ratio:800/452;object-fit:cover;background:#0b0b0b;border:2px solid var(--ink)
}
.wizard-progress{font:850 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;color:var(--muted)}
.wizard-instruction{margin-top:8px;font-size:18px;font-weight:900}
.wizard-status{margin-top:12px;color:var(--purple);font-weight:850}
.progress-track{height:12px;margin-top:10px;background:var(--surface-3);border:2px solid var(--ink)}
.progress-fill{height:100%;width:var(--p);background:var(--lime);transition:width .35s ease}
.wizard-btn{min-height:42px;padding:0 13px;font-weight:850}
.wizard-btn.primary{background:var(--lime);color:#0b0b0b}
.wizard-btn.danger{background:var(--red);color:#fff}
.tutorial-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.tutorial-page{display:none}
.tutorial-page.active{display:block}
.tutorial-page h3{margin:0 0 8px;font-size:18px}
.tutorial-page ul{margin:7px 0 0;padding-left:19px}
#presentationOverlay{
  position:fixed;inset:0;z-index:1100;display:grid;grid-template-rows:auto 1fr;
  color:#fffdf7;background:#050608
}
.presentation-head{min-height:58px;display:flex;align-items:center;padding:0 14px}
.presentation-head strong{font-size:20px}
.presentation-head .close{min-width:44px;margin-left:auto;color:#fffdf7;background:#111;border-color:#fff}
.presentation-stage{
  position:relative;margin:0 14px 14px;overflow:hidden;border:2px solid #fffdf7;
  background:
    radial-gradient(circle at 50% 50%,rgba(118,87,255,.23),transparent 30%),
    #080a0d
}
.presentation-stage canvas{width:100%;height:100%;display:block}
.auth-gate{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:14px;background:var(--page)}
.auth-card{width:min(480px,100%);padding:18px}
.account-control{position:relative}
.account-menu{
  position:absolute;z-index:80;right:0;top:52px;width:260px;padding:10px;
  border:2px solid var(--ink);background:var(--surface);box-shadow:var(--shadow-lg)
}
.account-menu .btn{width:100%;min-height:42px;margin-top:7px}
.btn{min-height:44px;padding:0 14px;font-weight:850}
.btn.primary{background:var(--lime);color:#0b0b0b}
.btn.danger{background:var(--red);color:#fff}
.demo-footer{margin-top:18px;color:var(--muted);text-align:center;font-size:11px}
@media(max-width:900px){
  .workspace,.envelope-wrap,.wizard-layout,.wheel-wrap{grid-template-columns:1fr}
}
@media(max-width:680px){
  .app{width:min(100% - 12px,1160px);padding-top:5px}
  #header{grid-template-columns:90px minmax(0,1fr) 90px;gap:4px}
  #title{font-size:clamp(24px,9vw,36px)}
  .header-side .lang:nth-child(2){display:none}
  .mode-shell-body{grid-template-columns:1fr;gap:18px;padding-inline:9px}
  .mode-divider{height:2px;width:100%}
  .mode-cluster.instrument-cluster{grid-template-columns:repeat(3,minmax(84px,1fr))}
  .mode-cluster.network-cluster{grid-template-columns:repeat(2,minmax(90px,1fr));max-width:420px;width:100%;justify-self:center}
  .tonality-strip{grid-template-columns:1fr}
  .rack-row{grid-template-columns:1fr}
  .vibrato-grid{grid-template-columns:1fr}
  .utility-toolbar{gap-inline:4px}
  .utility-label{font-size:9px}
  .envelope-row{grid-template-columns:62px 56px minmax(110px,1fr);min-width:420px}
  .envelope-row .small-btn{grid-row:2}
  .envelope-controls{overflow-x:auto}
  .effects-grid{grid-template-columns:1fr}
  .gesture-summary-header{display:none}
  .gesture-summary-header,.gesture-summary-row,
  body[data-mode=percussion] .gesture-summary-header,
  body[data-mode=percussion] .gesture-summary-row{min-width:0}
  .gesture-summary-row{
    display:grid;grid-template-columns:repeat(6,44px);justify-content:center;gap:6px;
    margin-bottom:13px;padding:10px 0 2px
  }
  .gesture-summary-name{grid-column:1/4}
  .gesture-summary-value,.gesture-midi-val,.gesture-note-name{grid-column:span 1}
  .gesture-summary-row>button{margin-top:5px}
  .sample-action{grid-column:span 2;justify-self:center}
  .midi-status{grid-template-columns:auto 1fr}
  .midi-status select,.midi-status .status-copy{grid-column:1/-1}
  .manual-row{grid-template-columns:84px 54px 1fr 1fr}
  .manual-row select{grid-column:1/-1}
  .pattern-head{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pattern-lane{grid-template-columns:repeat(var(--steps),minmax(40px,1fr))}
  .computer-keyboard-map{grid-template-columns:repeat(7,minmax(32px,1fr))}
  .camera-readout{grid-template-columns:repeat(2,auto)}
  .camera-readout span:nth-child(3){display:none}
}
@media(max-width:420px){
  .utility-label{font-size:8px}
  .account-menu{right:-45px}
  .expression-sources{gap:4px}
}
/* Approved header-logo integration. The logo remains fully above the camera panel. */
#header{
  position:relative;
  z-index:30;
  min-height:126px;
  margin-bottom:20px;
  overflow:visible;
}
#title.brand-logo-title{
  position:relative;
  z-index:3;
  width:clamp(220px,29vw,282px);
  height:116px;
  margin:0 auto;
  display:grid;
  place-items:center;
  overflow:visible;
  line-height:0;
}
.brand-logo-img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(4px 4px 0 rgba(11,11,11,.94));
  transform:translateY(0) rotate(-.28deg);
  transform-origin:50% 54%;
  animation:mmfLogoFloat 9.2s ease-in-out infinite;
}
.brand-logo-sheen{
  position:absolute;
  z-index:2;
  inset:0;
  display:block;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(108deg,transparent 35%,rgba(255,255,255,.72) 48%,rgba(185,255,106,.42) 53%,transparent 65%);
  background-size:250% 100%;
  -webkit-mask:url("/assets/MIDImyFACE-wordmark.svg") center/contain no-repeat;
  mask:url("/assets/MIDImyFACE-wordmark.svg") center/contain no-repeat;
  animation:mmfLogoSheen 8.8s ease-in-out infinite;
}
html[data-theme="dark"] .brand-logo-img{
  filter:drop-shadow(4px 4px 0 #000) drop-shadow(0 0 8px rgba(118,87,255,.12));
}
@keyframes mmfLogoFloat{
  0%,100%{transform:translateY(0) rotate(-.28deg)}
  50%{transform:translateY(-2px) rotate(.08deg)}
}
@keyframes mmfLogoSheen{
  0%,68%,100%{opacity:0;background-position:130% 0}
  72%{opacity:.12}
  78%{opacity:.34;background-position:-110% 0}
  82%{opacity:0;background-position:-130% 0}
}
@media(max-width:680px){
  #header{min-height:100px;margin-bottom:14px}
  #title.brand-logo-title{width:clamp(188px,58vw,224px);height:92px}
}
@media(prefers-reduced-motion:reduce){
  .brand-logo-img,.brand-logo-sheen{animation:none}
  .brand-logo-sheen{display:none}
}

/* Production-contract adaptations for the approved main-page structure. */
body.mmf-main-page:not(.network-session-active){
  display:block;
  padding:10px 12px 70px;
  text-shadow:none;
}
body.mmf-main-page:not(.network-session-active) > #header,
body.mmf-main-page:not(.network-session-active) > #videoContainer,
body.mmf-main-page:not(.network-session-active) > .tonality-strip,
body.mmf-main-page:not(.network-session-active) > #modeShell,
body.mmf-main-page:not(.network-session-active) > .workspace,
body.mmf-main-page:not(.network-session-active) > .utilities,
body.mmf-main-page:not(.network-session-active) > .gesture-mappings,
body.mmf-main-page:not(.network-session-active) > .midi-status{
  width:min(1160px,100%);
  margin-left:auto;
  margin-right:auto;
}
body.mmf-main-page:not(.presentation-active) > #presentationOverlay{display:none}
body.mmf-main-page.presentation-active > #presentationOverlay{display:grid}
.homepage-header{
  max-width:none;
  margin-top:0;
  margin-bottom:20px;
  padding:0;
}
.homepage-header > .header-side:first-child{grid-column:1;grid-row:1}
.homepage-header > #title.brand-logo-title{
  grid-column:2;
  grid-row:1;
  padding-left:0;
}
.homepage-header > .header-side.end{grid-column:3;grid-row:1}
.homepage-header .homepage-account-control{
  grid-column:auto;
  grid-row:auto;
}
.homepage-header .language-switcher-snes{
  margin:0;
  display:flex;
  gap:7px;
}
.homepage-header .language-radio span{
  min-width:42px;
  height:40px;
  display:grid;
  place-items:center;
  padding:0 8px;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  box-shadow:var(--shadow-sm);
  font:850 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.homepage-header .language-radio input:checked + span{
  color:var(--page);
  background:var(--ink);
  border-color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.homepage-header .language-radio input{
  position:absolute;
  opacity:0;
}
.language-switcher-source{
  position:absolute!important;
  width:1px!important;
  min-width:1px!important;
  height:1px!important;
  min-height:1px!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
  opacity:0;
  pointer-events:none;
}
.homepage-account-control{position:relative}
.homepage-account-button{
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  display:grid;
  place-items:center;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  box-shadow:var(--shadow-sm);
}
.homepage-account-button svg{width:21px;height:21px}
.homepage-account-menu{
  top:calc(100% + 8px);
  right:0;
  width:min(290px,calc(100vw - 24px));
  padding:12px;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  box-shadow:var(--shadow-lg);
}
.homepage-account-menu .toggle-button{
  min-height:40px;
  color:var(--ink);
  background:var(--surface-2);
  border:2px solid var(--ink);
  box-shadow:var(--shadow-sm);
}
.tonality-strip .tonality-control{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-width:0;
}
.tonality-strip .scale-label{
  width:auto;
  margin:0;
  color:#0b0b0b;
  font:800 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;
}
.tonality-strip select{
  width:100%;
  min-height:40px;
  padding:0 9px;
  color:#0b0b0b;
  background:#fffdf7;
  border:2px solid #0b0b0b;
  box-shadow:none;
}
.mode-cluster .mode-tile{
  display:grid;
  grid-column:auto;
  justify-items:center;
  gap:6px;
}
.mode-shell .mode-controls{
  width:100%;
  max-width:none;
  margin:0;
}
.mode-cluster .mode-button{
  width:var(--mode-size);
  height:var(--mode-size);
  min-width:var(--mode-size);
  min-height:var(--mode-size);
  margin:0;
  padding:0;
  display:grid;
  place-items:center;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  box-shadow:var(--shadow-sm);
}
#percussionToggle,
#thereminToggle,
#performanceToggle,
#liveModeLink,
#networkConsoleBtn{
  width:var(--mode-size);
  min-width:var(--mode-size);
  max-width:var(--mode-size);
  height:var(--mode-size);
  min-height:var(--mode-size);
  padding:0;
}
.mode-cluster .mode-button svg{
  width:31px!important;
  height:31px!important;
  flex:0 0 31px;
}
.mode-cluster .mode-button.active,
.mode-cluster .mode-button[aria-pressed="true"]{
  color:#0b0b0b;
  background:var(--cluster-accent);
  border-color:#0b0b0b;
}
.mode-cluster .control-caption{
  min-width:84px;
  min-height:0;
  display:block;
  padding:4px 7px;
  color:var(--ink);
  background:var(--surface);
  border:1.5px solid var(--ink);
  text-align:center;
  font:850 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.workspace > .mode-panel{grid-column:auto}
.workspace .panel-body{min-height:326px}
.workspace .panel-body{min-height:0}
.expression-context-help{margin:0;color:var(--mmf-muted);font-size:12px;line-height:1.35}
.workspace .expression-panel-inline{
  width:100%;max-width:none;min-width:0;margin-top:14px;padding:14px 0 0;
  border-top:2px solid var(--ink);background:transparent;
}
.workspace .expression-panel-inline .expression-section{width:100%;}
.workspace .percussion-options,
.workspace .theremin-mode,
.workspace .performance-options{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  color:var(--ink);
  background:transparent;
  border:0;
  box-shadow:none;
}
.workspace .theremin-mode.active{
  display:grid;
  gap:12px;
}
.workspace .theremin-option{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:12px;
  align-items:start;
  margin:0;
  padding:0 0 11px;
  border-bottom:1px solid var(--hair);
}
.workspace .theremin-voice-row{align-items:center}
.workspace .theremin-voice-row .segmented{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.workspace .theremin-voice-row input[type="radio"]{
  position:absolute;
  opacity:0;
}
.workspace .theremin-voice-row label{
  min-height:38px;
  display:grid;
  place-items:center;
  padding:0 11px;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  box-shadow:var(--shadow-sm);
  font-weight:850;
  cursor:pointer;
}
.workspace .theremin-voice-row input[type="radio"]:checked + label{
  color:#0b0b0b;
  background:var(--mode);
}
.workspace .theremin-option > label{
  width:100%;
  min-width:0;
  min-height:38px;
  display:grid;
  place-items:center;
  padding:0 11px;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  box-shadow:var(--shadow-sm);
  font-weight:850;
}
.workspace .theremin-option > input[type="radio"]:checked + label{
  color:#0b0b0b;
  background:var(--mode);
  border-color:var(--ink);
}
.workspace .theremin-suboptions{
  margin:0;
  min-width:0;
}
.workspace #thereminSynthOptions,
.workspace #thereminNotesOptions{
  padding:0 0 11px;
  border-bottom:1px solid var(--hair);
}
.workspace #thereminInstrumentHost{display:block}
.workspace .shared-instrument-control,
.workspace .synth-routing-controls{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.workspace .shared-instrument-control label,
.workspace .synth-routing-controls label{
  color:var(--muted);
  font:800 10px/1.15 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;
}
.workspace .expression-section{
  margin:0;
  color:var(--ink);
  background:transparent;
  border:0;
  box-shadow:none;
}
.expression-panel .panel-body{padding:14px}
.expression-panel .expression-section > summary{
  min-height:44px;
  padding:0 0 10px;
  color:var(--ink);
  border-bottom:2px solid var(--ink);
}
.expression-panel .expression-heading{font-size:17px}
.expression-panel .expression-groups{
  grid-template-columns:1fr;
  padding:12px 0 0;
}
.workspace .contextual-control-panel{
  padding:10px;
  background:var(--surface-2);
  border:1.5px solid var(--ink);
}
.expression-panel .expression-source-selector{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}
.expression-panel #synthDynamicsControls .expression-source-selector{grid-template-columns:repeat(2,minmax(0,1fr))}
.expression-panel .expression-source-option{min-width:0}
.expression-panel .expression-source-button{
  width:100%;
  height:76px;
  min-width:0;
  display:grid;
  place-items:center;
  color:var(--ink);
  background:transparent;
  border:2px solid var(--ink);
  box-shadow:none;
}
.expression-panel .expression-source-button.active,
.expression-panel .expression-source-button[aria-pressed="true"]{
  color:#0b0b0b;
  background:var(--lime);
}
.expression-panel .velocity-automatic-controls,
.expression-panel .velocity-fixed-controls,
.expression-panel .velocity-squint-controls{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) 58px;
  gap:8px;
  align-items:center;
}
.expression-panel .contextual-control-heading{display:none}
.expression-panel .velocity-automatic-controls label[for="velocitySensitivity"]{grid-column:1;grid-row:1}
.expression-panel #velocitySensitivity{grid-column:2;grid-row:1}
.expression-panel #velocityCurve{grid-column:3;grid-row:1}
.expression-panel .velocity-automatic-controls label[for="velocityMinimum"]{grid-column:1;grid-row:2}
.expression-panel #velocityMinimum{grid-column:2/4;grid-row:2}
.expression-panel .velocity-automatic-controls label[for="velocityMaximum"]{grid-column:1;grid-row:3}
.expression-panel #velocityMaximum{grid-column:2/4;grid-row:3}
.expression-panel .velocity-automatic-controls .slider,
.expression-panel .velocity-squint-controls .slider{
  width:100%;
  min-width:0;
}
.workspace .performance-options-row label{color:var(--ink)}
.workspace select,
.workspace input[type="number"]{
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  box-shadow:none;
}
.utilities #utilityToolbar{
  width:100%;
  margin:0;
  padding:0;
  color:inherit;
  background:transparent;
  border:0;
  box-shadow:none;
}
.utilities .utility-control{
  width:var(--utility-size);
  height:var(--utility-size);
  min-width:var(--utility-size);
  min-height:var(--utility-size);
  margin:0;
  padding:0;
  color:#0b0b0b;
  background:#fffdf7;
  border:2px solid #0b0b0b;
  box-shadow:4px 4px 0 #0b0b0b;
}
.utilities .utility-control svg{width:27px;height:27px}
.utilities .control-caption{display:block}
.utilities #utilityDetailTray{
  width:100%;
  margin:14px 0 0;
  padding:14px 0 0;
  color:#fffdf7;
  background:transparent;
  border:0;
  border-top:2px solid rgba(255,255,255,.6);
  box-shadow:none;
}
.utilities .utility-detail-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.utilities .utility-detail-header h2{
  margin:0;
  color:#fffdf7;
  font-size:17px;
}
.utilities .utility-detail-close{
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:8px;
  color:#0b0b0b;
  background:#fffdf7;
  border:2px solid #0b0b0b;
  box-shadow:3px 3px 0 #0b0b0b;
}
.utilities .sound-controls{
  width:100%;
  max-width:none;
  margin:0;
  display:grid;
  gap:14px;
  align-items:stretch;
  padding:0;
  color:#fffdf7;
  background:transparent;
  border:0;
  box-shadow:none;
}
.utilities #soundControlsPanel{
  width:100%;
  margin:0;
  padding:0;
  overflow:visible;
  color:#fffdf7;
  background:transparent;
  border:0;
  box-shadow:none;
}
.utilities .envelope-controls{
  max-width:none;
  padding:0;
  display:grid;
  gap:9px;
}
.utilities .envelope-controls h3,
.utilities .effect-card h3{
  margin:0 0 3px;
  color:#fffdf7;
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.utilities .envelope-row{
  width:100%;
  min-height:44px;
  display:grid;
  grid-template-columns:145px 60px minmax(0,1fr) repeat(3,44px);
  gap:7px;
  align-items:center;
  position:relative;
  margin:0;
  padding:0;
  color:#fffdf7;
  background:transparent;
  border:0;
  box-shadow:none;
}
.utilities .envelope-row .gesture-name{
  width:auto;
  max-width:none;
  min-height:0;
  padding:0;
  overflow:visible;
  color:#fffdf7;
  background:transparent;
  border:0;
  font-size:10px;
  font-weight:850;
  white-space:nowrap;
}
.utilities .envelope-row .slider{
  width:100%;
  min-width:0;
  max-width:none;
}
.utilities .envelope-row .small-btn{
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  margin:0;
  padding:0 3px;
  color:#0b0b0b;
  background:#fffdf7;
  border:2px solid #0b0b0b;
  box-shadow:3px 3px 0 #0b0b0b;
  font-size:8px;
  text-transform:uppercase;
}
.utilities .envelope-row .small-btn.active{
  color:#0b0b0b;
  background:var(--lime);
  border-color:#0b0b0b;
}
.utilities .envelope-value{
  width:auto;
  min-height:0;
  padding:0;
  color:#fffdf7;
  background:transparent;
  border:0;
  box-shadow:none;
  font-size:9px;
}
.utilities .cc-display{
  position:absolute;
  right:1px;
  top:1px;
  z-index:2;
  width:20px;
  min-height:16px;
  padding:2px 1px;
  overflow:hidden;
  color:#0b0b0b;
  background:var(--lime);
  border:1px solid #0b0b0b;
  font-size:7px;
  text-align:center;
}
.utilities .cc-display:empty{display:none}
.utilities .effects-grid{width:100%}
.utilities .effect-card{
  min-width:0;
  padding:10px;
  color:#fffdf7;
}
.utilities .effect-card .field{margin-top:7px}
.utilities .effect-card .effect-toggle-field{
  grid-template-columns:74px minmax(0,1fr);
}
.utilities .effect-card .effect-amount-field{
  grid-template-columns:74px minmax(0,1fr) 58px;
}
.utilities .effect-card .toggle-button{
  min-height:38px;
  color:#0b0b0b;
  background:#fffdf7;
  border:2px solid #0b0b0b;
  box-shadow:3px 3px 0 #0b0b0b;
}
.utilities .effect-card .toggle-button.active{
  color:#0b0b0b;
  background:var(--cyan);
  border-color:#0b0b0b;
}
.utilities .effect-value{
  min-height:0;
  padding:0;
  color:#fffdf7;
  background:transparent;
  border:0;
  text-align:center;
}
.utilities .envelope-row .slider,
.utilities .effect-card .slider{
  height:20px;
  padding:0;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  border:0;
  box-shadow:none;
}
.utilities .envelope-row .slider::-webkit-slider-runnable-track,
.utilities .effect-card .slider::-webkit-slider-runnable-track{
  height:6px;
  background:#4d5054;
  border:0;
  box-shadow:none;
}
.utilities .envelope-row .slider::-webkit-slider-thumb,
.utilities .effect-card .slider::-webkit-slider-thumb{
  width:16px;
  height:16px;
  margin-top:-5px;
  -webkit-appearance:none;
  appearance:none;
  background:var(--lime);
  border:0;
  border-radius:50%;
  box-shadow:none;
}
.utilities .envelope-row .slider::-moz-range-track,
.utilities .effect-card .slider::-moz-range-track{
  height:6px;
  background:#4d5054;
  border:0;
}
.utilities .envelope-row .slider::-moz-range-thumb,
.utilities .effect-card .slider::-moz-range-thumb{
  width:16px;
  height:16px;
  background:var(--lime);
  border:0;
  border-radius:50%;
  box-shadow:none;
}
.expression-panel #waveCanvas{
  width:100%;
  height:78px;
  display:block;
  margin-top:10px;
  background:#0b0b0b;
  border:2px solid #0b0b0b;
}
.expression-panel .vibrato-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.expression-panel .compact-control{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) 36px;
  gap:7px;
  align-items:center;
}
.expression-panel .compact-control label,
.expression-panel .compact-control output{
  color:var(--ink);
  font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.expression-panel .vibrato-monitor{
  grid-column:1/-1;
  color:var(--muted);
  font:700 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.gesture-mappings .gesture-summary-row .toggle-button,
.gesture-mappings .gesture-calibrate-btn{
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  display:grid;
  place-items:center;
  color:#fffdf7;
  background:#171717;
  border:2px solid #707070;
  box-shadow:3px 3px 0 #000;
}
.gesture-mappings .gesture-summary-row .toggle-button svg,
.gesture-mappings .gesture-calibrate-btn svg{width:21px;height:21px}
.gesture-mappings .gesture-summary-row .toggle-button.active{
  color:#0b0b0b;
  background:var(--channel);
  border-color:#fffdf7;
}
body.mmf-main-page:not([data-mode="percussion"]) .percussion-sample-control{display:none!important}
.gesture-mappings .gesture-summary-header,
.gesture-mappings .gesture-summary-row{
  grid-template-columns:minmax(128px,1fr) 54px 54px 58px repeat(5,48px);
  min-width:660px;
}
body[data-mode="percussion"] .gesture-mappings .gesture-summary-header,
body[data-mode="percussion"] .gesture-mappings .gesture-summary-row{
  grid-template-columns:minmax(128px,1fr) 54px 54px 58px repeat(5,48px) minmax(150px,.8fr);
  min-width:816px;
}
.gesture-mappings .percussion-actions-cell{
  min-width:0;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:7px;
  align-items:center;
}
.gesture-mappings .percussion-actions-cell .sample-action{
  grid-column:1!important;
  justify-self:stretch;
  width:44px;
}
.gesture-mappings .percussion-actions-cell .percussion-sample-control{
  grid-column:2!important;
  justify-self:stretch;
}
.gesture-mappings .percussion-actions-cell .percussion-sample-control,
.gesture-mappings .percussion-actions-cell .percussion-sample-trigger{
  width:100%;
  min-width:0;
}

/* Canonical main-mode workspaces. Runtime state owns data-mode/data-theremin-voice. */
body.mmf-main-page[data-mode="percussion"]{--mode:var(--orange)}
body.mmf-main-page[data-mode="theremin"]{--mode:var(--cyan)}
body.mmf-main-page[data-mode="performer"]{--mode:var(--purple)}
body.mmf-main-page[data-mode="none"] .workspace{display:none}
.workspace .percussion-options.active{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.percussion-kit-row,
.percussion-sensitivity-row{
  display:grid;
  grid-template-columns:112px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
}
.percussion-kit-row .performance-segmented-control{
  grid-column:2/-1;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.percussion-kit-row .toggle-button[aria-pressed="true"]{
  color:#0b0b0b;
  background:var(--orange);
}
.percussion-viz i:nth-child(3n+2){background:var(--yellow)}
.percussion-viz i:nth-child(3n){background:var(--purple)}
.performance-pattern-mode-row{
  justify-content:space-between;
  border-bottom:1px solid var(--hair);
  padding-bottom:10px;
}
.performance-pattern-mode-row .toggle-button[aria-pressed="true"]{
  color:#0b0b0b;
  background:var(--lime);
}
.workspace .performance-pattern-panel{
  width:100%;
  max-width:none;
  padding:12px;
  color:var(--ink);
  background:var(--surface-2);
  border:2px solid var(--ink);
}
.performance-pattern-lane{
  --steps:var(--pattern-step-count,8);
  grid-template-columns:repeat(var(--pattern-step-count,8),minmax(40px,1fr));
  min-height:0;
  padding:9px;
  gap:5px;
  background:#0b0b0b;
  border:2px solid #0b0b0b;
}
.workspace .performance-pattern-step{
  min-width:38px;
  min-height:58px;
  display:grid;
  place-items:center;
  padding:0;
  color:#fffdf7;
  background:#171717;
  border:1px solid #666;
  font:900 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.workspace .performance-pattern-step::before{display:none}
.workspace .performance-pattern-step span{
  position:static;
  font:inherit;
}
.workspace .performance-pattern-step.playing{
  outline:4px solid #fffdf7;
  outline-offset:-4px;
  transform:translateY(-3px);
}
.performance-pattern-step[data-tone="2"],
.performance-pattern-step[data-tone="4"],
.performance-pattern-step[data-tone="6"]{background:var(--cyan);color:#0b0b0b}
.performance-pattern-step[data-tone="1"]{background:var(--lime);color:#0b0b0b}
.performance-pattern-step[data-tone="3"]{background:var(--purple);color:#fffdf7}
.performance-pattern-step[data-tone="5"]{background:var(--orange);color:#0b0b0b}
.performance-pattern-step[data-tone="7"]{background:var(--yellow);color:#0b0b0b}
.performance-pattern-step[data-tone="8"],
.performance-pattern-step[data-tone="9"],
.performance-pattern-step[data-tone="10"],
.performance-pattern-step[data-tone="11"],
.performance-pattern-step[data-tone="12"],
.performance-pattern-step[data-tone="13"]{background:var(--blue);color:#0b0b0b}

@media(max-width:680px){
  .percussion-kit-row,
  .percussion-sensitivity-row{grid-template-columns:1fr}
  .percussion-kit-row .performance-segmented-control{grid-column:auto}
  .workspace .performance-options-row{
    min-width:0;
    width:100%;
    flex-wrap:wrap;
  }
  .workspace .performance-segmented-control{max-width:100%;flex-wrap:wrap}
  .gesture-mappings .gesture-summary{
    padding-inline:8px;
    overflow:visible;
  }
  .gesture-mappings .gesture-summary-row{
    min-width:0!important;
    grid-template-columns:repeat(3,minmax(44px,1fr))!important;
    gap:8px;
  }
  .gesture-mappings .gesture-summary-name{grid-column:1/-1}
  .gesture-mappings .gesture-summary-value,
  .gesture-mappings .gesture-midi-val,
  .gesture-mappings .gesture-note-name{grid-column:span 1}
  .gesture-mappings .gesture-summary-row .toggle-button,
  .gesture-mappings .gesture-calibrate-btn{justify-self:center}
  .gesture-mappings .percussion-actions-cell{
    grid-column:span 3;
    width:100%;
    grid-template-columns:44px minmax(0,1fr);
  }
  .gesture-mappings .sample-action,
  .gesture-mappings .percussion-sample-control{justify-self:stretch;width:100%}
  .performance-pattern-lane{
    grid-template-columns:repeat(var(--pattern-step-count,8),minmax(42px,1fr));
    overflow-x:auto;
  }
}
.gesture-mappings .gesture-summary-header{
  border:0;
  background:transparent;
}
.gesture-mappings .gesture-summary-row{
  border:0;
  border-top:1px solid #3d3d3d;
  background:transparent;
}
.gesture-mappings .gesture-summary-name{
  width:auto;
  text-align:left;
}
.gesture-mappings{max-width:none}
.gesture-mappings .gesture-summary{
  width:100%;
  max-width:none;
  margin:0;
  padding:0 12px 13px;
  color:inherit;
  background:transparent;
  border:0;
  box-shadow:none;
}
.midi-status .status-indicator{
  width:11px;
  height:11px;
  grid-column:1;
  grid-row:1;
  border:2px solid #0b0b0b;
  border-radius:0;
  background:var(--red);
  box-shadow:none;
}
.midi-status{
  color:var(--ink);
  border:2px solid var(--ink);
  background:var(--surface-2);
}
.midi-status label{color:var(--ink)}
.midi-status select{
  color:#0b0b0b;
  background:#fffdf7;
  border:2px solid #0b0b0b;
  box-shadow:none;
}
.midi-status label{grid-column:2}
.midi-status select{grid-column:3}
.midi-status .midi-retry-button{grid-column:4}
@media(max-width:680px){
  body.mmf-main-page:not(.network-session-active){padding:5px 6px 64px}
  #header{grid-template-columns:74px minmax(0,1fr) 92px}
  .header-side{gap:4px}
  .homepage-header .language-radio span{min-width:34px;width:34px;height:36px;padding:0}
  .homepage-header .language-switcher-snes{gap:3px}
  .header-side.end{gap:4px}
  #themeToggle,.homepage-account-button{width:44px;height:44px;min-width:44px;min-height:44px}
  .mode-shell-body{grid-template-columns:1fr;gap:12px}
  .mode-divider{height:2px}
  .mode-cluster.instrument-cluster{grid-template-columns:repeat(3,minmax(68px,1fr))}
  .mode-cluster.network-cluster{grid-template-columns:repeat(2,minmax(76px,1fr))}
  .workspace{grid-template-columns:minmax(0,1fr)}
  .workspace .theremin-option{grid-template-columns:86px minmax(0,1fr)}
  .workspace .shared-instrument-control,
  .workspace .synth-routing-controls{grid-template-columns:1fr}
  .utilities .envelope-wrap{grid-template-columns:1fr}
  .utilities .envelope-controls{overflow-x:auto}
  .utilities .envelope-row{
    grid-template-columns:145px 56px minmax(110px,1fr);
    min-width:503px;
  }
  .utilities .envelope-row .small-btn{grid-row:2}
  .utilities .effects-grid{grid-template-columns:1fr}
  .expression-panel .vibrato-grid{grid-template-columns:1fr}
}

@media(max-width:360px){
  body.mmf-main-page:not(.network-session-active) #header.homepage-header{
    min-height:148px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "brand brand"
      "language utilities";
    align-content:center;
    gap:0 8px;
  }
  .homepage-header > #title.brand-logo-title{
    grid-area:brand;
    width:min(190px,72vw);
    height:86px;
  }
  .homepage-header > .header-side:first-child{grid-area:language}
  .homepage-header > .header-side.end{grid-area:utilities}
}

/* Phase 1 owner correction: reproduce the supplied Performer and Percussion
   compositions while keeping the production controls and runtime bindings. */
.workspace{
  width:100%;
  min-width:0;
  grid-template-columns:minmax(0,1fr);
}
.workspace > .panel,
.workspace .panel-body,
.workspace .mode-content{
  min-width:0;
}
.workspace .performance-options.active{
  display:block;
  position:relative;
}
.workspace .performer-instrument-host:empty,
.workspace #performanceSharedControlsHost:empty,
.workspace #performanceCaptureStatus:empty,
.workspace #performanceChordStatus:empty{
  display:none;
}
.workspace .performer-instrument-host:not(:empty){
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--hair);
}
.workspace .performer-toolbar{
  display:grid;
  gap:0;
}
.workspace .performer-toolbar .rack-row{
  grid-template-columns:92px minmax(0,1fr);
  min-height:48px;
  padding:0 0 9px;
  margin:0 0 9px;
}
.workspace .performer-toolbar .rack-row:last-child{
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:0;
}
.workspace .performer-primary-controls{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.workspace .performer-inline-label{
  margin-left:auto;
  color:var(--muted);
  font:800 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;
}
.workspace .segmented,
.workspace .performance-segmented-control{
  min-width:0;
  padding:0;
  justify-content:flex-start;
}
.workspace .seg,
.workspace .performance-view-controls > .toggle-button{
  width:auto;
  min-width:0;
  min-height:38px;
  padding:0 11px;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  box-shadow:var(--shadow-sm);
  font:850 12px/1 Arial,sans-serif;
  text-transform:none;
}
.workspace .seg.active,
.workspace .seg[aria-pressed="true"],
.workspace .performance-view-controls > .toggle-button.active,
.workspace .performance-view-controls > .toggle-button[aria-pressed="true"]{
  color:#0b0b0b;
  background:var(--mode);
}
.workspace .performance-output-icon{
  width:44px;
  height:38px;
  padding:6px;
}
.workspace .performance-output-icon svg{
  width:24px;
  height:24px;
}
.workspace .performance-stage{
  margin-top:12px;
}
.workspace .stage-view{
  display:none;
  min-width:0;
}
.workspace .stage-view.active:not([hidden]){
  display:block;
}
.workspace .performance-context{
  margin-top:12px;
  padding:12px;
  background:var(--surface-2);
  border:2px solid var(--ink);
}
body.mmf-main-page #waveformSelect,
body.mmf-main-page #midiInstrumentSelect,
body.mmf-main-page #midiOutputSelect,
body.mmf-main-page #performanceMidiInputSelect,
body.mmf-main-page #performanceRootSelect,
body.mmf-main-page #performanceTonalitySelect{
  width:100%;
  min-height:42px;
  padding:0 34px 0 10px;
  color:var(--ink);
  background-color:var(--surface);
  background-image:
    linear-gradient(45deg,transparent 50%,var(--ink) 50%),
    linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% + 1px),
    calc(100% - 10px) calc(50% + 1px);
  background-repeat:no-repeat;
  background-size:6px 6px;
  border:2px solid var(--ink);
  border-radius:0;
  box-shadow:3px 3px 0 var(--ink);
  font:800 11px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}
body.mmf-main-page #waveformSelect:focus-visible,
body.mmf-main-page #midiInstrumentSelect:focus-visible,
body.mmf-main-page #midiOutputSelect:focus-visible,
body.mmf-main-page #performanceMidiInputSelect:focus-visible,
body.mmf-main-page #performanceRootSelect:focus-visible,
body.mmf-main-page #performanceTonalitySelect:focus-visible{
  outline:3px solid var(--cyan);
  outline-offset:3px;
}
body.mmf-main-page #waveformSelect option,
body.mmf-main-page #midiInstrumentSelect option,
body.mmf-main-page #midiOutputSelect option,
body.mmf-main-page #performanceMidiInputSelect option,
body.mmf-main-page #performanceRootSelect option,
body.mmf-main-page #performanceTonalitySelect option{
  color:var(--ink);
  background:var(--surface);
  font-weight:750;
}
.workspace .performer-harmony-controls{
  display:grid;
  grid-template-columns:repeat(2,minmax(116px,1fr));
  gap:10px;
}
.workspace .performer-harmony-controls label{
  display:grid;
  gap:5px;
  color:var(--muted);
  font:850 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;
}
.workspace .performance-record-toggle[aria-pressed="true"]{
  color:#fffdf7;
  background:#e33f43;
}
.workspace .performance-record-toggle.custom-source[aria-pressed="false"]{
  box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--ink) 18%,transparent);
}
.workspace .performance-record-toggle[hidden]{display:none!important}
.workspace .performance-record-context{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  font:750 11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.workspace .performance-record-indicator{
  width:12px;
  height:12px;
  background:#e33f43;
  border:2px solid var(--ink);
  animation:mmfRecordListen 900ms steps(2,end) infinite;
}
@keyframes mmfRecordListen{
  0%,44%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,#e33f43 70%,transparent)}
  45%,100%{opacity:.35;box-shadow:0 0 0 5px color-mix(in srgb,#e33f43 25%,transparent)}
}
.workspace .performance-range-piano-wrap{
  background:transparent;
  border:0;
  padding:0;
}
.workspace .piano.performance-range-piano{
  position:relative;
  width:100%;
  height:130px;
  display:block;
  overflow-x:auto;
  overflow-y:hidden;
  background:#0b0b0b;
  border:2px solid var(--ink);
}
.workspace .performance-range-piano-track{
  position:relative;
  height:100%;
  min-width:max-content;
}
.workspace .performance-range-key.white{
  top:0;
  bottom:0;
  height:100%;
  color:#0b0b0b;
  background:#fffdf7;
  border:0;
  border-right:1px solid #0b0b0b;
  box-shadow:none;
}
.workspace .performance-range-key.black{
  top:0;
  height:62%;
  z-index:3;
  color:#fffdf7;
  background:#0b0b0b;
  border:1px solid #fffdf7;
  box-shadow:none;
}
.workspace .performance-range-key.in-range.white{
  background:var(--lime);
}
.workspace .performance-range-key.in-range.black{
  border-color:var(--lime);
}
.workspace .performance-range-key.pressed{
  background:var(--cyan);
}
.workspace .performance-range-readout{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.workspace .range-slider-wrap{
  display:grid;
  grid-template-columns:50px minmax(0,1fr) 50px;
  gap:8px;
  align-items:center;
  margin-top:10px;
}
.workspace .range-slider-wrap output{
  color:var(--ink);
  text-align:center;
  font:750 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.workspace .slider,
.expression-panel .slider{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:16px!important;
  min-height:0!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  outline:revert!important;
  background:transparent!important;
  box-shadow:none!important;
  accent-color:var(--purple);
}
.workspace .slider::-webkit-slider-runnable-track,
.expression-panel .slider::-webkit-slider-runnable-track{
  height:4px!important;
  background:#d2d2d2!important;
  border:1px solid #aaa!important;
  border-radius:4px!important;
  box-shadow:none!important;
}
.workspace .slider::-webkit-slider-thumb,
.expression-panel .slider::-webkit-slider-thumb{
  width:15px!important;
  height:15px!important;
  margin-top:-6px!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  border:0!important;
  border-radius:50%!important;
  background:var(--purple)!important;
  box-shadow:none!important;
}
.workspace .slider::-moz-range-track,
.expression-panel .slider::-moz-range-track{
  height:4px!important;
  background:#d2d2d2!important;
  border:1px solid #aaa!important;
  border-radius:4px!important;
  box-shadow:none!important;
}
.workspace .slider::-moz-range-thumb,
.expression-panel .slider::-moz-range-thumb{
  width:15px!important;
  height:15px!important;
  border:0!important;
  border-radius:50%!important;
  background:var(--purple)!important;
  box-shadow:none!important;
}
.workspace .performance-pattern-panel{
  width:100%;
  max-width:none;
  padding:0;
  color:var(--ink);
  background:transparent;
  border:0;
}
.workspace .pattern-head{
  display:grid;
  grid-template-columns:minmax(92px,.8fr) repeat(3,minmax(70px,1fr));
  gap:8px;
  margin-bottom:10px;
}
.workspace .pattern-head .field{
  grid-template-columns:auto minmax(52px,1fr);
}
.workspace .pattern-head .btn,
.workspace .pattern-head select{
  width:100%;
  min-height:40px;
}
.workspace .pattern-mode-row,
.workspace .pattern-presets,
.workspace .pattern-settings{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  margin-bottom:10px;
}
.workspace .pattern-mode-row{
  justify-content:space-between;
  padding:0;
  border:0;
}
.workspace .pattern-mode-row #performanceStepCount{
  width:auto;
  min-width:116px;
}
.workspace .performance-pattern-lane{
  display:grid;
  grid-template-columns:repeat(var(--pattern-step-count,8),minmax(38px,1fr));
  gap:5px;
  min-height:0;
  padding:9px;
  overflow-x:auto;
  background:#0b0b0b;
  border:2px solid #0b0b0b;
}
.workspace .performance-pattern-step{
  min-width:38px;
  min-height:58px;
  padding:0;
  color:#fffdf7;
  background:#171717;
  border:1px solid #666;
  box-shadow:none;
}
.workspace .performance-pattern-step[data-tone="root"]{
  color:#0b0b0b;
  background:var(--lime);
}
.workspace .performance-pattern-step[data-tone="third"]{
  color:#0b0b0b;
  background:var(--cyan);
}
.workspace .performance-pattern-step[data-tone="fifth"]{
  color:#fffdf7;
  background:var(--purple);
}
.workspace .performance-pattern-step[data-tone="seventh"]{
  color:#0b0b0b;
  background:var(--orange);
}
.workspace .performance-pattern-step[data-tone="octave"]{
  color:#0b0b0b;
  background:var(--blue);
}
.workspace .pattern-caption{
  min-height:20px;
  margin:4px 0 8px;
  color:var(--muted);
  font:750 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.workspace .performance-beat-marker{
  min-height:10px;
  margin:0 0 8px;
}
.workspace .pattern-settings{
  display:grid;
  grid-template-columns:1fr;
  margin-bottom:0;
}
.workspace .pattern-settings select{
  width:100%;
  min-width:0;
}
.workspace .performance-wheel-panel{
  padding:0;
  background:transparent;
  border:0;
}
.workspace .harmonic-wheel-reference{
  width:min(100%,300px);
  aspect-ratio:1;
  justify-self:center;
  border:3px solid var(--ink);
  border-radius:50%;
  background:
    radial-gradient(circle,var(--lime) 0 17%,transparent 17.5%),
    repeating-conic-gradient(from -13deg,var(--surface) 0 24deg,var(--surface-2) 24deg 48deg);
  box-shadow:var(--shadow-sm);
}
.workspace .performance-advanced{
  margin-top:12px;
  color:var(--ink);
  background:var(--surface-2);
  border:1.5px solid var(--ink);
}
.workspace .performance-advanced:not([open]){
  position:absolute;
  z-index:3;
  top:59px;
  right:0;
  width:38px;
  height:38px;
  margin:0;
  border:0;
  background:transparent;
}
.workspace .performance-advanced:not([open]) > :not(summary){display:none!important}
.workspace .performance-advanced > summary{
  min-height:38px;
  display:flex;
  align-items:center;
  padding:0 10px;
  cursor:pointer;
  font:850 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;
}
.workspace .performance-advanced:not([open]) > summary{
  width:38px;
  height:38px;
  min-height:38px;
  justify-content:center;
  padding:0;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  box-shadow:var(--shadow-sm);
  font-size:12px;
}
.workspace .performance-advanced-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:0 10px 10px;
}
.workspace .performance-advanced-grid label{
  min-width:0;
  display:grid;
  gap:5px;
  color:var(--muted);
  font:750 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;
}
.workspace .percussion-options.active{
  display:block;
}
.workspace .percussion-options .rack{
  display:grid;
  gap:12px;
}
.workspace .percussion-options .rack-row{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding-bottom:11px;
  border-bottom:1px solid var(--hair);
}
.workspace .percussion-sensitivity-row .value-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 44px;
  gap:8px;
  align-items:center;
}
.workspace .percussion-sensitivity-row output{
  color:var(--ink);
  text-align:right;
  font:750 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.workspace .percussion-kit-row .performance-segmented-control{
  grid-column:auto;
  display:flex;
  gap:7px;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.workspace .percussion-viz{
  position:relative;
  min-height:78px;
  overflow:hidden;
  isolation:isolate;
}
.workspace .percussion-options .rack-label{
  color:var(--muted);
}
.workspace .percussion-viz i,
.workspace .percussion-viz i:nth-child(3n+2),
.workspace .percussion-viz i:nth-child(3n){
  background:var(--orange);
}
.workspace .percussion-viz i{
  position:relative;
  z-index:2;
  transform-origin:50% 100%;
}
.workspace .percussion-viz i.hit{
  animation:mmfPercussionBarHit 260ms cubic-bezier(.18,.82,.25,1);
  background:var(--lime);
  box-shadow:0 0 14px color-mix(in srgb,var(--lime) 72%,transparent);
}
.workspace .percussion-ripple{
  position:absolute;
  z-index:1;
  left:var(--ripple-x,50%);
  top:var(--ripple-y,50%);
  width:18px;
  height:18px;
  margin:-9px;
  display:block;
  color:var(--cyan);
  border:2px solid currentColor;
  border-radius:50%;
  pointer-events:none;
  opacity:.82;
  transform:scale(.28);
  animation:mmfPercussionRipple 880ms cubic-bezier(.16,.72,.22,1) forwards;
}
.workspace .percussion-ripple::before,
.workspace .percussion-ripple::after{
  content:"";
  position:absolute;
  inset:-2px;
  border:2px solid currentColor;
  border-radius:50%;
}
.workspace .percussion-ripple::before{color:var(--orange);transform:scale(1.55)}
.workspace .percussion-ripple::after{color:var(--purple);transform:scale(2.2)}
.workspace .percussion-randomize-button{
  width:42px;
  min-width:42px;
  padding:7px;
}
.workspace .percussion-randomize-button svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
}
.workspace .percussion-randomize-button svg circle{
  fill:currentColor;
  stroke:none;
}
.workspace .percussion-randomize-button.is-rolling svg{
  animation:mmfDiceRoll 400ms steps(5,end);
}
@keyframes mmfPercussionBarHit{
  0%{transform:scaleY(.72)}
  48%{transform:scaleY(1.16)}
  100%{transform:scaleY(1)}
}
@keyframes mmfPercussionRipple{
  0%{opacity:.88;transform:scale(.28)}
  100%{opacity:0;transform:scale(8.5)}
}
@keyframes mmfDiceRoll{
  0%{transform:rotate(0) scale(.9)}
  100%{transform:rotate(360deg) scale(1)}
}
.utilities .utility-toolbar{
  grid-template-columns:repeat(3,minmax(88px,1fr));
  gap:16px 8px;
}
.utilities .utility-label{
  max-width:132px;
  min-height:20px;
  color:#fffdf7;
  font:750 10px/1.15 Arial,sans-serif;
  text-transform:none;
}
.utilities .utility-control{
  width:56px;
  height:56px;
  min-width:56px;
  min-height:56px;
  max-width:56px;
  overflow:hidden;
}
.workspace > .expression-panel{
  width:auto;
  max-width:none;
  min-width:0;
}
.expression-panel .expression-section > summary{
  min-height:38px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 0 10px;
  color:var(--ink);
  border-bottom:0;
  cursor:pointer;
  list-style:none;
}
.expression-panel .expression-section > summary::-webkit-details-marker{
  display:none;
}
.expression-panel .expression-heading{
  font:850 17px/1 Arial,sans-serif;
}
.expression-panel .expression-state,
.expression-panel .expression-arrow{
  display:none!important;
}
.expression-panel .velocity-meter{
  margin-left:auto;
  height:27px;
  display:flex;
  align-items:end;
  gap:3px;
}
.expression-panel .velocity-meter i{
  width:4px;
  height:var(--h);
  background:var(--purple);
}
.expression-panel .expression-groups{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  padding:0;
}
.expression-panel #velocityControls,
.expression-panel #synthDynamicsControls,
.expression-panel #sharedVibratoControls{
  padding:0;
  background:transparent;
  border:0;
}
.expression-panel .expression-source-option{
  display:grid;
  gap:5px;
  color:var(--ink);
  text-align:center;
  font:850 10px/1 Arial,sans-serif;
}
.expression-panel .expression-source-button{
  min-height:76px;
}
.expression-panel .velocity-automatic-controls{
  display:grid;
  grid-template-columns:84px minmax(0,1fr) 40px;
  gap:8px;
  align-items:center;
  margin-top:13px;
}
.expression-panel .velocity-automatic-controls label,
.expression-panel .velocity-automatic-controls output{
  position:static!important;
  grid-column:auto!important;
  grid-row:auto!important;
  color:var(--ink);
  font:750 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.expression-panel .velocity-automatic-controls output{
  text-align:right;
}
.expression-panel .velocity-automatic-controls > .slider{
  grid-column:auto!important;
  grid-row:auto!important;
}
.expression-panel .expression-advanced{
  grid-column:1/-1;
  margin-top:2px;
  border-top:1px solid var(--hair);
}
.expression-panel .expression-advanced > summary{
  min-height:30px;
  display:flex;
  align-items:center;
  color:var(--muted);
  cursor:pointer;
  font:750 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;
}
.expression-panel .expression-advanced select{
  margin-bottom:4px;
}
.expression-panel .vibrato{
  margin-top:14px;
  padding-top:13px!important;
  border-top:2px solid var(--ink)!important;
}
.expression-panel .vibrato-summary{
  min-height:40px;display:flex;align-items:center;gap:8px;padding:0 0 8px;list-style:none;cursor:pointer;
  color:var(--ink);font:850 11px/1 var(--mono);text-transform:uppercase;
}
.expression-panel .vibrato-summary::-webkit-details-marker{display:none}
.expression-panel .vibrato-summary::before{content:"+";width:18px;font-size:17px}
.expression-panel #sharedVibratoControls[open]>.vibrato-summary::before{content:"−"}
.expression-panel .vibrato-summary-state{margin-left:auto;color:var(--muted);font-size:9px}
.expression-panel .vibrato-content{display:grid;gap:8px}
.expression-panel #sharedVibratoControls:not([open])>.vibrato-content{display:none}
.expression-panel .vibrato-top{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
}
.expression-panel .vibrato-toggle{
  width:auto;
  min-width:0;
  min-height:40px;
  padding:0 12px;
  color:#0b0b0b;
  background:var(--cyan);
  border:2px solid var(--ink);
  box-shadow:var(--shadow-sm);
  font:850 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;
}
.expression-panel .vibrato-toggle[aria-pressed="false"]{
  color:var(--ink);
  background:var(--surface);
}
.expression-panel .vibrato-grid[hidden]{
  display:grid!important;
}
.expression-panel .vibrato-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.workspace .performance-advanced-wide{
  grid-column:1/-1;
}
.workspace .performance-advanced-wide .shared-instrument-control{
  grid-template-columns:92px minmax(0,1fr);
}

@media(max-width:680px){
  .workspace{grid-template-columns:minmax(0,1fr)}
  .workspace .performer-toolbar .rack-row,
  .workspace .percussion-options .rack-row{
    grid-template-columns:78px minmax(0,1fr);
  }
  .workspace .performance-view-controls{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .workspace .performer-primary-controls{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .workspace .performer-inline-label{
    width:100%;
    margin:2px 0 0;
  }
  .workspace .performance-advanced:not([open]),
  .workspace .performance-advanced:not([open]) > summary{
    width:44px;
    height:44px;
    min-height:44px;
  }
  .workspace .performance-advanced:not([open]){
    top:56px;
  }
  .workspace .shared-instrument-control select{
    width:100%;
    min-width:44px;
  }
  .expression-panel #expressionSummary,
  .expression-panel .expression-advanced > summary{
    min-height:44px;
  }
  .workspace .pattern-head{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .workspace .pattern-head .field{
    grid-column:1/-1;
  }
  .workspace .performance-advanced-grid{
    grid-template-columns:1fr;
  }
  .workspace .performance-advanced-grid select,
  .workspace .performance-advanced-grid input[type="number"]{
    width:100%;
    min-width:44px;
    min-height:44px;
  }
  .workspace .wheel-wrap{
    grid-template-columns:1fr;
  }
  .utilities .utility-toolbar{
    gap:16px 4px;
  }
}

/* Focused prototype-conformance corrections: calibration, utilities and Performer. */
.utilities .utility-toolbar{
  display:grid;
  grid-template-columns:repeat(3,minmax(88px,1fr));
  gap:16px 8px;
  justify-items:center;
}
.utilities .utility-tile{
  display:grid;
  justify-items:center;
  gap:6px;
}
.utilities .utility-button{
  width:56px;
  height:56px;
  min-width:56px;
  min-height:56px;
  max-width:56px;
  padding:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#0b0b0b;
  background:#fffdf7;
  border:2px solid #0b0b0b;
  border-radius:0;
  box-shadow:4px 4px 0 #0b0b0b;
  font-size:0;
}
.utilities .utility-toolbar #openManualCalBtn,
.utilities .utility-toolbar #openAutoCalBtn,
.utilities .utility-toolbar #soundControlsToggle,
.utilities .utility-toolbar #browserAudioMuteToggle,
.utilities .utility-toolbar #instructionButton,
.utilities .utility-toolbar #presentationModeButton{
  width:56px;
  height:56px;
  min-width:56px;
  min-height:56px;
  max-width:56px;
  margin:0;
  padding:0;
  display:grid;
  place-items:center;
  color:#0b0b0b;
  background:#fffdf7;
  border:2px solid #0b0b0b;
  box-shadow:4px 4px 0 #0b0b0b;
}
.utilities .utility-button svg{
  width:27px;
  height:27px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:square;
  stroke-linejoin:miter;
}
.utilities .utility-button[aria-pressed="true"],
.utilities #soundControlsToggle[aria-expanded="true"]{
  color:#0b0b0b;
  background:var(--lime);
}
.utilities .utility-toolbar #browserAudioMuteToggle[aria-pressed="true"],
.utilities .utility-toolbar #presentationModeButton[aria-pressed="true"],
.utilities .utility-toolbar #soundControlsToggle[aria-expanded="true"]{
  color:#0b0b0b;
  background:var(--lime);
}
.utilities .utility-label{
  min-height:20px;
  max-width:132px;
  color:#fffdf7;
  text-align:center;
  font:750 10px/1.15 Arial,sans-serif;
  text-transform:none;
}

.cal-overlay.overlay{
  z-index:1000;
  place-items:center;
  padding:14px;
  background:rgba(3,4,6,.78);
  backdrop-filter:blur(5px);
}
.cal-overlay.open{
  display:grid;
}
.cal-overlay .cal-modal-box.modal{
  width:min(940px,100%);
  max-width:940px;
  max-height:calc(100vh - 28px);
  margin:0;
  padding:0;
  overflow:auto;
  color:var(--ink);
  background:var(--surface);
  border:3px solid var(--ink);
  border-radius:0;
  box-shadow:10px 10px 0 var(--purple);
  font-family:Arial,sans-serif;
}
.cal-overlay .modal-head{
  position:sticky;
  top:0;
  z-index:2;
  min-height:58px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  color:var(--ink);
  background:var(--surface-2);
  border-bottom:3px solid var(--ink);
}
.cal-overlay .cal-modal-title{
  margin:0;
  color:var(--ink);
  font-size:18px;
  letter-spacing:0;
  text-transform:none;
}
.cal-overlay .cal-close-btn{
  position:static;
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  margin-left:auto;
  padding:0;
  display:grid;
  place-items:center;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  box-shadow:var(--shadow-sm);
  font:900 22px/1 Arial,sans-serif;
}
.cal-overlay .modal-body{
  padding:15px;
}
.cal-overlay .calibration-help{
  margin:0 0 12px;
  color:var(--muted);
  font:700 11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;
}
#manualCalModal .gesture-controls.manual-grid{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  display:grid;
  gap:9px;
  background:transparent;
  border:0;
  box-shadow:none;
}
#manualCalModal .gesture-row{
  width:100%;
  min-height:0;
  margin:0;
  padding:9px;
  color:var(--ink);
  background:var(--surface-2);
  border:1.5px solid var(--ink);
  border-radius:0;
}
#manualCalModal .gesture-row:not(.mcal-noterange-row){
  display:grid;
  grid-template-columns:100px 62px minmax(80px,1fr) minmax(80px,1fr) 136px;
  gap:8px;
  align-items:center;
}
#manualCalModal .gesture-name{
  color:var(--ink);
  font:800 12px/1 Arial,sans-serif;
}
#manualCalModal .gesture-value{
  min-height:36px;
  display:grid;
  place-items:center;
  color:var(--lime);
  background:#0b0b0b;
  font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
#manualCalModal input[type="number"],
#manualCalModal select{
  min-width:0;
  height:36px;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  border-radius:0;
  padding:0 10px;
  font:750 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
#manualCalModal input[type="number"]{
  appearance:textfield;
  -moz-appearance:textfield;
}
#manualCalModal input[type="number"]::-webkit-inner-spin-button,
#manualCalModal input[type="number"]::-webkit-outer-spin-button{
  margin:0;
  appearance:none;
  -webkit-appearance:none;
}
#manualCalModal .gesture-row:not(.mcal-noterange-row) .toggle-button{
  width:100%;
  min-width:0;
  min-height:36px;
  padding:0 10px;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  box-shadow:var(--shadow-sm);
}
#manualCalModal .gesture-row:not(.mcal-noterange-row) .toggle-button.active,
#manualCalModal .gesture-row:not(.mcal-noterange-row) .toggle-button[aria-pressed="true"]{
  color:#0b0b0b;
  background:var(--lime);
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--ink);
}
#manualCalModal .mcal-noterange-row{
  display:grid;
  grid-template-columns:100px 120px minmax(0,1fr);
  gap:8px;
  align-items:center;
  margin-top:-9px;
  border-top:0;
}
#manualCalModal .mcal-fullrange-lbl{
  min-height:36px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 8px;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
#manualCalModal .mcal-fullrange-lbl input{
  width:18px;
  height:18px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  background:var(--surface-3);
  border:2px solid var(--ink);
  border-radius:0;
}
#manualCalModal .mcal-fullrange-lbl input:checked{
  background:var(--lime);
  box-shadow:inset 0 0 0 4px var(--surface);
}
#manualCalModal .mcal-fullrange-lbl:has(input:checked){
  background:color-mix(in srgb,var(--lime) 24%,var(--surface));
}
#manualCalModal .mcal-customrange{
  min-width:0;
  display:none;
  grid-template-columns:minmax(54px,1fr) 48px auto minmax(54px,1fr) 48px;
  gap:5px;
}
#manualCalModal .mcal-customrange[style*="flex"]{
  display:grid!important;
}

#autoCalModal .wizard-step.active{
  color:var(--ink);
}
#autoCalModal .wizard-step.active:not(#wiz-step-range):not(#wiz-step-7){
  display:grid;
  grid-template-columns:minmax(260px,.9fr) minmax(0,1fr);
  grid-template-areas:
    "demo progress"
    "demo instruction"
    "demo status"
    "demo capture"
    "demo timeout"
    "demo actions";
  gap:8px 15px;
  align-items:center;
}
#autoCalModal .wizard-demo-wrap{
  grid-area:demo;
  width:100%;
  margin:0;
  padding:0;
  align-self:stretch;
  display:grid;
  place-items:center;
  background:#0b0b0b;
  border:2px solid var(--ink);
  border-radius:0;
}
#autoCalModal .wizard-demo{
  width:100%;
  max-height:none;
  aspect-ratio:800/452;
  object-fit:cover;
  background:#0b0b0b;
  border:0;
  border-radius:0;
}
#autoCalModal .wizard-progress{
  grid-area:progress;
  margin:0;
  color:var(--muted);
  font:850 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;
}
#autoCalModal .wizard-instruction{
  grid-area:instruction;
  margin:0;
  padding:0;
  color:var(--ink);
  background:transparent;
  border:0;
  border-radius:0;
  font:900 18px/1.25 Arial,sans-serif;
}
#autoCalModal .wizard-status{
  grid-area:status;
  min-height:0;
  margin:4px 0 0;
  color:var(--purple);
  font:850 13px/1.2 Arial,sans-serif;
}
#autoCalModal .wizard-bar-wrap{
  grid-area:capture;
  width:100%;
  height:12px;
  margin:2px 0 0;
  background:var(--surface-3);
  border:2px solid var(--ink);
  border-radius:0;
}
#autoCalModal .wizard-bar{
  height:100%;
  background:var(--lime);
  border-radius:0;
}
#autoCalModal .wizard-timeout-wrap{
  grid-area:timeout;
  width:100%;
  height:6px;
  margin:0;
  background:var(--surface-3);
  border:1px solid var(--ink);
}
#autoCalModal .wizard-buttons{
  grid-area:actions;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  margin-top:6px;
}
#autoCalModal .wizard-btn{
  min-height:42px;
  padding:0 13px;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  border-radius:0;
  box-shadow:var(--shadow-sm);
  font-weight:850;
}
#autoCalModal .wizard-btn.primary{
  color:#0b0b0b;
  background:var(--lime);
}
#autoCalModal #wiz-range-full-btn.active,
#autoCalModal #wiz-range-full-btn[aria-pressed="true"],
#autoCalModal #wiz-range-custom-btn.active,
#autoCalModal #wiz-range-custom-btn[aria-pressed="true"]{
  color:#0b0b0b;
  background:var(--lime);
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--ink);
}
#autoCalModal .wizard-btn.danger{
  color:#fff;
  background:var(--red);
}
#autoCalModal #wiz-step-range.active,
#autoCalModal #wiz-step-7.active{
  display:block;
}
#autoCalModal .wizard-range-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:start;
}
#autoCalModal .wizard-range-endpoint{
  min-width:0;
  display:grid;
  gap:7px;
  padding:10px;
  color:var(--ink);
  background:var(--surface-2);
  border:2px solid var(--ink);
}
#autoCalModal .wizard-range-endpoint-label{
  display:block;
  color:var(--muted);
  font:900 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;
}
#autoCalModal .wizard-range-endpoint-fields{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(64px,1fr) 58px;
  gap:7px;
}
#autoCalModal .wizard-range-endpoint-fields select,
#autoCalModal .wizard-range-endpoint-fields input{
  width:100%!important;
  min-width:0;
}

.workspace .performance-range-piano-wrap{
  position:relative;
}
.workspace .performance-range-navigation{
  margin-bottom:10px;
}
.workspace .performance-range-navigation .octave-display{
  color:var(--ink);
}
.workspace .performance-range-piano .performance-range-key{
  pointer-events:auto;
}
.workspace .performance-range-key.anchor{
  outline:4px solid var(--orange);
  outline-offset:-4px;
}
.workspace .performance-range-endpoints{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 58px;
  gap:8px;
  align-items:center;
  margin-top:10px;
}
.workspace .performance-range-endpoints output{
  color:var(--ink);
  text-align:center;
  font:850 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.workspace .performance-range-readout{
  position:static;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  overflow:visible;
  clip:auto;
  white-space:normal;
  color:var(--muted);
  text-align:center;
  font:750 10px/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;
}

.workspace .harmonic-wheel{
  --wheel-target-radius:135px;
  --wheel-bridge-radius:95px;
  --wheel-companion-radius:60px;
  width:min(100%,340px);
  aspect-ratio:1;
  justify-self:center;
  position:relative;
  overflow:hidden;
  border:3px solid var(--ink);
  border-radius:50%;
  background:radial-gradient(circle,var(--surface) 0 24%,var(--surface-2) 24.5% 51%,var(--surface) 51.5%);
  box-shadow:var(--shadow-sm);
}
.workspace .performance-wheel-node{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:48px;
  height:48px;
  min-width:48px;
  min-height:48px;
  margin:-24px;
  padding:2px;
  display:grid;
  place-items:center;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  border-radius:50%!important;
  box-shadow:none;
  font:900 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  transform:rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
}
.workspace .performance-wheel-node[data-layer="bridge"]{
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  margin:-21px;
  color:#0b0b0b;
  background:var(--orange);
}
.workspace .performance-wheel-node[data-layer="companion"]{
  width:38px;
  height:38px;
  min-width:38px;
  min-height:38px;
  margin:-19px;
  color:#fffdf7;
  background:var(--purple);
}
.workspace .performance-wheel-node.active{
  color:#fffdf7;
  background:var(--purple);
  outline:3px solid var(--cyan);
  outline-offset:1px;
}
.workspace .performance-wheel-node.hit{
  z-index:5;
  color:#0b0b0b;
  background:var(--orange);
  animation:mmfWheelNodeHit 420ms cubic-bezier(.16,.82,.2,1);
}
.workspace .performance-wheel-node.hit::after{
  content:"";
  position:absolute;
  inset:-7px;
  border:3px solid var(--orange);
  border-radius:50%;
  pointer-events:none;
  animation:mmfWheelNodeRing 420ms ease-out forwards;
}
.workspace .performance-inline-field{
  min-width:84px;
  display:grid;
  gap:4px;
  color:var(--muted);
  font:800 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;
}
.workspace .performance-inline-field .dropdown{
  min-width:84px;
}
@keyframes mmfWheelNodeHit{
  0%{filter:brightness(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--orange) 74%,transparent)}
  38%{filter:brightness(1.18);box-shadow:0 0 18px 7px color-mix(in srgb,var(--orange) 62%,transparent)}
  100%{filter:brightness(1);box-shadow:0 0 0 0 transparent}
}
@keyframes mmfWheelNodeRing{
  0%{opacity:.9;transform:scale(.72)}
  100%{opacity:0;transform:scale(1.7)}
}
.workspace button.wheel-center{
  z-index:4;
  width:88px;
  height:88px;
  min-width:88px;
  min-height:88px;
  padding:6px;
  color:#0b0b0b;
  background:var(--lime);
  border:3px solid #0b0b0b;
  border-radius:50%!important;
  box-shadow:none;
  font:950 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  cursor:pointer;
}
.workspace .wheel-line{
  padding:9px;
  color:var(--ink);
  background:var(--surface-2);
  border:1.5px solid var(--ink);
}
.workspace .wheel-line span{
  display:block;
  color:var(--muted);
  font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;
}

@media(max-width:680px){
  .cal-overlay .cal-modal-box.modal{
    max-height:calc(100vh - 16px);
  }
  #manualCalModal .gesture-row:not(.mcal-noterange-row){
    grid-template-columns:84px 54px minmax(72px,1fr) minmax(72px,1fr);
  }
  #manualCalModal .gesture-row:not(.mcal-noterange-row) .toggle-button{
    grid-column:1/-1;
  }
  #manualCalModal .mcal-noterange-row{
    grid-template-columns:84px minmax(100px,1fr);
  }
  #manualCalModal .mcal-customrange{
    grid-column:1/-1;
  }
  #autoCalModal .wizard-step.active:not(#wiz-step-range):not(#wiz-step-7){
    grid-template-columns:1fr;
    grid-template-areas:
      "demo"
      "progress"
      "instruction"
      "status"
      "capture"
      "timeout"
      "actions";
  }
  .workspace .harmonic-wheel{
    --wheel-target-radius:118px;
    --wheel-bridge-radius:82px;
    --wheel-companion-radius:52px;
    width:min(100%,300px);
  }
  .workspace .performance-wheel-node{
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    margin:-22px;
  }
  .workspace .performance-range-navigation .seg{
    width:46px;
    min-width:46px;
    flex:0 0 46px;
  }
  #autoCalModal .wizard-range-row{
    grid-template-columns:1fr;
  }
  .utilities .utility-toolbar{
    gap:16px 4px;
  }
}

@media(prefers-reduced-motion:reduce){
  .workspace .performance-wheel-node,
  .workspace .harmonic-wheel{
    transition:none;
  }
  .workspace .percussion-viz i.hit,
  .workspace .percussion-randomize-button.is-rolling svg,
  .workspace .performance-wheel-node.hit,
  .workspace .performance-wheel-node.hit::after{
    animation:none;
  }
  .workspace .percussion-ripple{display:none}
}

/* Focused interaction-quality corrections: permissions, mappings, Expression and tutorial. */
body.mmf-main-page #mmfTooltipPortal{
  padding:7px 10px;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--purple);
  border-radius:0;
  box-shadow:3px 3px 0 var(--ink);
  font:750 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
}
body.mmf-main-page .toggle-button:hover,
body.mmf-main-page .mode-button:hover,
body.mmf-main-page .utility-button:hover,
body.mmf-main-page .cal-action-btn:hover,
body.mmf-main-page .wizard-btn:hover,
body.mmf-main-page #networkConsoleBtn:hover,
body.mmf-main-page .gesture-calibrate-btn:hover,
body.mmf-main-page .percussion-sample-trigger:hover,
body.mmf-main-page .percussion-sample-select:hover,
body.mmf-main-page .percussion-sample-preview:hover{
  z-index:auto!important;
  filter:none!important;
  color:var(--ink);
  background:color-mix(in srgb,var(--purple) 14%,var(--surface));
  border-color:var(--purple);
  transform:translate(-1px,-1px);
}
body.mmf-main-page .toggle-button.active:hover,
body.mmf-main-page .toggle-button[aria-pressed="true"]:hover,
body.mmf-main-page .gesture-mappings .sample-action[aria-pressed="true"]:hover{
  color:#0b0b0b;
  background:var(--channel,var(--lime));
  border-color:var(--ink);
}

#videoContainer .camera-tools{
  position:absolute;
  z-index:40;
  top:12px;
  right:12px;
  display:flex;
  gap:8px;
}
#videoContainer .camera-tools .icon-btn{
  width:44px;
  height:44px;
  min-width:44px;
  padding:0;
  color:#fffdf7;
  background:rgba(11,11,11,.78);
  border:2px solid #fffdf7;
  box-shadow:3px 3px 0 rgba(0,0,0,.75);
}
#videoContainer .camera-tools .icon-btn[aria-pressed="true"]{
  color:#0b0b0b;
  background:var(--cyan);
  border-color:#0b0b0b;
}
#videoContainer .camera-tools .icon-btn:disabled{opacity:.6;cursor:progress}
#videoContainer .camera-tools .icon-btn.mmf-attention-pulse{
  animation:mmf-permission-pulse 720ms ease-in-out 3;
}
.participant-permission-action.mmf-attention-pulse{
  animation:mmf-permission-pulse 720ms ease-in-out 3;
}
#videoContainer .camera-tools .icon-btn.mmf-attention-static{
  border-color:var(--lime);
  box-shadow:0 0 0 3px var(--lime),3px 3px 0 rgba(0,0,0,.75);
}
.participant-permission-action.mmf-attention-static{
  border-color:var(--lime);
  box-shadow:0 0 0 3px var(--lime),3px 3px 0 rgba(0,0,0,.75);
}
.face-loading-overlay{pointer-events:none}
.face-loading-overlay .face-loading-card{pointer-events:auto}
.face-loading-overlay.camera-error .face-loading-card{pointer-events:auto}
.face-loading-state-icon{display:none;width:52px;height:52px;color:var(--lime)}
.face-loading-overlay.camera-off .face-loading-spinner{display:none}
.face-loading-overlay.camera-off .face-loading-state-icon{display:block}
.face-loading-overlay.camera-off .face-loading-card{border-color:var(--lime);box-shadow:7px 7px 0 var(--lime)}
.midi-status .status-copy{grid-column:1/-1;grid-row:2;min-height:18px;display:flex;align-items:center;white-space:pre-line}
@keyframes mmf-permission-pulse{
  0%,100%{box-shadow:3px 3px 0 rgba(0,0,0,.75)}
  50%{box-shadow:0 0 0 4px var(--lime),3px 3px 0 rgba(0,0,0,.75)}
}
@media(prefers-reduced-motion:reduce){
  #videoContainer .camera-tools .icon-btn.mmf-attention-pulse{animation:none}
  .participant-permission-action.mmf-attention-pulse{animation:none}
  .face-loading-spinner{animation:none!important}
}

body[data-mode="percussion"] .gesture-mappings .gesture-summary-header,
body[data-mode="percussion"] .gesture-mappings .gesture-summary-row{
  grid-template-columns:minmax(128px,1fr) 54px 54px 58px repeat(5,48px) minmax(220px,1fr);
  min-width:886px;
}
.gesture-mappings .percussion-actions-cell{
  grid-template-columns:44px minmax(0,1fr);
  gap:9px;
}
.gesture-mappings .percussion-actions-cell .sample-action{
  width:44px;
  height:44px;
  min-width:44px;
  padding:0;
  display:grid;
  place-items:center;
  font-size:0;
}
.gesture-mappings .percussion-actions-cell .sample-action svg{width:22px;height:22px}
.gesture-mappings .percussion-sample-control{width:100%;min-width:0}
.gesture-mappings .percussion-sample-trigger{
  width:100%;
  min-width:0;
  max-width:none;
  min-height:44px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 20px;
  align-items:center;
  gap:7px;
  padding:0 10px;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 #000;
  text-align:left;
}
.percussion-sample-current{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:750 10px/1.15 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.percussion-sample-chevron{width:18px;height:18px}
.percussion-sample-trigger[data-loading="true"] .percussion-sample-current{color:var(--muted)}

@media(max-width:900px){
  .gesture-mappings .gesture-summary{padding-inline:8px;overflow:visible}
  .gesture-mappings .gesture-summary-header{display:none}
  .gesture-mappings .gesture-summary-row,
  body[data-mode="percussion"] .gesture-mappings .gesture-summary-row{
    min-width:0!important;
    grid-template-columns:repeat(3,minmax(44px,1fr))!important;
    gap:8px;
  }
  .gesture-mappings .gesture-summary-name{grid-column:1/-1}
  .gesture-mappings .gesture-summary-value,
  .gesture-mappings .gesture-midi-val,
  .gesture-mappings .gesture-note-name{grid-column:span 1}
  .gesture-mappings .gesture-summary-row .toggle-button,
  .gesture-mappings .gesture-calibrate-btn{justify-self:center}
  .gesture-mappings .percussion-actions-cell{
    grid-column:span 3;
    width:100%;
    grid-template-columns:44px minmax(0,1fr);
  }
  .gesture-mappings .sample-action,
  .gesture-mappings .percussion-sample-control{justify-self:stretch;width:100%}
}

@media(max-width:1100px){
  .workspace .wheel-wrap{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:820px){
  .workspace{grid-template-columns:minmax(0,1fr)}
}

body.mmf-main-page .percussion-sample-menu{
  padding:12px;
  color:var(--ink);
  background:var(--surface);
  border:3px solid var(--ink);
  box-shadow:7px 7px 0 var(--purple);
}
body.mmf-main-page .percussion-sample-group-title{
  margin:12px 0 7px;
  padding-top:9px;
  color:var(--muted);
  border-top:1px solid var(--hair);
  font:850 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
body.mmf-main-page .percussion-sample-option{
  gap:8px;
  margin-bottom:7px;
  padding:6px;
  background:var(--surface-2);
  border:2px solid transparent;
}
body.mmf-main-page .percussion-sample-option.selected{
  color:var(--ink);
  background:color-mix(in srgb,var(--cyan) 18%,var(--surface));
  border-color:var(--purple);
}
body.mmf-main-page .percussion-sample-select,
body.mmf-main-page .percussion-sample-preview{
  min-height:40px;
  padding:0 10px;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  border-radius:0;
  box-shadow:3px 3px 0 var(--ink);
  font:750 10px/1.15 ui-monospace,SFMono-Regular,Menlo,monospace;
}

.expression-panel .velocity-automatic-controls{
  grid-template-columns:96px minmax(130px,1fr) 42px;
}
.expression-panel .expression-advanced{padding-top:7px}
.expression-panel .expression-advanced > summary{min-height:34px}
.expression-panel .expression-advanced select,
.expression-panel #velocityCurve{
  width:100%;
  min-width:160px;
  min-height:42px;
  padding:0 34px 0 10px;
  color:var(--ink);
  background-color:var(--surface);
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
}
.expression-panel .squint-control-panel{
  margin-top:13px;
  padding:11px;
  background:var(--surface-2);
  border:2px solid var(--ink);
}
.expression-panel .velocity-squint-controls.squint-control-panel{
  display:block;
  grid-template-columns:none;
}
.expression-panel .squint-live-row{
  display:grid;
  grid-template-columns:104px minmax(120px,1fr) 40px;
  gap:9px;
  align-items:center;
  padding-bottom:10px;
  border-bottom:1px solid var(--hair);
}
.expression-panel .squint-live-row label,
.expression-panel .squint-settings-grid label{
  color:var(--ink);
  font:750 10px/1.15 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.expression-panel .squint-live-row output{
  color:var(--purple);
  text-align:right;
  font:900 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.expression-panel .squint-settings-grid{
  display:grid;
  grid-template-columns:104px minmax(130px,1fr);
  gap:9px;
  align-items:center;
  margin-top:10px;
}
.expression-panel .squint-settings-grid .slider,
.expression-panel .squint-settings-grid select,
.expression-panel .squint-settings-grid input[type="number"]{
  width:100%;
  min-width:0;
}
.expression-panel .squint-settings-grid select,
.expression-panel .squint-settings-grid input[type="number"]{
  min-height:40px;
  padding:0 10px;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
}
.expression-panel .squint-realtime-slider{
  pointer-events:none;
  accent-color:var(--purple);
}
.expression-panel #velocitySquintMonitor,
.expression-panel #dynamicsSquintMonitor{
  display:block;
  margin-top:9px;
  color:var(--muted);
  font:750 9px/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.expression-panel .dynamics-control-grid{
  display:grid;
  grid-template-columns:104px minmax(130px,1fr);
  gap:9px;
  align-items:center;
  margin-top:13px;
}
.expression-panel .dynamics-control-grid > .squint-control-panel,
.expression-panel .dynamics-control-grid > output{grid-column:1/-1}

body.mmf-main-page #instructionModal{
  position:fixed;
  inset:0;
  z-index:19000;
  overflow:auto;
  padding:18px 12px;
  color:var(--ink);
  background:rgba(7,8,11,.76);
  backdrop-filter:blur(5px);
}
body.mmf-main-page .cal-overlay.overlay{
  z-index:19000;
}
body.mmf-main-page #instructionModalContent{
  width:min(980px,100%);
  max-width:none;
  margin:0 auto;
  padding:0;
  overflow:hidden;
  color:var(--ink);
  background:var(--surface);
  border:3px solid var(--ink);
  box-shadow:10px 10px 0 var(--purple);
  text-align:left;
}
.tutorial-head{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 16px;
  background:var(--surface-2);
  border-bottom:3px solid var(--ink);
}
.tutorial-head h2{margin:2px 0 0;font-size:clamp(22px,4vw,34px);line-height:1}
.tutorial-kicker{
  color:var(--purple);
  font:900 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;
  letter-spacing:.12em;
}
body.mmf-main-page #closeModalButton{
  position:static;
  width:44px;
  min-width:44px;
  height:44px;
  padding:0;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  font-size:24px;
}
.tutorial-lead{
  max-width:760px;
  margin:0;
  padding:18px 16px 4px;
  color:var(--muted);
  font-size:17px;
  font-weight:750;
}
.tutorial-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:16px;
}
.tutorial-card{
  position:relative;
  min-height:230px;
  padding:18px;
  background:var(--surface-2);
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
.tutorial-number{
  display:inline-grid;
  place-items:center;
  width:38px;
  height:30px;
  color:#0b0b0b;
  background:var(--cyan);
  border:2px solid #0b0b0b;
  font:950 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.tutorial-card:nth-child(2) .tutorial-number{background:var(--orange)}
.tutorial-card:nth-child(3) .tutorial-number{background:var(--lime)}
.tutorial-card:nth-child(4) .tutorial-number{background:var(--purple);color:#fff}
.tutorial-card h3{margin:12px 0 7px;font-size:18px}
.tutorial-card ul,.tutorial-card ol{margin:0;padding-left:20px}
.tutorial-card li{margin:8px 0;color:var(--muted)}
.tutorial-card strong{color:var(--ink)}
.tutorial-footer{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  color:var(--muted);
  background:var(--surface-3);
  border-top:2px solid var(--ink);
  font-size:11px;
}
.tutorial-footer a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--ink);
  font-weight:850;
}

body.mmf-main-page #presentationOverlay{
  position:fixed;
  inset:0;
  z-index:19000;
  grid-template-rows:auto 1fr;
  color:#fffdf7;
  background:#050608;
}
body.mmf-main-page .presentation-stage{
  position:relative;
  min-height:0;
  margin:0 14px 14px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%,rgba(118,87,255,.23),transparent 30%),
    #080a0d;
  border:2px solid #fffdf7;
}
body.mmf-main-page #presentationCanvas{
  width:100%;
  height:100%;
  display:block;
}

.workspace .shared-instrument-control{
  grid-template-columns:112px minmax(180px,1fr) auto;
}
.workspace .shared-instrument-control .instrument-load-status{
  grid-column:2/-1;
}
.audio-quality-control{
  min-width:96px;max-width:118px;margin:0;padding:0;border:0
}
.audio-quality-control legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.audio-quality-toggle{position:relative;width:100%;min-height:44px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:6px;margin:0;padding:6px 9px 8px;color:var(--ink);background:var(--surface);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer}
.audio-quality-title{overflow:hidden;text-align:left;font:800 8px/1.05 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}
.audio-quality-toggle strong{font:950 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.audio-quality-control[data-quality="hd"] .audio-quality-toggle{color:#0b0b0b;background:var(--lime)}
.audio-quality-toggle:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.audio-quality-toggle:disabled{cursor:progress;opacity:1}
.audio-quality-spinner{width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:mmf-audio-quality-spin .7s linear infinite}
.audio-quality-progress{position:absolute;left:5px;right:5px;bottom:3px;height:3px;overflow:hidden;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.audio-quality-progress>i{display:block;width:4%;height:100%;background:var(--cyan);transition:width .16s linear}
@keyframes mmf-audio-quality-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.audio-quality-spinner{animation:none;border-right-color:currentColor}.audio-quality-progress>i{transition:none}}
.instrument-load-status[data-state="loading"]{padding:6px 9px;color:#0b0b0b!important;background:var(--lime);border:2px solid var(--ink)}
.workspace .shared-instrument-control select.dropdown{
  width:100%;
  min-height:42px;
  padding:0 36px 0 11px;
  color:var(--ink);
  background-color:var(--surface);
  border:2px solid var(--ink);
  border-radius:0;
  box-shadow:3px 3px 0 var(--ink);
  font:800 11px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.instrument-octave-controls{
  display:grid;
  grid-template-columns:44px 38px 44px;
  align-items:center;
  gap:5px;
}
.instrument-octave-controls .toggle-button{
  width:44px;
  min-width:44px;
  height:42px;
  min-height:42px;
  padding:0;
  font:950 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.instrument-octave-controls output{
  min-width:38px;
  color:var(--ink);
  text-align:center;
  font:950 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.performer-instrument-primary-host{
  margin:0 0 12px;
  padding:11px;
  background:var(--surface-2);
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
/* Keep advanced Performer options in normal flow so the ellipsis never covers
   the instrument selector in Grid, Wheel, or Pattern. */
.workspace .performance-advanced:not([open]){
  position:relative;
  top:auto;
  right:auto;
  margin:12px 0 0 auto;
}
.workspace .synth-routing-controls{
  grid-template-columns:96px minmax(150px,1fr) auto;
  align-items:center;
  gap:9px;
}
.workspace .synth-modulation-modes{
  display:grid;
  grid-template-columns:repeat(3,minmax(48px,1fr));
}
.workspace .synth-modulation-modes .toggle-button{
  min-width:48px;
  min-height:42px;
  padding:0 8px;
  font:900 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.workspace .synth-modulation-parameter{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:96px minmax(150px,1fr);
  align-items:center;
  gap:9px;
}
.workspace .synth-modulation-parameter[hidden]{display:none!important}
.workspace .synth-modulation-parameter input[type="range"]{width:100%}
.workspace .synth-scope-zoom{
  position:absolute;
  z-index:3;
  right:9px;
  bottom:9px;
  display:grid;
  grid-template-columns:42px 48px 42px;
  align-items:center;
  justify-content:end;
  gap:5px;
  padding:5px;
  color:#fffdf7;
  background:rgba(11,11,11,.86);
  border:2px solid #fffdf7;
  box-shadow:3px 3px 0 rgba(0,0,0,.72);
}
.workspace .synth-scope-zoom[hidden]{display:none!important}
.workspace .synth-scope-zoom .toggle-button{
  width:42px;
  min-width:42px;
  min-height:34px;
  padding:0;
  color:#0b0b0b;
  background:#fffdf7;
  border-color:#fffdf7;
  box-shadow:none;
}
.workspace .synth-scope-zoom output{
  text-align:center;
  font:900 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Native select menus retain their accessible platform behavior while their
   closed controls share the same hard-edged presentation as Sample/Trigger. */
body.mmf-main-page select.dropdown{
  width:100%;
  min-height:42px;
  padding:0 38px 0 11px;
  appearance:none;
  -webkit-appearance:none;
  color:var(--ink);
  background-color:var(--surface);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237657ff' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:18px 18px;
  border:2px solid var(--ink);
  border-radius:0;
  box-shadow:3px 3px 0 var(--ink);
  font:800 11px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
body.mmf-main-page select.dropdown:hover{
  color:var(--ink);
  background-color:color-mix(in srgb,var(--purple) 10%,var(--surface));
  border-color:var(--purple);
}
body.mmf-main-page select.dropdown:focus-visible{
  outline:3px solid var(--purple);
  outline-offset:3px;
}
body.mmf-main-page select.dropdown:disabled{opacity:.58;cursor:not-allowed}
body.mmf-main-page select.dropdown option{
  color:var(--ink);
  background:var(--surface);
  font:750 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
}

body.mmf-main-page dialog.expression-confirmation{
  width:min(470px,calc(100vw - 28px));
  max-width:none;
  margin:auto;
  padding:0;
  overflow:visible;
  color:var(--ink);
  background:var(--surface);
  border:3px solid var(--ink);
  border-radius:0;
  box-shadow:10px 10px 0 var(--purple);
}
body.mmf-main-page dialog.expression-confirmation::backdrop{
  background:color-mix(in srgb,#050608 78%,transparent);
  backdrop-filter:blur(2px);
}
body.mmf-main-page .expression-confirmation-head{
  display:grid;
  gap:7px;
  padding:16px 18px 14px;
  background:var(--surface-2);
  border-bottom:3px solid var(--ink);
}
body.mmf-main-page .expression-confirmation-kicker{
  color:var(--purple);
  font:950 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.13em;
  text-transform:uppercase;
}
body.mmf-main-page .expression-confirmation h3{
  margin:0;
  color:var(--ink);
  font-size:clamp(24px,5vw,34px);
  line-height:1;
}
body.mmf-main-page .expression-confirmation > p{
  margin:0;
  padding:19px 18px;
  color:var(--muted);
  font-size:15px;
  font-weight:750;
  line-height:1.45;
}
body.mmf-main-page .expression-confirmation-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:0 18px 20px;
}
body.mmf-main-page .expression-confirmation-actions .toggle-button{
  min-height:46px;
  color:var(--ink);
  background:var(--surface-2);
  border:2px solid var(--ink);
  border-radius:0;
  box-shadow:4px 4px 0 var(--ink);
  font:900 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
body.mmf-main-page .expression-confirmation-actions .expression-confirmation-primary{
  color:#0b0b0b;
  background:var(--lime);
}
@media(max-width:520px){
  body.mmf-main-page .expression-confirmation-actions{grid-template-columns:1fr}
}
#browserAudioMuteToggle[data-audio-state="blocked"]{
  outline:3px solid var(--orange);
  outline-offset:2px;
  animation:mmfAudioBlocked 1.2s steps(2,end) infinite;
}
@keyframes mmfAudioBlocked{
  0%,100%{box-shadow:4px 4px 0 var(--ink)}
  50%{box-shadow:4px 4px 0 var(--ink),0 0 0 5px color-mix(in srgb,var(--orange) 55%,transparent)}
}
.expression-panel .automatic-velocity-live{
  grid-column:1/-1!important;
  display:grid;
  grid-template-columns:96px minmax(130px,1fr) 42px;
  gap:8px;
  align-items:center;
  min-height:42px;
  padding:7px 0 10px;
  border-bottom:1px solid var(--hair);
}
.expression-panel .automatic-velocity-live > span:first-child{
  color:var(--muted);
  font:850 9px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;
}
.automatic-velocity-meter{
  --automatic-velocity:.275;
  position:relative;
  height:24px;
  overflow:hidden;
  background:
    repeating-linear-gradient(90deg,transparent 0 11px,color-mix(in srgb,var(--ink) 28%,transparent) 11px 12px),
    var(--surface-3);
  border:2px solid var(--ink);
}
.automatic-velocity-meter i{
  position:absolute;
  inset:0 auto 0 0;
  width:calc(var(--automatic-velocity) * 100%);
  background:linear-gradient(90deg,var(--purple),var(--cyan) 62%,var(--lime));
  border-right:2px solid var(--ink);
  transition:width 90ms linear;
}
.automatic-velocity-meter.is-triggered{
  animation:mmfAutomaticVelocityHit 260ms steps(2,end);
}
@keyframes mmfAutomaticVelocityHit{
  0%{box-shadow:0 0 0 0 var(--orange)}
  45%{box-shadow:0 0 0 5px color-mix(in srgb,var(--orange) 60%,transparent)}
  100%{box-shadow:0 0 0 0 transparent}
}

@media(max-width:680px){
  #videoContainer .camera-tools{top:9px;right:9px}
  #videoContainer .camera-tools .icon-btn{
    width:44px;
    height:44px;
    min-width:44px;
  }
  body.mmf-main-page summary{min-height:44px!important}
  body[data-mode="percussion"] .gesture-mappings .gesture-summary-header,
  body[data-mode="percussion"] .gesture-mappings .gesture-summary-row{
    min-width:0;
  }
  .gesture-mappings .percussion-actions-cell{
    grid-template-columns:44px minmax(0,1fr);
  }
  .expression-panel .velocity-automatic-controls,
  .expression-panel .squint-live-row,
  .expression-panel .squint-settings-grid,
  .expression-panel .dynamics-control-grid{
    grid-template-columns:92px minmax(0,1fr);
  }
  .workspace .shared-instrument-control{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .workspace .shared-instrument-control > label,
  .workspace .shared-instrument-control .instrument-load-status{
    grid-column:1/-1;
  }
  .workspace .shared-instrument-control select.dropdown{min-width:0}
  .workspace .performer-harmony-controls{grid-template-columns:1fr}
  .workspace .performance-record-context{grid-template-columns:auto minmax(0,1fr)}
  .workspace #performanceGridRecordClear{grid-column:1/-1}
  .expression-panel .automatic-velocity-live{
    grid-template-columns:92px minmax(0,1fr);
  }
  .expression-panel .automatic-velocity-live output{grid-column:2}
  .expression-panel .squint-live-row output{grid-column:2}
  .workspace .synth-routing-controls,
  .workspace .synth-modulation-parameter{
    grid-template-columns:1fr;
  }
  .workspace .synth-modulation-parameter{grid-column:auto}
  .workspace .synth-scope-zoom{justify-content:start}
  .expression-panel .vibrato-grid{grid-template-columns:1fr}
  .tutorial-grid{grid-template-columns:1fr}
  .tutorial-card{min-height:0}
}

@media (hover:none) and (pointer:coarse),
       (max-width:900px) and (max-height:520px){
  .workspace .shared-instrument-control{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .workspace .shared-instrument-control > label,
  .workspace .shared-instrument-control .instrument-load-status{
    grid-column:1/-1;
  }
  body.mmf-main-page button,
  body.mmf-main-page summary,
  body.mmf-main-page select,
  body.mmf-main-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]){
    min-height:44px!important;
  }
  body.mmf-main-page select,
  body.mmf-main-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]){
    font-size:16px;
  }
  body.mmf-main-page input[type="range"]{
    min-height:44px!important;
    height:44px!important;
  }
  body.mmf-main-page input[type="number"],
  body.mmf-main-page input[type="range"],
  body.mmf-main-page .performance-advanced > summary,
  body.mmf-main-page button{
    min-width:44px!important;
  }
}

/* Keep account-gate controls comfortably tappable on compact touch screens. */
body.mmf-main-page .homepage-auth-close{
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
}
body.mmf-main-page .homepage-auth-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
@media(max-height:520px){
  body.mmf-main-page .homepage-account-dialog,
  body.mmf-main-page .homepage-premium-dialog{
    align-content:start;
    overflow:auto;
    padding-top:max(10px,env(safe-area-inset-top));
    padding-bottom:max(10px,env(safe-area-inset-bottom));
  }
  body.mmf-main-page .homepage-auth-card{
    gap:8px;
    padding:14px;
  }
  body.mmf-main-page .homepage-auth-card h2{font-size:28px}
}

@media(prefers-reduced-motion:reduce){
  body.mmf-main-page #mmfTooltipPortal,
  body.mmf-main-page .toggle-button,
  body.mmf-main-page .gesture-calibrate-btn,
  body.mmf-main-page .percussion-sample-trigger{
    transition:none;
  }
  .automatic-velocity-meter,
  .automatic-velocity-meter.is-triggered{
    animation:none;
    transition:none;
  }
  .workspace .performance-record-indicator{animation:none}
  #browserAudioMuteToggle[data-audio-state="blocked"]{animation:none}
}

/* Shared Expression and Sound Controls composition. */
.expression-panel .expression-source-selector{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.expression-panel .expression-source-option{display:block;min-width:0}
.expression-panel .expression-source-button{
  width:100%;
  min-height:48px;
  height:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:7px 6px;
  font-size:12px;
  font-weight:850;
}
.expression-panel .expression-source-button span{font:inherit}
.expression-panel .expression-source-button svg{width:24px;height:24px}
.expression-panel .expression-source-button[aria-pressed="true"]{
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--ink);
}
.expression-panel .expression-advanced > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.expression-panel .expression-advanced > summary::after{content:'⌄';font-size:18px}
.expression-panel .expression-advanced[open] > summary::after{content:'⌃'}
.utilities .envelope-row .slider,
.utilities .effect-card .slider{min-height:44px;height:44px}
.utilities .effect-card .effect-amount-field{min-height:72px;align-items:center}
.utilities .effect-card .effect-value{font-variant-numeric:tabular-nums}
.utilities .utility-label{font-size:12px;line-height:1.2}
.utilities .effect-card{border:1.5px solid var(--hair);box-shadow:none}
.expression-panel .contextual-control-panel{border-width:1.5px;box-shadow:none}
@media(max-width:680px){
  .utilities .envelope-row{
    min-width:0!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px;
    padding:8px 0;
  }
  .utilities .envelope-row .gesture-name{grid-column:1}
  .utilities .envelope-row .envelope-value{grid-column:2}
  .utilities .envelope-row .slider{grid-column:1/-1;min-width:0!important}
  .utilities .envelope-row .small-btn{grid-row:auto;min-width:44px}
  .utilities .envelope-row .cc-display{position:static;grid-column:1/-1;width:auto}
  .utilities .effect-card .effect-amount-field{
    grid-template-columns:minmax(0,1fr) auto!important;
    min-height:0;
  }
  .utilities .effect-card .effect-amount-field label{grid-column:1}
  .utilities .effect-card .effect-amount-field .slider{grid-column:1/-1;min-width:0}
  .utilities .effect-card .effect-amount-field .effect-value{grid-column:2;grid-row:1}
  .expression-panel .expression-source-button{min-height:52px}
}

/* Final mobile header contract: menu + centered wordmark + account. */
.mobile-menu-toggle,.mobile-utility-menu{display:none}
@media(max-width:720px){
  .homepage-header{position:relative;grid-template-columns:48px minmax(0,1fr) 48px;min-height:64px;z-index:50}
  .homepage-header > .header-side:first-child{display:flex;align-items:center;justify-content:flex-start}
  .homepage-header .language-switcher-snes,.homepage-header #languageSwitcher,#themeToggle{display:none!important}
  .mobile-menu-toggle{display:grid;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;place-items:center}
  .mobile-menu-toggle svg{width:22px;height:22px}
  .homepage-header > #title.brand-logo-title{width:min(260px,100%);justify-self:center}
  .homepage-header .header-side.end{justify-content:flex-end}
  .mobile-utility-menu{position:absolute;top:calc(100% + 8px);left:0;display:grid;gap:12px;width:min(250px,calc(100vw - 20px));padding:14px;background:var(--surface);border:2px solid var(--ink);box-shadow:var(--shadow-md);z-index:100}
  .mobile-utility-menu[hidden]{display:none!important}
  .mobile-menu-section{display:grid;grid-template-columns:1fr repeat(2,44px);gap:8px;align-items:center}
  .mobile-menu-label{font:800 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}
  .mobile-language-choice{position:relative;display:grid;place-items:center;min-width:44px;min-height:44px;cursor:pointer}
  .mobile-language-choice input{position:absolute;opacity:0}
  .mobile-language-choice span{display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--ink);font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
  .mobile-language-choice input:checked + span{color:var(--page);background:var(--ink)}
  .mobile-menu-action{min-height:44px;width:100%;text-align:left}
  .participant-menu-session-details{padding:0;border:2px solid var(--ink);background:var(--surface-2)}
  .participant-menu-session-details>summary{min-height:44px;display:flex;align-items:center;padding:0 10px;cursor:pointer;font-weight:850;list-style:none}
  .participant-menu-session-details>summary::-webkit-details-marker{display:none}
  .participant-menu-session-details .participant-session-code{padding:0 10px 10px;overflow-wrap:anywhere}
}

/* Final instrument-workspace coherence. The mode editor, keyboard and
   Expression controls are one composition and always consume the same width. */
body.mmf-main-page .workspace{
  grid-template-columns:minmax(0,1fr);
}
body.mmf-main-page .workspace>.mode-panel{
  width:100%;
  min-width:0;
}
body.mmf-main-page .workspace .panel-body{
  width:100%;
  padding:16px;
}
body.mmf-main-page .performer-instrument-primary-host{
  width:100%;
  margin:0 0 14px;
  padding:13px;
  background:var(--surface-2);
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
body.mmf-main-page .performer-instrument-primary-host:empty{display:none}
body.mmf-main-page .workspace .shared-instrument-control{
  width:100%;
  grid-template-columns:112px minmax(180px,1fr) auto;
  align-items:center;
}
body.mmf-main-page .workspace .performer-toolbar{
  width:100%;
  padding:0;
}
body.mmf-main-page .workspace .performer-toolbar .rack-row{
  width:100%;
  grid-template-columns:112px minmax(0,1fr);
  min-height:54px;
}
body.mmf-main-page .workspace .performance-stage{
  width:100%;
  margin-top:14px;
  padding:13px;
  background:var(--surface-2);
  border:2px solid var(--ink);
}
body.mmf-main-page .workspace .performance-range-piano-wrap{
  width:100%;
}
body.mmf-main-page .workspace .performance-range-navigation{
  display:grid;
  grid-template-columns:44px minmax(90px,1fr) 44px;
  gap:7px;
  width:min(280px,100%);
  margin:0 auto 11px;
}
body.mmf-main-page .workspace .piano.performance-range-piano{
  width:100%;
  height:156px;
  overflow-x:auto;
  background:var(--surface-3);
  border:2px solid var(--ink);
}
body.mmf-main-page .workspace .performance-range-piano-track{
  min-width:100%;
  height:100%;
}
body.mmf-main-page .workspace .performance-range-key.white{
  height:100%;
  padding:0 2px 9px;
  align-items:flex-end;
  justify-content:center;
  color:var(--ink);
  background:var(--surface);
  border-right:2px solid var(--ink);
}
body.mmf-main-page .workspace .performance-range-key.black{
  height:62%;
  color:#fffdf7;
  background:var(--ink);
  border:2px solid var(--surface);
  border-top:0;
}
body.mmf-main-page .workspace .performance-range-key.in-range.white{
  background:linear-gradient(180deg,var(--lime),color-mix(in srgb,var(--lime) 58%,var(--surface)));
}
body.mmf-main-page .workspace .performance-range-key.in-range.black{
  background:color-mix(in srgb,var(--purple) 68%,var(--ink));
  border-color:var(--lime);
}
body.mmf-main-page .workspace .performance-range-key.boundary{
  outline:3px solid var(--orange);
  outline-offset:-3px;
}
body.mmf-main-page .workspace .performance-range-key-label{
  overflow:hidden;
  font:850 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:nowrap;
}
body.mmf-main-page .workspace .performance-range-endpoints{
  min-height:34px;
  grid-template-columns:60px minmax(0,1fr) 60px;
  margin-top:9px;
}
body.mmf-main-page .workspace .performance-range-readout{
  position:static;
  width:auto;
  height:auto;
  margin:0;
  overflow:visible;
  clip:auto;
  white-space:normal;
}
body.mmf-main-page .workspace .expression-panel-inline{
  width:100%;
  margin:18px 0 0;
  padding:0;
  background:var(--surface);
  border:0;
}
body.mmf-main-page .expression-panel .expression-section>summary{
  min-height:56px;
  padding:0 13px;
  background:var(--surface-2);
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
body.mmf-main-page .expression-panel .expression-heading{
  font-size:20px;
}
body.mmf-main-page .expression-panel .expression-groups{
  gap:0;
  margin-top:4px;
  padding:14px;
  background:var(--surface);
  border:2px solid var(--ink);
  border-top:0;
}
body.mmf-main-page .expression-panel .contextual-control-panel{
  margin:0;
  padding:13px;
  color:var(--ink);
  background:var(--surface);
  border:0;
  box-shadow:none;
}
body.mmf-main-page .expression-panel .contextual-control-heading{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  margin:0 0 11px;
  padding:0 0 10px;
  color:var(--ink);
  border-bottom:1px solid var(--hair);
  font:900 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;
}
body.mmf-main-page .expression-panel .expression-source-selector{
  gap:8px;
}
body.mmf-main-page .expression-panel .expression-source-button{
  min-height:70px;
  padding:8px;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
}
body.mmf-main-page .expression-panel .expression-source-button[aria-pressed="true"]{
  color:#0b0b0b;
  background:var(--lime);
}
body.mmf-main-page .expression-panel .velocity-automatic-controls{
  grid-template-columns:106px minmax(130px,1fr) 46px;
  gap:10px;
  margin-top:13px;
}
body.mmf-main-page .expression-panel .automatic-velocity-live{
  grid-template-columns:106px minmax(130px,1fr) 46px;
}
body.mmf-main-page .expression-panel .expression-help-copy{
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  gap:5px 16px;
  margin:0;
  padding:0 0 4px;
}
body.mmf-main-page .expression-panel .expression-context-help{
  margin:0;
  color:var(--muted);
  font-size:12px;
  font-weight:750;
  line-height:1.4;
}
body.mmf-main-page .expression-panel .velocity-automatic-controls>label{
  color:var(--ink);
}
body.mmf-main-page .expression-panel .velocity-automatic-controls>output{
  color:var(--ink);
  text-align:right;
  font-weight:900;
}
body.mmf-main-page .expression-panel .expression-advanced{
  padding-top:4px;
  border-top:1px solid var(--hair);
}
body.mmf-main-page .expression-panel .vibrato{
  margin-top:12px;
  padding:0!important;
  border:2px solid var(--ink)!important;
}
body.mmf-main-page .expression-panel .vibrato-summary{
  min-height:50px;
  padding:0 12px;
  font-size:13px;
}
body.mmf-main-page .expression-panel .vibrato-summary::before{
  order:3;
  margin-left:auto;
  width:auto;
}
body.mmf-main-page .expression-panel .vibrato-content{
  gap:11px;
  padding:0 12px 13px;
  border-top:1px solid var(--hair);
}
body.mmf-main-page .expression-panel .vibrato-top{
  justify-content:flex-start;
  padding-top:12px;
}
body.mmf-main-page .expression-panel .vibrato-toggle{
  min-width:142px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
body.mmf-main-page .expression-panel .vibrato-toggle strong{
  padding:5px 7px;
  color:#fffdf7;
  background:var(--ink);
  font:900 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
body.mmf-main-page .expression-panel #waveCanvas{
  width:100%;
  height:108px;
  background:var(--surface-2);
  border:2px solid var(--ink);
}
body.mmf-main-page .expression-panel .vibrato-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
@media(max-width:680px){
  body.mmf-main-page .workspace .panel-body{padding:11px}
  body.mmf-main-page .workspace .shared-instrument-control{
    grid-template-columns:minmax(0,1fr) auto;
  }
  body.mmf-main-page .workspace .shared-instrument-control>label{
    grid-column:1/-1;
  }
  body.mmf-main-page .workspace .performer-toolbar .rack-row{
    grid-template-columns:86px minmax(0,1fr);
  }
  body.mmf-main-page .workspace .piano.performance-range-piano{height:170px}
  body.mmf-main-page .expression-panel .velocity-automatic-controls{
    grid-template-columns:minmax(0,1fr) 48px;
    gap:7px 9px;
  }
  body.mmf-main-page .expression-panel .velocity-automatic-controls>label{
    grid-column:1/-1!important;
    margin-top:4px;
  }
  body.mmf-main-page .expression-panel .velocity-automatic-controls>.slider{
    grid-column:1!important;
  }
  body.mmf-main-page .expression-panel .velocity-automatic-controls>output{
    grid-column:2!important;
  }
  body.mmf-main-page .expression-panel .automatic-velocity-live{
    grid-column:1/-1!important;
    grid-template-columns:minmax(0,1fr) 48px;
  }
  body.mmf-main-page .expression-panel .automatic-velocity-live>span:first-child{
    grid-column:1/-1;
  }
  body.mmf-main-page .expression-panel .automatic-velocity-live>output{grid-column:2}
  body.mmf-main-page .expression-panel .vibrato-grid{grid-template-columns:1fr}
}
@media(max-width:460px){
  body.mmf-main-page .workspace .shared-instrument-control{
    grid-template-columns:minmax(0,1fr);
  }
  body.mmf-main-page .instrument-octave-controls{justify-self:start}
  body.mmf-main-page .workspace .performer-toolbar .rack-row{
    grid-template-columns:minmax(0,1fr);
  }
  body.mmf-main-page .workspace .performance-view-controls{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.mmf-main-page .expression-panel .expression-groups{padding:8px}
  body.mmf-main-page .expression-panel .expression-source-selector{gap:5px}
  body.mmf-main-page .expression-panel .expression-source-button{min-height:62px;padding-inline:5px}
}