:root{--bg-color: #2b393d;--fg-color: #c7d3eb;--txt-color: var(--fg-color);--s: 1rem;font-size:12px;color:#fff}:root *:not(canvas){box-sizing:border-box;font-size:1rem;font-family:iA Writer Duo S,monospace!important;border-radius:.75rem}:root input:not([type=checkbox]),:root button,:root .ramp{box-shadow:0 1px 30px #000;overflow:hidden}:root *[disabled]{opacity:.5}body,html,#app{width:100%;margin:0;padding:0;background:var(--bg-color)}.stack{display:flex;flex-direction:row}.stack.v{flex-direction:column}.stack.v>*{justify-items:center}.stack.h{width:100%;overflow-x:scroll}.stack.wrap{flex-wrap:wrap}.node{position:relative;margin:0 0 1rem 1rem;width:286px;flex:0 0 286px}.node input[type=range]{color:var(--fg-color);flex:1}.node .faust-code{flex:1;align-self:stretch}.node .h.group>.h.stack{display:flex;flex-direction:row;flex-wrap:wrap}.node .h.group>.h.stack>*:not(.hidden){flex:1 0 50%}.node .group>label{display:block;color:var(--txt-color)}.node .v.group>label{text-align:center}.node .nentry{padding:0 3px}.node button{display:block}.node button.active{opacity:.8}.node button.small{height:1.5rem;padding:0 .5rem;margin-right:.1rem}.node label{display:inline-block;color:var(--txt-color);white-space:nowrap;overflow:hidden;opacity:.75}.node textarea{border:1px solid var(--fg-color);display:block;min-height:1rem;font-size:1rem;resize:none;padding:var(--s);outline:none}.node textarea:focus{border-color:#00f}.node .error{background:red}.slider{position:relative;display:flex;width:100%;overflow:hidden;justify-content:space-between}.slider input{margin:0;position:absolute;display:block;top:0;left:0;width:100%}.slider label{pointer-events:none;text-align:center;line-height:1.5rem;padding:0 .5rem;color:var(--bg-color);z-index:1;display:flex;flex-direction:row;justify-content:space-between;width:100%}.slider label span{display:block}.slider:hover label{text-shadow:0 .25px 2px #fff8}button,input,textarea{font-family:inherit;font-size:1rem;background:transparent;color:var(--fg-color);border:none;outline:none;margin:0}button{display:block;outline:none;cursor:pointer;color:#000;background:var(--fg-color)}button:active{opacity:.8}.toolbar{padding:var(--s)}.toolbar>*{flex:1;width:auto}.toolbar button{padding:var(--s)}.slider{--degree: calc(180 - var(--deg) * 220);--fg-color: hsl(var(--degree), 40%, 60%);box-shadow:0 0 30px #0004}input[type=text]{padding:var(--s)}input[type=text]:focus{background:var(--fg-color);color:#000}div.checkbox{background:var(--fg-color);display:inline-flex;color:#000;padding:.1rem .5rem;align-items:center}div.checkbox label{padding:0 .25rem}div.checkbox input{width:1rem}.node div.checkbox label{color:#000}input[type=range]{-webkit-appearance:none;appearance:none}input[type=range]::-webkit-slider-runnable-track{border:none;background:var(--fg-color);box-sizing:border-box}input[type=range]:focus::-webkit-slider-runnable-track{border-radius:1rem}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;border-radius:1rem;height:1.5rem;width:1rem;background-color:hsl(var(--degree),100%,30%)}input[type=range].nolabel::-webkit-slider-thumb{background-color:#666}input[type=range]:focus{outline:none}.pattern.stack{margin-bottom:2px;align-items:center}.pattern.stack input{width:100%}.pattern.stack *{color:var(--txt-color);font-size:1em}.tools{display:flex}.S.active{background:#0f0;color:#000}.M.active{background:#f00}.P.active{background:#00f}.tone-grid{display:flex;flex-wrap:wrap;color:#fff;--w: 40px;--h: 40px;width:calc(var(--cols, 32) * var(--w))}.tone-grid .tone{position:relative;width:var(--w);height:var(--h);text-align:center;line-height:var(--h);cursor:pointer;user-select:none}.tone-grid .tone .bg{display:block;background-color:var(--bgcolor);position:absolute;width:100%;height:100%}.tone-grid .tone .label{position:relative;pointer-events:none}.mos{--c: 1;--size: min(100vw, 500px);--min-size: calc(var(--min) / var(--len) * var(--size));padding-top:20px;background:linear-gradient(90deg,#444 1px,transparent 1px);background-size:var(--min-size) 1px;width:var(--size)}.mos .row{display:flex;overflow:hidden}.mos .cell{--cell-width: calc(var(--w) / var(--len) * var(--size));--cell-height: calc(var(--row) / var(--len) * var(--size));display:table-cell;flex:0 var(--cell-width);height:20px;line-height:1.5;border:1px solid white;opacity:var(--c, 1);overflow:hidden;text-align:center}.mos .cell span{font-size:75%}.mos input{display:inline-block;width:100%}.ramp>label{position:absolute;padding:.5rem}.ramp-comp .tools{padding:.25rem 0}.ramp-comp .wrap{position:relative;height:60px}.ramp-comp .wrap .time-head{position:absolute;top:0px;width:1px;height:100%;background:greenyellow;--x: calc(var(--t,0) * var(--w,0) * 1px);transform:translate(var(--x))}.pattern-bar{--t: 0;--j: 0;width:100%;height:2rem;position:relative;background:var(--bg-color)}.pattern-bar .note{position:absolute;top:calc(20px * var(--j));left:calc(var(--t) * 100%);min-width:5px;width:calc(var(--w) * 100%);height:calc(20px * (1 - var(--j)));background-color:hsl(var(--h),40%,60%);border-radius:2rem;border-top-left-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}