:root {
  --panel: #151515;
  --panel2: #1c1c1c;
  --edge: #050505;
  --ink: #d6d6d1;
  --dim: #6d6d68;
  --line: #45433a;
  --track: #3f46b8;
  --track-hi: #7b7ff0;
  --step: #c69018;
  --step-hi: #f2c84b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #2b2b2b;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
}

.machine-shell { padding: 28px; width: max-content; }

.machine {
  position: relative;
  width: 1240px;
  height: 760px;
  min-height: 620px;
  overflow: hidden;
  border: 5px solid var(--edge);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.035), transparent 26%),
    linear-gradient(165deg, var(--panel2), var(--panel) 58%, #101010);
  box-shadow:
    inset 0 0 0 2px #2a2a2a,
    inset 0 0 28px rgba(0,0,0,.65),
    0 16px 35px rgba(0,0,0,.45);
}

.machine::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 4px);
}

.brand {
  position: absolute;
  top: 22px;
  left: 28px;
  font-size: 13px;
  letter-spacing: .22em;
  color: #969690;
}

.tempo-block {
  position: absolute;
  top: 42px;
  right: 54px;
  width: 142px;
  text-align: center;
  z-index: 8;
  user-select: none;
}

.tempo-block label {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: .12em;
}

.tempo-block output {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: #8f8f8a;
}

#tempo {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.knob {
  position: relative;
  width: 86px;
  height: 86px;
  margin: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #303030 0 8%, #1a1a1a 35%, #090909 72%);
  border: 3px solid #030303;
  box-shadow: inset 0 0 0 2px #343434, 0 4px 8px rgba(0,0,0,.55);
  cursor: ns-resize;
}

.knob::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.04);
  pointer-events: none;
}

.knob span {
  position: absolute;
  width: 30px;
  height: 3px;
  left: 43px;
  top: 40px;
  transform-origin: 0 50%;
  background: #e4e0c8;
  border-radius: 2px;
  box-shadow: 0 0 3px rgba(255,255,255,.25);
  pointer-events: none;
}

.tree-area {
  position: absolute;
  bottom: 116px;
  width: 200px;
  height: 430px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .20s ease, transform .26s ease, visibility 0s linear .26s;
  z-index: 3;
}

.tree-area.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.branches,
.nodes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.branch {
  stroke: var(--line);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: .72;
}

.branch-pulse {
  stroke: var(--step-hi);
  stroke-width: 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(242,200,75,.95));
}

.node {
  position: absolute;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border: 3px solid #050505;
  border-radius: 2px;
  background: #26241d;
  box-shadow: inset 0 0 0 2px #555146, 0 2px 4px rgba(0,0,0,.55);
  cursor: pointer;
}

.node:hover {
  box-shadow: inset 0 0 0 2px #6d6756, 0 2px 4px rgba(0,0,0,.55);
}

.node.active {
  background: var(--step);
  box-shadow: inset 0 0 0 2px var(--step-hi), 0 0 10px rgba(198,144,24,.55), 0 2px 4px rgba(0,0,0,.55);
}

.node.playhead {
  box-shadow: inset 0 0 0 2px #fff0a5, 0 0 16px rgba(242,200,75,.95), 0 2px 4px rgba(0,0,0,.55);
}

.node.playhead:not(.active) { background: #57491e; }

.track-row {
  position: absolute;
  left: 4%;
  right: 24%;
  bottom: 38px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 6;
}

.track-button {
  width: 62px;
  height: 52px;
  justify-self: center;
  border: 4px solid #030303;
  border-radius: 2px;
  background: #22232c;
  color: #cfcfc8;
  font-size: 18px;
  box-shadow: inset 0 0 0 2px #555, 0 3px 7px rgba(0,0,0,.6);
  cursor: pointer;
}

.track-button.tree-open {
  background: var(--track);
  color: white;
  box-shadow: inset 0 0 0 2px var(--track-hi), 0 0 13px rgba(82,88,205,.6), 0 3px 7px rgba(0,0,0,.6);
}

.track-button.has-pattern:not(.tree-open) {
  background: #292b55;
  color: #dddfff;
  box-shadow: inset 0 0 0 2px #565b9e, 0 3px 7px rgba(0,0,0,.6);
}

.track-button.tempo-flash:not(.tree-open) {
  background: var(--track-hi);
  color: white;
  box-shadow: inset 0 0 0 2px #aaaaff, 0 0 18px rgba(123,127,240,.95), 0 3px 7px rgba(0,0,0,.6);
}

.utility-column {
  position: absolute;
  right: 50px;
  bottom: 38px;
  width: 150px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.mute-block { text-align: center; }

.utility-label {
  margin-bottom: 5px;
  font-size: 10px;
  letter-spacing: .15em;
  color: #8f8f8a;
}

.mute-row { display: flex; gap: 5px; }

.mute-button {
  width: 26px;
  height: 23px;
  padding: 0;
  border: 3px solid #050505;
  border-radius: 2px;
  background: #27251e;
  color: #a9a79e;
  font-size: 10px;
  box-shadow: inset 0 0 0 1px #4f4b40;
  cursor: pointer;
}

.mute-button[aria-pressed="true"] {
  background: var(--step);
  color: #16130b;
  box-shadow: inset 0 0 0 1px var(--step-hi), 0 0 8px rgba(198,144,24,.45);
}

.transport-button {
  width: 82px;
  height: 52px;
  border: 4px solid #030303;
  border-radius: 2px;
  background: #202124;
  color: #cfcfc8;
  font-size: 12px;
  letter-spacing: .10em;
  box-shadow: inset 0 0 0 2px #555, 0 3px 7px rgba(0,0,0,.6);
  cursor: pointer;
}

.transport-button[aria-pressed="true"] {
  background: #303238;
  color: #f2c84b;
  box-shadow: inset 0 0 0 2px #7b7460, 0 0 10px rgba(242,200,75,.20), 0 3px 7px rgba(0,0,0,.6);
}



/* V0.6 controls */
.swing-block { margin-top: 13px; }
.swing-block label { margin: 0 0 4px; color:#aaa79a; }
#swing { width: 92px; accent-color: var(--step); }
#swingValue { margin-top: 1px; }

.tree-mode {
  position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  display:flex; gap:5px; align-items:center; white-space:nowrap;
  font-size:8px; letter-spacing:.09em; color:#77766f;
}
.tree-mode button {
  border:2px solid #050505; background:#27251e; color:#96938a;
  font-size:8px; padding:3px 5px; cursor:pointer; box-shadow:inset 0 0 0 1px #4f4b40;
}
.tree-mode button.active { background:var(--step); color:#17130a; box-shadow:inset 0 0 0 1px var(--step-hi),0 0 7px rgba(198,144,24,.4); }

.utility-column { width: 205px; right: 28px; gap:10px; }
.mixer { width:205px; text-align:center; }
.mixer-row-label,.mix-key { font-size:9px; letter-spacing:.13em; color:#77766f; margin-bottom:4px; }
.mix-key { margin:4px 0 0; font-size:7px; }
.channels { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
.channel { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; align-items:end; }
.channel-num { grid-column:1/-1; font-size:9px; color:#aaa79a; margin-bottom:1px; }
.channel label { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:7px; color:#77766f; }
.mix-slider {
  writing-mode: vertical-lr; direction: rtl;
  width: 12px; height: 74px; padding:0; margin:0;
  accent-color: var(--step);
}
.mute-row { gap:10px; }



/* V0.7: more tactile mixer, per-tree half time, and slightly raised track row */
.track-row { bottom: 56px; }
.tree-area { bottom: 134px; }
.utility-column { bottom: 40px; width: 230px; right: 18px; gap: 9px; }
.mixer { width: 230px; }
.channels { grid-template-columns: repeat(4, 1fr); gap: 7px; align-items:end; }
.channel { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
.channel-num { font-size:9px; color:#aaa79a; margin-bottom:0; }
.filter-label { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:7px; letter-spacing:.08em; color:#77766f; }
.filter-label > input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.filter-knob { position:relative; width:30px; height:30px; 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 rgba(0,0,0,.65); cursor:ns-resize; }
.filter-knob span { position:absolute; width:10px; height:2px; left:15px; top:13px; transform-origin:0 50%; transform:rotate(135deg); background:#d9d8d1; border-radius:2px; box-shadow:0 0 2px rgba(255,255,255,.25); }
.fader-grid { display:grid; grid-template-columns:repeat(2, 22px); gap:6px 5px; justify-content:center; }
.fader-grid label { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:7px; letter-spacing:.04em; color:#77766f; }
.mix-slider { writing-mode:vertical-lr; direction:rtl; width:20px; height:58px; padding:0; margin:0; background:transparent; }
.mix-slider.tune { accent-color:#6d9b67; }
.mix-slider.volume { accent-color:#a65e58; }
.mix-slider.pan { accent-color:#5d7fa8; }
.mix-slider.reverb { accent-color:#c69018; }

/* tactile WebKit faders */
.mix-slider::-webkit-slider-runnable-track { width:6px; border-radius:3px; background:#171717; border:1px solid #454545; }
.mix-slider.tune::-webkit-slider-runnable-track { background:#263a25; }
.mix-slider.volume::-webkit-slider-runnable-track { background:#402624; }
.mix-slider.pan::-webkit-slider-runnable-track { background:#243447; }
.mix-slider.reverb::-webkit-slider-runnable-track { background:#463817; }
.mix-slider::-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); }
.mix-slider { -webkit-appearance:slider-vertical; }

/* Firefox */
.mix-slider::-moz-range-track { width:6px; border-radius:3px; background:#171717; border:1px solid #454545; }
.mix-slider.tune::-moz-range-track { background:#263a25; }
.mix-slider.volume::-moz-range-track { background:#402624; }
.mix-slider.pan::-moz-range-track { background:#243447; }
.mix-slider.reverb::-moz-range-track { background:#463817; }
.mix-slider::-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); }

#swing { appearance:none; -webkit-appearance:none; height:7px; width:92px; border-radius:4px; background:#3e3217; border:1px solid #5b4a20; }
#swing::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:2px; border:1px solid #eee; background:linear-gradient(#777,#454545); box-shadow:0 1px 3px #000; }
#swing::-moz-range-thumb { width:14px; height:14px; border-radius:2px; border:1px solid #eee; background:linear-gradient(#777,#454545); box-shadow:0 1px 3px #000; }
#swing::-moz-range-track { height:7px; border-radius:4px; background:#3e3217; border:1px solid #5b4a20; }

.half-time { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:34px; height:27px; padding:0; border:3px solid #050505; border-radius:2px; background:#27251e; color:#aaa79e; font-size:13px; box-shadow:inset 0 0 0 1px #4f4b40; cursor:pointer; z-index:4; }
.half-time[aria-pressed="true"] { background:var(--step); color:#17130a; box-shadow:inset 0 0 0 1px var(--step-hi),0 0 9px rgba(198,144,24,.5); }



/* V0.9 sample selectors */
.sample-bank {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 0 0 8px;
}

.sample-label {
  font-size: 7px;
  letter-spacing: .13em;
  color: #77766f;
  margin-bottom: 1px;
}

.sample-button {
  width: 21px;
  height: 18px;
  padding: 0;
  border: 2px solid #050505;
  border-radius: 2px;
  background: #24241f;
  color: #8e8c84;
  font-size: 8px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px #4b4940;
  cursor: pointer;
}

.sample-button.selected {
  background: #34366f;
  color: #f0f0ff;
  box-shadow: inset 0 0 0 1px #777ce8, 0 0 7px rgba(103, 108, 220, .42);
}

.sample-button.missing:not(.selected) {
  opacity: .42;
}

.sample-button.missing.selected {
  opacity: .72;
}


/* V0.10: one global tune LFO with per-track routing */
.lfo-block {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid #35342f;
}

.lfo-title,
.lfo-route-label {
  font-size: 9px;
  letter-spacing: .14em;
  color: #aaa79a;
}

.lfo-knobs {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 6px;
}

.lfo-knobs label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 0;
  font-size: 7px;
  letter-spacing: .08em;
  color: #77766f;
}

.lfo-knobs input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.lfo-knobs output {
  margin: 0;
  font-size: 7px;
  color: #77766f;
}

.mini-knob {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #050505;
  background: radial-gradient(circle at 38% 32%, #444 0 8%, #242424 38%, #0b0b0b 74%);
  box-shadow: inset 0 0 0 1px #555, 0 2px 4px rgba(0,0,0,.65);
  cursor: ns-resize;
}

.mini-knob span {
  position: absolute;
  width: 12px;
  height: 2px;
  left: 17px;
  top: 15px;
  transform-origin: 0 50%;
  transform: rotate(135deg);
  background: #d9d8d1;
  border-radius: 2px;
}

.lfo-route-label {
  margin-top: 6px;
  font-size: 7px;
  color: #77766f;
}

.lfo-route-row {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 4px;
}

.lfo-route-button {
  width: 23px;
  height: 20px;
  padding: 0;
  border: 2px solid #050505;
  border-radius: 2px;
  background: #24241f;
  color: #8e8c84;
  font-size: 8px;
  box-shadow: inset 0 0 0 1px #4b4940;
  cursor: pointer;
}

.lfo-route-button[aria-pressed="true"] {
  background: #34366f;
  color: #f0f0ff;
  box-shadow: inset 0 0 0 1px #777ce8, 0 0 7px rgba(103,108,220,.42);
}



/* V0.11: global timing across the top; dedicated LFO bay at upper-right */
.master-controls {
  position: absolute;
  top: 28px;
  left: 34%;
  width: 330px;
  height: 145px;
  z-index: 8;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 42px;
  user-select: none;
}

.master-controls .tempo-block {
  position: relative;
  top: 0;
  right: auto;
  width: 118px;
}

.master-controls .knob {
  width: 82px;
  height: 82px;
}

.master-controls .knob span {
  left: 41px;
  top: 38px;
}

.master-controls .swing-block {
  margin-top: 27px;
  width: 118px;
  text-align: center;
}

.master-controls .swing-block label {
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
}

.master-controls .swing-block output {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  color: #8f8f8a;
}

.lfo-block {
  position: absolute;
  top: 38px;
  right: 22px;
  width: 230px;
  min-height: 172px;
  margin: 0;
  padding: 10px 10px 9px;
  border-top: 0;
  border-left: 1px solid #302f2b;
  border-bottom: 1px solid #302f2b;
  text-align: center;
  z-index: 9;
  background: rgba(12,12,12,.13);
}

.lfo-title {
  font-size: 10px;
  letter-spacing: .18em;
  color: #aaa79a;
}

.lfo-knobs {
  gap: 28px;
  margin-top: 7px;
}

.lfo-wave-label {
  margin-top: 6px;
  font-size: 7px;
  letter-spacing: .14em;
  color: #77766f;
}

.lfo-wave-row {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 3px;
}

.lfo-wave-button {
  min-width: 50px;
  height: 20px;
  padding: 0 6px;
  border: 2px solid #050505;
  border-radius: 2px;
  background: #24241f;
  color: #8e8c84;
  font-size: 7px;
  letter-spacing: .06em;
  box-shadow: inset 0 0 0 1px #4b4940;
  cursor: pointer;
}

.lfo-wave-button[aria-pressed="true"],
.lfo-wave-button.active {
  background: var(--step);
  color: #17130a;
  box-shadow: inset 0 0 0 1px var(--step-hi), 0 0 7px rgba(198,144,24,.42);
}

.lfo-route-label { margin-top: 6px; }




/* SIZE LOCK: fixed desktop panel; smaller windows scroll instead of reflowing/scaling. */
html,body{min-width:0;overflow:auto}
body{display:block;min-height:100vh}
.machine-shell{width:max-content;min-width:1296px;margin:0;padding:28px}
.machine{width:1240px;height:760px;min-width:1240px;max-width:1240px;min-height:760px;max-height:760px}


/* V2.3 — MIDI CLOCK + FA PHASE */
.midi-button{
  position:absolute;
  top:28px;
  right:270px;
  width:82px;
  height:48px;
  z-index:20;
  border:4px solid #050505;
  border-radius:4px;
  background:#202124;
  color:#cfcfc8;
  font-size:12px;
  font-weight:bold;
  letter-spacing:.12em;
  box-shadow:inset 0 0 0 2px #555,0 4px 9px rgba(0,0,0,.65);
  cursor:pointer;
}
.midi-button.clock-pulse{
  background:var(--step);
  color:#17130a;
  box-shadow:inset 0 0 0 2px var(--step-hi),0 0 18px rgba(242,200,75,.88),0 4px 9px rgba(0,0,0,.65);
}
.midi-panel{
  display:none;
  position:absolute;
  top:84px;
  right:255px;
  width:300px;
  padding:14px;
  z-index:30;
  border:2px solid #050505;
  border-radius:6px;
  background:linear-gradient(#20201d,#11110f);
  box-shadow:inset 0 0 0 1px #4f4b40,0 12px 28px rgba(0,0,0,.72);
}
.midi-panel.open{display:block}
.midi-title{
  margin-bottom:10px;
  color:var(--step-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-family:monospace;
  font-size:11px;
  line-height:1.7;
  color:#8f8f8a;
}
.midi-readout strong{color:var(--step-hi);font-weight:normal}
.midi-note{
  margin-top:8px;
  color:#6f6d65;
  font-size:8px;
  line-height:1.4;
}


/* V2.4 — AUTOFILL: two queued 8-step snare fills beside transport */
.transport-row{display:flex;align-items:flex-end;justify-content:center;gap:12px;width:100%}
.autofill-block{text-align:center;min-width:58px}
.autofill-title{margin-bottom:5px;font-size:7px;letter-spacing:.13em;color:#8f8f8a}
.autofill-buttons{display:flex;justify-content:center;gap:4px}
.autofill-button{width:21px;height:18px;padding:0;border:2px solid #050505;border-radius:2px;background:#24241f;color:#8e8c84;font-size:8px;line-height:1;box-shadow:inset 0 0 0 1px #4b4940;cursor:pointer}
.autofill-button.active,.autofill-button[aria-pressed="true"]{background:var(--step);color:#17130a;box-shadow:inset 0 0 0 1px var(--step-hi),0 0 7px rgba(198,144,24,.42)}



/* V2.5 — NMIDI v3 distributed clock */
#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:320px;
}