:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f4f5f8;font-synthesis:none;background:#090a0f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 16% 0,#50499638,#0000 36rem),linear-gradient(145deg,#0c0e15,#07080c 70%);min-width:320px;min-height:100vh;margin:0;padding:clamp(16px,4vw,48px)}button,select,input{font:inherit}.controller-shell{background:linear-gradient(160deg,#1d202df5,#11131bfa);border:1px solid #343849;border-radius:26px;width:min(1180px,100%);min-height:calc(100vh - clamp(32px,8vw,96px));margin:0 auto;padding:clamp(20px,3vw,38px);overflow:hidden;box-shadow:0 28px 90px #0000007a}.app-header{justify-content:space-between;align-items:end;gap:28px;padding-bottom:24px;display:flex}.eyebrow,.control-number,.mapping-note{color:#949bad;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;font-weight:750}.eyebrow{margin:0 0 6px}h1{letter-spacing:-.055em;margin:0;font-size:clamp(2rem,5vw,3.8rem);font-weight:760;line-height:.95}.midi-setup{align-items:end;gap:12px;display:flex}.field{color:#aeb4c3;letter-spacing:.04em;gap:7px;font-size:.76rem;font-weight:700;display:grid}.field select,.connect-button{border:1px solid #454b60;border-radius:10px;height:42px}.field select{color:#f5f6f9;background:#11131b;min-width:230px;padding:0 36px 0 12px}.field select:disabled{color:#777e90}.channel-field select{min-width:84px}.connect-button{color:#fff;cursor:pointer;background:#7c6df2;border-color:#988cff;padding:0 17px;font-weight:750;transition:transform .12s,background .12s}.connect-button:hover{background:#8a7cf8;transform:translateY(-1px)}.connect-button:disabled{cursor:default;opacity:.65;transform:none}.status-bar{color:#aeb4c3;background:#10121a;border:1px solid #303445;border-radius:11px;align-items:center;gap:9px;min-height:42px;padding:10px 14px;font-size:.82rem;display:flex}.status-light{background:#687084;border-radius:999px;flex:none;width:8px;height:8px;box-shadow:0 0 0 4px #68708421}.status-light.is-connected{background:#54dca1;box-shadow:0 0 0 4px #54dca121,0 0 14px #54dca16b}.status-light.is-error{background:#ff6c7b;box-shadow:0 0 0 4px #ff6c7b21}.last-message{color:#757d90;margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.75rem}.fader-bank{margin-top:22px}.pitch-settings{background:linear-gradient(#181b25,#12141c);border:1px solid #303444;border-radius:14px;justify-content:space-between;align-items:end;gap:18px;margin-bottom:12px;padding:14px 18px 16px;display:flex}.pitch-settings h2{margin:0;font-size:.9rem}.scale-selects{gap:10px;display:flex}.scale-field{color:#8f96a8;letter-spacing:.07em;text-transform:uppercase;gap:5px;font-size:.68rem;font-weight:750;display:grid}.scale-field select{color:#a99eff;cursor:pointer;text-transform:none;background:#090b10;border:1px solid #303545;border-radius:8px;min-width:150px;height:36px;padding:0 32px 0 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.76rem}#scale{min-width:190px}.step-count-field select{min-width:76px}.vertical-faders{--step-count:10;grid-template-columns:repeat(var(--step-count), minmax(70px, 1fr));overscroll-behavior-x:contain;gap:8px;max-width:100%;display:grid;overflow:auto hidden}.fader{background:linear-gradient(#181b25,#12141c);border:1px solid #303444;border-radius:14px;grid-template-rows:auto auto 1fr auto auto;grid-template-columns:minmax(0,1fr);justify-items:center;min-width:70px;height:386px;padding:18px 8px 14px;display:grid}.control-number{color:#767e91;margin:0 0 5px}.fader-name{font-size:.86rem;font-weight:720}.fader output,.split-heading output{color:#a99eff;text-align:center;background:#090b10;border:1px solid #303545;border-radius:7px;min-width:42px;padding:5px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem}.split-heading output{min-width:90px}.fader.is-lane-a .fader-name{color:#70e0ad}.fader.is-lane-b .fader-name{color:#72b7ff}.fader.is-current.is-lane-a{border-color:#54dca1;box-shadow:inset 0 0 0 1px #54dca147,0 0 20px #54dca11f}.fader.is-current.is-lane-b{border-color:#65adf5;box-shadow:inset 0 0 0 1px #65adf547,0 0 20px #65adf51f}.fader:not(.is-enabled) .vertical-fader,.fader:not(.is-enabled) output,.fader:not(.is-enabled) .fader-name{opacity:.48}.fader.is-skipped .vertical-fader,.fader.is-skipped output,.fader.is-skipped .fader-name{opacity:.28}input[type=range]{accent-color:#8c7df7;cursor:ns-resize}.vertical-fader{width:190px;height:26px;margin:auto 0;transform:rotate(-90deg)}.lower-controls{grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:12px;margin-top:12px;display:grid}.split-section,.tempo-section{background:linear-gradient(#181b25,#12141c);border:1px solid #303444;border-radius:14px;padding:17px 20px 19px}.split-heading,.tempo-heading{justify-content:space-between;align-items:center;margin-bottom:9px;display:flex}.split-heading h2,.tempo-heading h2{margin:0;font-size:.9rem}.horizontal-fader{width:100%;cursor:ew-resize!important}.bpm-field{color:#8f96a8;letter-spacing:.08em;align-items:baseline;gap:5px;font-size:.68rem;font-weight:750;display:flex}.bpm-field input{color:#a99eff;text-align:right;background:#090b10;border:1px solid #303545;border-radius:7px;width:72px;padding:5px 7px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem}.tempo-fader{margin-bottom:10px;display:block}.ratio-control{justify-content:space-between;align-items:end;gap:10px;margin-bottom:12px;display:flex}.ratio-field{color:#8f96a8;letter-spacing:.07em;text-transform:uppercase;gap:4px;font-size:.66rem;font-weight:750;display:grid}.ratio-field select{color:#a99eff;cursor:pointer;background:#090b10;border:1px solid #303545;border-radius:7px;min-width:82px;height:32px;padding:0 28px 0 9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem}.ratio-control output{color:#72b7ff;white-space:nowrap;padding-bottom:7px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.72rem}.transport-button{color:#e5e7ed;cursor:pointer;background:#292d3b;border:1px solid #444a5e;border-radius:9px;width:100%;min-height:38px;font-size:.78rem;font-weight:750;transition:background .12s,border-color .12s}.transport-button:hover:not(:disabled){background:#34394a;border-color:#665e9f}.transport-button.is-running{color:#f5eaff;background:#3a2450;border-color:#9c6bc6}.transport-button:disabled{cursor:not-allowed;opacity:.48}.step-toggle{color:#aeb4c3;cursor:pointer;border:1px solid #363b4d;border-radius:999px;justify-content:center;align-items:center;width:58px;max-width:100%;min-height:32px;margin-top:10px;padding:0 7px;font-size:.72rem;font-weight:750;transition:border .12s,background .12s,color .12s;display:flex;position:relative}.step-toggle span{white-space:nowrap;justify-content:center;align-items:center;min-width:0;display:flex}.step-toggle span:before{content:"";vertical-align:.08em;background:#596074;border-radius:999px;flex:none;width:7px;height:7px;margin-right:7px;display:inline-block}.step-toggle:hover{border-color:#625a9b}.step-toggle:focus-visible{outline-offset:2px;outline:2px solid #afa5ff}.step-toggle.is-on{color:#fff;background:#2e2858;border-color:#8c7df7;box-shadow:inset 0 0 0 1px #aba0ff3d}.step-toggle.is-on span:before{background:#a99eff;box-shadow:0 0 10px #a99effbf}.step-toggle.is-skip{color:#f1d59d;background:#30291d;border-style:dashed;border-color:#9c7e49}.step-toggle.is-skip span:before{background:#d5a957;box-shadow:0 0 9px #d5a9578c}.mapping-note{color:#737b8e;text-transform:none;margin:13px 2px 0;line-height:1.55}@media (width<=860px){.app-header,.midi-setup{flex-direction:column;align-items:stretch}.midi-setup{grid-template-columns:minmax(0,1fr) auto auto;display:grid}.connect-button{grid-column:1/-1}.field select{width:100%;min-width:0}.lower-controls{grid-template-columns:1fr}}@media (width<=520px){body{padding:0}.controller-shell{border:0;border-radius:0;min-height:100vh}.midi-setup{grid-template-columns:repeat(2,minmax(0,1fr))}.output-field{grid-column:1/-1}.pitch-settings{flex-direction:column;align-items:stretch}.scale-selects{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.scale-field select{width:100%;min-width:0}#scale,.step-count-field select{min-width:0}.last-message{display:none}}