@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap";:root{font-family:IBM Plex Sans,system-ui,sans-serif;color:#171813;background:#f5f2ea;font-synthesis:none}*{box-sizing:border-box}body{min-width:320px;margin:0;background:#f5f2ea}button,input,select{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #5578f6;outline-offset:2px}.keyboard{position:relative;display:block!important;height:clamp(9rem,18vw,12rem)!important;padding:0!important;overflow:hidden;background:#d8d6cd!important}.keyboard button,.chord-buttons .chord-button{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none}.white-keys{display:flex;height:100%;padding:0 .6rem}.keyboard .white-key{display:flex;flex:1;min-width:0;align-items:flex-end;justify-content:space-between;border:1px solid #76786f;border-width:0 1px 1px 0;background:#fcfbf7;color:#171813;padding:.7rem .75rem;text-align:left}.keyboard .white-key:first-child{border-left:1px solid #76786f}.keyboard .white-key span{font-size:clamp(1rem,1.5vw,1.35rem);font-weight:500}.keyboard .white-key small{color:#76786f;font:.58rem IBM Plex Mono,monospace}.keyboard .black-key{position:absolute;z-index:2;top:0;left:calc(.6rem + var(--position) * 9.0909%);width:clamp(1.7rem,3.8vw,2.65rem);height:58%;transform:translate(-50%);border:1px solid #171813;border-top:0;background:#1a1c18;color:#fcfbf7;padding:.45rem .2rem;box-shadow:0 2px #17181340}.keyboard .black-key span{display:none;color:#e6e4dc;font:.55rem IBM Plex Mono,monospace}.keyboard .white-key.held{background:#dce4ff;color:#171813;box-shadow:inset 0 -5px #5578f6}.keyboard .black-key.held{background:#5578f6;box-shadow:0 2px #2b4cba}.keyboard-options{display:flex;align-items:center;gap:.7rem}.layout-toggle{display:flex;border:1px solid #c8c6bc}.layout-toggle button{border:0!important;border-right:1px solid #c8c6bc!important;background:#f5f2ea!important;padding:.35rem .55rem!important;font:.6rem IBM Plex Mono,monospace!important;text-transform:uppercase}.layout-toggle button:last-child{border-right:0!important}.layout-toggle button.active{background:#5578f6!important;color:#fff}.keyboard.pad-layout{height:auto!important;min-height:0;padding:.75rem!important}.pad-grid{display:grid;grid-template-columns:repeat(4,1fr);width:min(100%,38rem);aspect-ratio:1;height:auto;margin:auto;gap:.45rem}.keyboard .pad-key{display:flex;min-width:0;aspect-ratio:1;flex-direction:column;align-items:flex-start;justify-content:space-between;border:1px solid #76786f;background:#fcfbf7;color:#171813;padding:.7rem;text-align:left}.keyboard .pad-key small{color:#76786f;font:.6rem IBM Plex Mono,monospace}.keyboard .pad-key span{font-size:clamp(1rem,1.5vw,1.35rem);font-weight:500}.keyboard .pad-key.held{border-color:#2b4cba;background:#dce4ff;box-shadow:inset 0 -4px #5578f6}.scale-lock-panel{margin:0 1rem 1rem}.instrument .scale-lock-panel{margin:0}.scale-lock-controls{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:.8rem;color:#76786f;font:.65rem IBM Plex Mono,monospace;text-transform:uppercase}.scale-lock-controls label{display:flex;align-items:center;gap:.4rem}.scale-lock-controls select{border:1px solid #c8c6bc;background:#f5f2ea;padding:.35rem}@media(max-width:620px){.keyboard{height:10rem!important}.keyboard .white-key{padding:.5rem .35rem}.keyboard .white-key small{display:none}.keyboard .black-key{width:1.5rem}}.performance-controls,.arp-controls{display:flex;flex-wrap:wrap;align-items:end;gap:.7rem;border-bottom:1px solid #c8c6bc;padding:.7rem .8rem;color:#76786f;font:.6rem IBM Plex Mono,monospace;text-transform:uppercase}.performance-controls label,.arp-controls label{display:grid;gap:.25rem}.performance-controls input[type=range],.arp-controls input[type=range]{accent-color:#5578f6}.performance-controls select,.arp-controls select{border:1px solid #c8c6bc;background:#f5f2ea;padding:.28rem}.performance-controls output,.arp-controls output{color:#171813}.active-preset .macro-grid,.effects-panel .effect-row{grid-template-columns:repeat(5,minmax(0,1fr))!important;max-width:none!important}.progression-picker{display:grid!important;grid-template-columns:8rem 10rem minmax(14rem,1fr) auto;align-items:end}.progression-picker label{min-width:0}.octave-control{color:#76786f;font:.6rem IBM Plex Mono,monospace;text-transform:uppercase}.octave-control select{margin-left:.35rem;border:1px solid #c8c6bc;background:#f5f2ea}@media(max-width:950px){.active-preset .macro-grid,.effects-panel .effect-row{grid-template-columns:repeat(3,minmax(0,1fr))!important}.progression-picker{grid-template-columns:1fr 1fr}}@media(max-width:620px){.active-preset .macro-grid,.effects-panel .effect-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}.progression-picker{grid-template-columns:1fr}}.xy-pad{touch-action:none;-webkit-user-select:none;user-select:none}.xy-pad i{pointer-events:none}.xy-controls{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;padding:1rem 1rem 0;color:#76786f;font:.6rem IBM Plex Mono,monospace;text-transform:uppercase}.xy-controls label{display:grid;gap:.25rem}.xy-controls select,.xy-controls input{min-width:0;border:1px solid #c8c6bc;background:#f5f2ea}.shortcut-note{margin:0;padding:0 .8rem .8rem;color:#76786f;font:.6rem IBM Plex Mono,monospace}.progression-picker{display:flex;align-items:end;gap:.6rem;border-top:1px solid #c8c6bc;padding:.8rem}.progression-picker label{display:grid;flex:1;gap:.25rem;color:#76786f;font:.6rem IBM Plex Mono,monospace;text-transform:uppercase}.progression-picker select{border:1px solid #c8c6bc;background:#f5f2ea;padding:.4rem}.progression-picker button{border:1px solid #171813;background:#171813;color:#fcfbf7;padding:.55rem .7rem;font:.6rem IBM Plex Mono,monospace;text-transform:uppercase}.progression-picker button:disabled{cursor:not-allowed;opacity:.45}.preset-status{margin-top:0;color:#76786f;font:.65rem IBM Plex Mono,monospace}.preset-list{max-height:32rem;overflow:auto}.effect-row{max-width:50rem;grid-template-columns:repeat(5,1fr)}@media(max-width:950px){.effect-row{grid-template-columns:repeat(3,1fr)}}@media(max-width:620px){.effect-row{grid-template-columns:repeat(2,1fr)}.progression-picker{align-items:stretch;flex-direction:column}}.gate{display:grid;min-height:100svh;place-items:center;padding:2rem;background:linear-gradient(135deg,#f5f2ea,#e6e4dc)}.gate section{width:min(36rem,100%);border:1px solid #c8c6bc;background:#fcfbf7;padding:clamp(2rem,6vw,5rem);box-shadow:8px 8px #d8d6cd}.gate h1,.brand{margin:.4rem 0;font-weight:600;letter-spacing:-.065em}.gate h1{font-size:clamp(4rem,14vw,9rem);line-height:.75}.gate h1 span{display:block}.micro{margin:0;color:#76786f;font:500 .65rem/1.35 IBM Plex Mono,monospace;letter-spacing:.04em;text-transform:uppercase}.primary{border:1px solid #171813;background:#171813;color:#fcfbf7;padding:.8rem 1.1rem;font:600 .7rem IBM Plex Mono,monospace;text-transform:uppercase}.app-shell{max-width:1600px;min-height:100svh;margin:auto;border-inline:1px solid #c8c6bc;background:#f5f2ea}.topbar{display:grid;grid-template-columns:1.2fr 1.5fr auto auto;min-height:4.75rem;align-items:center;gap:1rem;border-bottom:1px solid #c8c6bc;padding:0 1.25rem}.brand{color:#171813;font-size:1.65rem;text-decoration:none;letter-spacing:.05em}.brand span{display:block;margin-top:.15rem;color:#76786f;font:500 .5rem IBM Plex Mono,monospace;letter-spacing:.08em}.preset-stepper,.transport,.status{display:flex;align-items:center;gap:.45rem}.preset-stepper{justify-content:center}.preset-stepper strong{min-width:13rem;border-block:1px solid #c8c6bc;padding:.6rem 1rem;text-align:center;font-weight:500}.preset-stepper button,.transport button{min-width:2.5rem;border:1px solid #c8c6bc;background:#fcfbf7;padding:.6rem}.transport .active{background:#5578f6;color:#fff;border-color:#5578f6}.transport .danger{color:#ee5146}.transport label{border:1px solid #c8c6bc;background:#fcfbf7;padding:.55rem;font:500 .6rem IBM Plex Mono,monospace}.transport input{width:3.5rem;border:0;background:transparent}.status{justify-content:end;color:#76786f;font:500 .58rem IBM Plex Mono,monospace;text-transform:uppercase}.status span:before{display:inline-block;width:.42rem;height:.42rem;margin-right:.3rem;border-radius:50%;background:#c8c6bc;content:""}.status .live:before{background:#65b76b}.workspace{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(19rem,.72fr);min-height:calc(100svh - 4.75rem)}.instrument{display:grid;align-content:start;gap:1rem;border-right:1px solid #c8c6bc;padding:1rem}.panel{border:1px solid #c8c6bc;background:#fcfbf7}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3rem;border-bottom:1px solid #c8c6bc;padding:.65rem .9rem}.panel-heading h1,.panel-heading h2{margin:0;font-weight:500;letter-spacing:-.045em}.panel-heading h1{font-size:clamp(2rem,4.5vw,4rem);line-height:.88}.panel-heading h2{font-size:1rem}.panel-heading p:not(.micro){margin:.45rem 0 0;color:#76786f}.panel-heading button{border:1px solid #171813;background:#f5f2ea;padding:.55rem .7rem;font:500 .6rem IBM Plex Mono,monospace;text-transform:uppercase}.macro-grid{display:grid;grid-template-columns:repeat(4,1fr)}.control{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.55rem;min-height:8rem;border-right:1px solid #c8c6bc;padding:1rem}.control:last-child{border:0}.control-label{font-size:.9rem}.control input{grid-column:1/-1;width:100%;accent-color:#5578f6}.control output{color:#76786f;font:500 .65rem IBM Plex Mono,monospace}.knob-wrap{justify-self:end}.knob{display:block;width:2.55rem;height:2.55rem;border:1px solid #171813;border-radius:50%;background:radial-gradient(circle at 36% 30%,#fcfbf7,#d8d6cd);box-shadow:inset 0 0 0 .2rem #f5f2ea}.knob:after{display:block;width:1px;height:.7rem;margin:.25rem auto;background:#171813;content:"";transform:rotate(var(--turn));transform-origin:50% 1rem}.chord-lane .panel-heading>div{display:flex;gap:.8rem;align-items:center;font:500 .65rem IBM Plex Mono,monospace}.chord-lane select{border:1px solid #c8c6bc;background:#f5f2ea;padding:.3rem}.chord-buttons{display:grid;grid-template-columns:repeat(7,1fr);padding:.8rem}.chord-buttons button{min-height:4.5rem;border:1px solid #c8c6bc;border-right:0;background:#fcfbf7;font-size:1rem}.chord-buttons button:last-child{border-right:1px solid #c8c6bc}.chord-buttons button span{display:block;margin-top:.35rem;color:#76786f;font:.6rem IBM Plex Mono,monospace}.chord-buttons .active{background:#5578f6;color:#fff}.chord-buttons .active span{color:#e7ecff}.keyboard-panel{overflow:hidden}.keyboard{position:relative;display:flex;height:12rem;padding:1rem 1rem 0;background:#e6e4dc}.keyboard button{position:relative;flex:1;min-width:0;border:1px solid #76786f;background:#fcfbf7;color:#76786f;vertical-align:bottom}.keyboard button.sharp{z-index:2;flex:0 0 0;width:0}.keyboard button.sharp:after{position:absolute;z-index:2;top:0;left:-.65rem;width:1.3rem;height:7rem;border:1px solid #171813;background:#1a1c18;content:""}.keyboard button.held{background:#5578f6;color:#fff}.keyboard button.held.sharp:after{background:#5578f6}.monitor-rail{display:grid;align-content:start;gap:1rem;padding:1rem}.screen-panel{border:1px solid #171813;background:#1a1c18;color:#fcfbf7}.screen-panel .panel-heading{border-color:#4f514a}.scope{display:block;width:100%;height:auto}.meter{padding-bottom:1rem}.meter-row{display:grid;grid-template-columns:1rem 1fr;gap:.5rem;align-items:center;padding:.55rem 1rem}.meter-row i{height:.75rem;border:1px solid #c8c6bc;background:linear-gradient(90deg,#ea8a3e var(--level),transparent var(--level))}.xy{padding-bottom:1rem}.xy-pad{position:relative;aspect-ratio:1;margin:1rem;background:repeating-linear-gradient(0deg,transparent 0 2rem,#c8c6bc 2rem 2.05rem),repeating-linear-gradient(90deg,transparent 0 2rem,#c8c6bc 2rem 2.05rem),#e6e4dc;cursor:crosshair}.xy-pad:before,.xy-pad:after{position:absolute;background:#76786f;content:""}.xy-pad:before{top:50%;width:100%;height:1px}.xy-pad:after{left:50%;height:100%;width:1px}.xy-pad i{position:absolute;width:1.2rem;height:1.2rem;border:1px solid #171813;border-radius:50%;background:#5578f6;transform:translate(-50%,-50%)}.xy-map{display:flex;justify-content:space-between;padding:0 1rem;color:#76786f;font:.6rem IBM Plex Mono,monospace}.secondary{margin:0 1rem 1rem;border-top:1px solid #c8c6bc}.secondary article{border-bottom:1px solid #c8c6bc}.secondary>article>button{display:flex;width:100%;justify-content:space-between;border:0;background:transparent;padding:1rem;text-align:left;font-size:1rem}.secondary article.open>button{background:#e6e4dc}.secondary-body{border-top:1px solid #c8c6bc;padding:1rem;color:#4f514a}.preset-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.5rem}.preset-list button{border:1px solid #c8c6bc;background:#fcfbf7;padding:.85rem;text-align:left}.preset-list button.active{border-color:#5578f6;background:#e7ecff}.preset-list small{display:block;margin-top:.3rem;color:#76786f;font:.6rem IBM Plex Mono,monospace}.effect-row{display:grid;max-width:40rem;grid-template-columns:repeat(3,1fr);border:1px solid #c8c6bc}@media(max-width:950px){.topbar{grid-template-columns:1fr auto;gap:.7rem;padding:.75rem 1rem}.preset-stepper{grid-row:2;grid-column:1/-1;order:4}.transport{justify-content:end}.status{display:none}.workspace{grid-template-columns:1fr}.instrument{border-right:0}.monitor-rail{grid-template-columns:repeat(3,1fr);border-top:1px solid #c8c6bc}.monitor-rail .screen-panel{grid-column:span 3}}@media(max-width:620px){.topbar{grid-template-columns:1fr}.transport{justify-content:flex-start}.preset-stepper{grid-column:auto}.macro-grid{grid-template-columns:repeat(2,1fr)}.control:nth-child(2){border-right:0}.control:nth-child(-n+2){border-bottom:1px solid #c8c6bc}.monitor-rail{grid-template-columns:1fr}.monitor-rail .screen-panel{grid-column:auto}.chord-lane .panel-heading{align-items:flex-start;flex-direction:column}.chord-buttons{grid-template-columns:repeat(4,1fr)}.keyboard{height:9rem}.keyboard button.sharp:after{height:5rem}.panel-heading h1{font-size:2.2rem}}