:root{--panel:#151515;--panel2:#1d1d1d;--edge:#050505;--ink:#d6d6d1;--dim:#77766f;--line:#45433a;--step:#c69018;--hi:#f2c84b;--blue:#41479e}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background:#292929;color:var(--ink);font-family:Arial,sans-serif}.machine-shell{padding:20px;width:100%;overflow:auto}.machine{position:relative;margin:auto;width:1500px;height:820px;overflow:hidden;border:5px solid var(--edge);border-radius:8px;background:radial-gradient(circle at 20% 10%,#ffffff08,transparent 26%),linear-gradient(165deg,var(--panel2),var(--panel) 58%,#101010);box-shadow:inset 0 0 0 2px #2a2a2a,inset 0 0 28px #000a,0 16px 35px #0007}.brand{position:absolute;top:22px;left:28px;font-size:13px;letter-spacing:.2em;color:#969690}.brand small{letter-spacing:.1em;color:#686862}.master{position:absolute;top:42px;left:36%;display:flex;gap:35px;text-align:center;z-index:5}.master>div:first-child{width:110px}.master b,.swing b,h3{font-size:9px;letter-spacing:.16em;color:#9b998f}.knob{position:relative;width:72px;height:72px;margin:auto;border-radius:50%;background:radial-gradient(circle at 38% 32%,#353535 0 8%,#1a1a1a 35%,#090909 72%);border:3px solid #030303;box-shadow:inset 0 0 0 2px #343434,0 4px 8px #0008;cursor:ns-resize}.knob span,.mini-knob span{position:absolute;left:50%;top:50%;width:34%;height:3px;transform-origin:0 50%;background:#e8e5d5}.master input:not(#swing),.timing input,.editor .mini-knob+input{position:absolute;width:1px;height:1px;opacity:0}.master output,.timing output{display:block;font-size:9px;color:#888;margin-top:4px}.swing{padding-top:18px}.swing input{display:block;width:95px;margin-top:12px;accent-color:var(--step)}button,select{border:2px solid #050505;border-radius:2px;background:#27251e;color:#aaa79a;box-shadow:inset 0 0 0 1px #4f4b40}button{cursor:pointer}button.active{background:var(--step);color:#17130a;box-shadow:inset 0 0 0 1px var(--hi),0 0 7px #c6901866}.timing{position:absolute;top:35px;right:325px;width:260px;text-align:center;z-index:5}.timing h3{margin:0 0 8px}.timing button{height:25px;min-width:32px;margin:2px;font-size:10px}.timing>label{display:inline-flex;vertical-align:middle;flex-direction:column;align-items:center;margin-left:12px;font-size:7px;color:#888}.mini-knob{position:relative;width:35px;height:35px;border-radius:50%;border:2px solid #050505;background:radial-gradient(circle at 38% 32%,#393939 0 9%,#202020 42%,#0b0b0b 76%);box-shadow:inset 0 0 0 1px #555,0 2px 4px #000a;cursor:ns-resize}.mini-knob span{height:2px}.timing #randomTiming{vertical-align:top;margin-top:12px}#lattice{position:absolute;left:30px;top:145px;width:1120px;height:650px}#branches,#nodes{position:absolute;inset:0;width:1050px;height:650px}.branch{stroke:var(--line);stroke-width:2;opacity:.78}.branch-pulse{stroke:var(--hi);stroke-width:4;stroke-linecap:round;opacity:0;filter:drop-shadow(0 0 4px #f2c84bf2)}.node{position:absolute;transform:translate(-50%,-50%);min-width:55px;height:28px;padding:0 6px;font:9px monospace;background:#26241d;color:#bbb7aa}.node.start{border-color:#262a62;box-shadow:inset 0 0 0 1px #6269cc}.node.selected{outline:2px solid #777ff0}.node.playhead{background:var(--step);color:#17130a;box-shadow:0 0 16px #f2c84bf2}.node.latch{background:#5b4c20}.node.rest{color:#666;background:#1d1d1d}.editor{position:absolute;right:25px;top:155px;width:285px;height:625px;border-left:1px solid #30302b;padding-left:22px;text-align:center}.editor h3{margin:5px 0 8px}.editor>label{display:grid;grid-template-columns:75px 1fr;align-items:center;text-align:left;margin:5px 10px;font-size:8px;color:#888}.editor select{height:25px;padding:2px 5px}.types{display:flex;justify-content:center;gap:4px;margin:8px}.types button{font-size:8px;padding:5px 7px}.samples{display:flex;justify-content:center;gap:4px}.samples button{width:28px;height:23px;font-size:8px}.filter{margin:10px auto 5px}.filter label,.chorus label{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:7px;color:#888}.faders{display:flex;justify-content:center;gap:26px;margin:8px 0}.faders label{display:flex;flex-direction:column;gap:4px;font-size:7px;color:#888}.faders input{writing-mode:vertical-lr;direction:rtl;width:20px;height:85px}.faders label:nth-child(1) input{accent-color:#6d9b67}.faders label:nth-child(2) input{accent-color:#a65e58}.faders label:nth-child(3) input{accent-color:#c69018}.chorus{display:flex;justify-content:center;gap:22px}.wide{margin:8px;padding:5px 18px;font-size:8px}.transport{display:block;margin:12px auto;width:90px;height:45px;border:4px solid #030303;background:#202124;font-size:11px;letter-spacing:.1em}.transport[aria-pressed=true]{color:var(--hi);box-shadow:inset 0 0 0 2px #7b7460,0 0 10px #f2c84b33}#selectedLabel{display:block;font:12px monospace;color:var(--hi);margin-bottom:8px}

.transpose{display:flex;justify-content:center;gap:4px;margin:5px 0 8px}.transpose button{width:42px;height:23px;font-size:8px}.faders input{-webkit-appearance:slider-vertical;appearance:auto;padding:0;margin:0;background:transparent}.faders input::-webkit-slider-runnable-track{width:6px;border-radius:3px;border:1px solid #454545;background:#171717}.faders label:nth-child(1) input::-webkit-slider-runnable-track{background:#263a25}.faders label:nth-child(2) input::-webkit-slider-runnable-track{background:#402624}.faders label:nth-child(3) input::-webkit-slider-runnable-track{background:#463817}.faders input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:9px;margin-left:-7px;border-radius:2px;border:1px solid #eee;background:linear-gradient(#777,#454545);box-shadow:inset 0 1px rgba(255,255,255,.25),0 2px 3px rgba(0,0,0,.7)}.faders input::-moz-range-track{width:6px;border-radius:3px;border:1px solid #454545;background:#171717}.faders label:nth-child(1) input::-moz-range-track{background:#263a25}.faders label:nth-child(2) input::-moz-range-track{background:#402624}.faders label:nth-child(3) input::-moz-range-track{background:#463817}.faders input::-moz-range-thumb{width:18px;height:9px;border-radius:2px;border:1px solid #eee;background:linear-gradient(#777,#454545);box-shadow:inset 0 1px rgba(255,255,255,.25),0 2px 3px rgba(0,0,0,.7)}



/* V0.31: independent emergency FUAP control */
#fuapButton.fuap-button{
  position:absolute;
  top:28px;
  right:28px;
  width:118px;
  height:68px;
  z-index:50;
  display:block;
  margin:0;
  padding:0;
  border:4px solid #240000;
  border-radius:4px;
  background:#481010;
  color:#d9b4b4;
  font-size:19px;
  font-weight:bold;
  letter-spacing:.10em;
  box-shadow:inset 0 0 0 2px #7a2b2b,0 4px 9px #0009;
  cursor:pointer;
}
#fuapButton.fuap-button.active{
  background:#d51f1f;
  color:#fff3f3;
  border-color:#4c0000;
  box-shadow:inset 0 0 0 2px #ff6c6c,0 0 22px #ff1f1fcc,0 4px 9px #0009;
}
#fuapButton.fuap-button:active{transform:translateY(1px)}


/* SIZE LOCK: fixed desktop panel; smaller windows scroll instead of squeezing it. */
html,body{min-width:0;overflow:auto}
body{display:block;min-height:100vh}
.machine-shell{width:max-content;min-width:1540px;margin:0;padding:20px;overflow:visible}
.machine{width:1500px;height:820px;min-width:1500px;max-width:1500px;min-height:820px;max-height:820px;margin:0}


/* V0.33 — MIDI CLOCK */
#midiButton.midi-button{
  position:absolute;
  top:28px;
  right:158px;
  width:92px;
  height:68px;
  z-index:50;
  display:block;
  margin:0;
  padding:0;
  border:4px solid #050505;
  border-radius:4px;
  background:#202124;
  color:#cfcfc8;
  font-size:14px;
  font-weight:bold;
  letter-spacing:.12em;
  box-shadow:inset 0 0 0 2px #555,0 4px 9px #0009;
  cursor:pointer;
}
#midiButton.midi-button.clock-pulse{
  background:var(--step);
  color:#17130a;
  box-shadow:inset 0 0 0 2px var(--hi),0 0 18px #f2c84bd9,0 4px 9px #0009;
}
.midi-panel{
  display:none;
  position:absolute;
  top:105px;
  right:28px;
  width:300px;
  padding:14px;
  z-index:60;
  border:2px solid #050505;
  border-radius:6px;
  background:linear-gradient(#20201d,#11110f);
  box-shadow:inset 0 0 0 1px #4f4b40,0 12px 28px #000b;
}
.midi-panel.open{display:block}
.midi-title{
  margin-bottom:10px;
  color:var(--hi);
  font-size:10px;
  letter-spacing:.18em;
  text-align:center;
}
.midi-panel label{
  display:block;
  margin-bottom:4px;
  color:#8f8f8a;
  font-size:8px;
  letter-spacing:.14em;
}
#midiInput{
  width:100%;
  height:30px;
  background:#111;
  color:#d6d6d1;
  border:1px solid #4f4b40;
  margin-bottom:10px;
}
.midi-readout{
  font:11px/1.7 monospace;
  color:#8f8f8a;
}
.midi-readout strong{color:var(--hi);font-weight:normal}
.midi-note{
  margin-top:8px;
  color:#6f6d65;
  font-size:8px;
  line-height:1.4;
}

/* V0.34 — NMIDI v3 */
#nmidiMode{
  width:100%;
  height:30px;
  background:#111;
  color:#d6d6d1;
  border:1px solid #4f4b40;
  margin-bottom:10px;
}
.clock-divider{
  height:1px;
  background:#4b493f;
  margin:11px 0;
}
.midi-panel{width:330px}