:root{--panel:#151515;--panel2:#1c1c1c;--edge:#050505;--ink:#d6d6d1;--dim:#77766f;--line:#45433a;--track:#3f46b8;--track-hi:#7b7ff0;--step:#c69018;--step-hi:#f2c84b;--green:#516d4e;--red:#734b46;--blue:#445f78;--yellow:#7a692e}
*{box-sizing:border-box}

body{
    margin:0;
    min-height:100vh;
    background:#2b2b2b;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--ink);
    overflow:auto;
}.machine-shell{
    padding:24px;
    width:1828px;
    overflow:visible;
}

.machine{
    position:relative;
    width:1780px;
    height:850px;
    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;z-index:8}
.master-controls{position:absolute;top:34px;left:40%;width:330px;display:flex;align-items:flex-start;justify-content:center;gap:42px;z-index:8}
.tempo-block{text-align:center;width:120px; transform:translateX(-45px);}.knob{position:relative;width:82px;height:82px;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 span,.mini-knob span,.filter-knob span{position:absolute;left:50%;top:50%;width:29%;height:2px;transform-origin:0 50%;background:#e4e0c8;border-radius:2px}
.mini-knob span,.filter-knob span{width:36%;height:3px;background:#e8e5d5;box-shadow:0 0 2px rgba(255,255,255,.38),0 1px 2px rgba(0,0,0,.8)}
.mini-knob::after,.filter-knob::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;transform:translate(-50%,-50%);border-radius:50%;background:#202020;border:1px solid #696969;box-shadow:0 1px 2px rgba(0,0,0,.8)}.tempo-block label,.swing-block label{display:block;margin-top:7px;font-size:10px;letter-spacing:.12em}.tempo-block output,.swing-block output{display:block;margin-top:4px;font-size:10px;color:#8f8f8a}#tempo{position:absolute;width:1px;height:1px;opacity:0}.swing-block{width:110px;text-align:center;padding-top:22px}#swing{width:100px;accent-color:var(--step);filter:sepia(.7) saturate(.8) brightness(.8)}
.ratchet-block{position:absolute;right:42px;top:34px;width:245px;text-align:center;z-index:9;padding-left:18px}
.section-title,.mixer-row-label{font-size:10px;letter-spacing:.18em;color:#9b998f;margin-bottom:8px}.ratchet-knobs{display:flex;justify-content:center;gap:28px}.ratchet-knobs label{font-size:8px;color:#8a887f;display:flex;flex-direction:column;align-items:center;gap:4px}.mini-knob,.filter-knob{position:relative;width:34px;height:34px;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}.ratchet-knobs input,.filter-label>input{position:absolute;width:1px;height:1px;opacity:0}.ratchet-knobs output{font-size:8px;color:#8f8f8a}.mode-button,.route-button,.rate-button,.tree-mode button,.sample-button,.mute-button{border:2px solid #050505;border-radius:2px;background:#27251e;color:#9e9b91;box-shadow:inset 0 0 0 1px #4f4b40;cursor:pointer}.mode-button{margin-top:8px;padding:4px 13px;font-size:8px}.mode-button.active,.route-button.active,.rate-button.active,.tree-mode button.active,.mute-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)}.route-label{font-size:7px;letter-spacing:.12em;color:#77766f;margin:7px 0 3px}.route-row{display:flex;justify-content:center;gap:6px}.route-button{width:26px;height:22px;font-size:9px}
.tree-area{position:absolute;bottom:128px;width:700px;height:570px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(10px);transition:opacity .2s ease,transform .25s ease,visibility 0s linear .25s;z-index:3}.tree-area.visible{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
    transition-delay:0s
}
.branches,.nodes{position:absolute;inset:0;width:100%;height:100%}.branches{pointer-events:none}.nodes{pointer-events:none}.node{pointer-events:auto}.branch{stroke:var(--line);stroke-width:2;opacity:.72}.branch-pulse{stroke:var(--step-hi);stroke-width:4;stroke-linecap:round;opacity:0;filter:drop-shadow(0 0 4px rgba(242,200,75,.95))}.node{position:absolute;width:30px;height:24px;transform:translate(-50%,-50%);padding:0;border:2px solid #050505;border-radius:2px;background:#26241d;color:#b9b6aa;font-size:9px;font-family:monospace;box-shadow:inset 0 0 0 1px #555146,0 2px 4px rgba(0,0,0,.55);cursor:pointer}.node.active{background:var(--step);color:#17130a;box-shadow:inset 0 0 0 1px var(--step-hi),0 0 9px rgba(198,144,24,.5)}.node.playhead{box-shadow:inset 0 0 0 1px #fff0a5,0 0 16px rgba(242,200,75,.95)}.rate-button{position:absolute;left:50%;top:4px;transform:translateX(-50%);width:34px;height:24px;font-size:11px;z-index:12;pointer-events:auto}.tree-mode{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;gap:5px;z-index:12}.tree-mode button{font-size:8px;padding:3px 6px}
.track-row{position:absolute;inset:0;pointer-events:none;z-index:7}.track-button{position:absolute;bottom:46px;width:72px;height:52px;transform:translateX(-50%);pointer-events:auto;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)}.track-button.has-pattern:not(.tree-open){background:#292b55;color:#dddfff}.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)}
.utility-divider{position:absolute;top:34px;bottom:34px;right:302px;width:1px;background:#2c2c28;z-index:6;pointer-events:none}
.utility-column{position:absolute;right:28px;bottom:38px;width:260px;z-index:8;display:flex;flex-direction:column;align-items:center;gap:12px}.channels{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.channel{display:flex;flex-direction:column;align-items:center;gap:5px}.channel-num{font-size:10px;color:#aaa79a}.sample-label,.mute-label{font-size:7px;letter-spacing:.11em;color:#77766f}.sample-bank{display:grid;grid-template-columns:1fr;gap:3px;justify-items:center}.sample-button{width:27px;height:20px;padding:0;font-size:8px}.sample-button.selected{background:#373875;color:#e4e5ff;box-shadow:inset 0 0 0 1px #7075cc,0 0 6px rgba(82,88,205,.35)}.filter-label{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:7px;color:#77766f}.fader-grid{display:grid;grid-template-columns:repeat(2,28px);gap:8px 12px;justify-content:center}.fader-grid label{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:7px;color:#8a887f}.mix-slider{writing-mode:vertical-lr;direction:rtl;width:20px;height:88px;padding:0;margin:0;background:transparent;-webkit-appearance:slider-vertical}
.gate{accent-color:#6d9b67}.volume{accent-color:#a65e58}.pan{accent-color:#5d7fa8}.reverb{accent-color:#c69018}
.mix-slider::-webkit-slider-runnable-track{width:6px;border-radius:3px;background:#171717;border:1px solid #454545}
.mix-slider.gate::-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::-moz-range-track{width:6px;border-radius:3px;background:#171717;border:1px solid #454545}.mix-slider.gate::-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)}.mute-button{width:30px;height:24px;font-size:9px}.transport-button{width:86px;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]{color:var(--step-hi);box-shadow:inset 0 0 0 2px #7b7460,0 0 10px rgba(242,200,75,.2)}


.machine {
    transform-origin: top left;
}
.track-button[data-track="0"]{left:21%}.track-button[data-track="1"]{left:60%}

.fuap-button{position:absolute;top:34px;right:315px;width:110px;height:62px;z-index:14;border:4px solid #240000;border-radius:4px;background:#481010;color:#d9b4b4;font-size:18px;font-weight:bold;letter-spacing:.10em;box-shadow:inset 0 0 0 2px #7a2b2b,0 4px 9px rgba(0,0,0,.65);cursor:pointer}.fuap-button.active{background:#d51f1f;color:#fff3f3;border-color:#4c0000;box-shadow:inset 0 0 0 2px #ff6c6c,0 0 22px rgba(255,31,31,.8),0 4px 9px rgba(0,0,0,.65)}.fuap-button:active{transform:translateY(1px)}


/* V1.18 — CLOCK / NMIDI */
.midi-button{position:absolute;top:34px;right:437px;width:92px;height:62px;z-index:14;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 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,.85),0 4px 9px rgba(0,0,0,.65)}
.midi-panel{display:none;position:absolute;top:106px;right:315px;width:330px;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,#nmidiMode{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}.clock-divider{height:1px;background:#4b493f;margin:11px 0}

/* V1.16 — GLOBAL TRANSPOSE */
.transpose-block{position:absolute;bottom:58px;left:68%;transform:translateX(1px);text-align:center;z-index:9}
.transpose-row{display:flex;gap:6px;justify-content:center}
.transpose-button{min-width:38px;height:24px;padding:0 8px;border:2px solid #050505;border-radius:2px;background:#27251e;color:#9e9b91;box-shadow:inset 0 0 0 1px #4f4b40;cursor:pointer;font-size:9px}
.transpose-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);transform:translateY(1px)}