/* BLACK BOX / field instrument enclosure */
.brand>.brandmark{border:0;padding:0;max-width:none;margin-left:0;flex-shrink:0}
:root{--bg:#e0e0d9;--panel:#deded7;--line:#b9bab2;--muted:#72756d;--text:#242722;--lime:#ed622e;--pink:#ca5d96;--cyan:#398f9b;--amber:#ad852e;--orange:#ed622e}
body{background:#c3c5bc;background-image:radial-gradient(#a6a89f 0.55px,transparent .55px);background-size:4px 4px;font-family:Arial,Helvetica,sans-serif;padding:36px 38px;color:var(--text)}
header,main{max-width:1460px;margin:auto;background:#deded7}header{height:90px;padding:0 34px;border:1px solid #a9ada1;border-bottom:0;border-radius:17px 17px 0 0;box-shadow:0 1px 0 #f4f4ee inset;position:relative}header:before,header:after{content:'+';position:absolute;top:13px;color:#979b90;background:#cccec4;border:1px solid #b0b4a7;box-shadow:0 1px 1px #fff8 inset;border-radius:50%;width:11px;height:11px;font:11px/10px monospace;text-align:center}header:before{left:13px}header:after{right:13px}main{padding:0 34px 0;border:1px solid #a9ada1;border-top:0;border-radius:0 0 17px 17px;box-shadow:0 12px 0 #b0b4a7,0 15px 1px #8f9587,0 24px 35px #41473835;overflow:hidden;position:relative}
.brand{gap:13px;font:17px Arial,sans-serif;letter-spacing:-.7px}.brand b{font-weight:800}.brand>span{font:8px/1.5 monospace;letter-spacing:1.2px;border-color:#aaaDA2;color:#62685b;max-width:130px}.brandmark{display:grid;grid-template-columns:repeat(3,5px);gap:3px;transform:rotate(-10deg);margin-right:8px}.brandmark em{width:5px;height:5px;background:#252a22;border-radius:1px}.brand sup{font:9px monospace;color:#6e7368;align-self:start;margin-top:3px;margin-left:-7px}.status{font-size:8px;color:#5b6352;letter-spacing:.5px}.status i{background:#ed622e;box-shadow:0 0 5px #ed622e66}.status span{color:#8c9185}header>button{font:9px monospace;text-transform:lowercase;background:#e9e9e2;border:1px solid #b1b5a8;box-shadow:0 3px 0 #aeb4a5,0 1px 0 #fff inset;border-radius:4px;padding:10px 14px;color:#41483a}header #help{width:33px;padding:10px}
button{transition:background .12s,transform .12s,box-shadow .12s}button:hover{background:#f0f0e9;border-color:#7a8370}button:active{transform:translateY(2px);box-shadow:0 1px 0 #a3aa99}.toolbar{padding:17px 0;border-top:1px solid #b4b8aa;border-bottom:1px solid #b4b8aa;gap:20px}.mode{border:0;border-radius:0;background:transparent;gap:8px;padding:0;counter-reset:modes}.mode button{counter-increment:modes;background:#eaeae3;border:1px solid #aeb3a5;box-shadow:0 3px 0 #adb3a3,0 1px 0 #fff inset;border-radius:4px;color:#555e4c;padding:11px 17px;font:10px monospace;min-width:108px;text-align:left}.mode button:before{content:'0' counter(modes);font-size:8px;display:inline-block;margin-right:13px;color:#8b9282}.mode button.active{background:#343b30;color:#f5f4e9;border-color:#2f352a;box-shadow:0 3px 0 #1f2619}.mode button.active:before{color:#ed622e}.mode button.active:after{content:'';display:inline-block;width:4px;height:4px;background:#f1753e;border-radius:50%;margin-left:12px}#modeHint{font:9px monospace;color:#7f8675}.clock{font:8px monospace;color:#68715d;gap:10px;letter-spacing:.7px}.clock input{font:20px monospace;color:#353c2d;background:#c9cdbf;border:1px solid #afb6a1;border-radius:3px;width:62px;padding:5px 2px;box-shadow:0 1px 3px #5c66521c inset}.clock small{font-size:8px}.clock button{font:9px monospace;background:#eaeae3;border:1px solid #aeb3a5;box-shadow:0 3px 0 #adb3a3;border-radius:4px}.clock #play{background:#ed622e;color:#fff6eb;border-color:#cb5026;box-shadow:0 3px 0 #b44320;width:36px}.clock .selected{background:#ccd1bf!important;color:#4e5c3b!important}.patchbar{padding:24px 0 22px}.patchbar>div>small{font:8px monospace;color:#838b77;letter-spacing:1.3px}.patchbar h1{font:25px Arial,sans-serif;letter-spacing:-1px;font-weight:500;margin:8px 0}.patchbar h1 span{font:12px monospace;color:#8c9382;letter-spacing:0}.patchbar p{font:10px monospace;color:#828a77}.patchnav{gap:6px}.patchnav button{background:#eaeae3;color:#505a44;border:1px solid #aeb5a3;box-shadow:0 3px 0 #aeb6a1;border-radius:4px;padding:11px 14px}.patchnav button:last-child{font:10px monospace;color:#c14d24;background:#e6e5d9}
.instrument{grid-template-columns:202px minmax(0,1fr) 232px;border:1px solid #aab19c;border-radius:7px;min-height:411px;background:#d4d7cb;box-shadow:0 1px 0 #f8f8ee,0 2px 5px #8a95762b inset}.generators{padding:17px 10px;border-right:1px solid #acb59b}.generators>.sectiontitle{padding:0 8px 16px}.sectiontitle{font:8px monospace;color:#69745b;letter-spacing:1px}.sectiontitle span{color:#88947b;font-size:8px}.gen{color:#38412e!important;padding:13px 9px;border-radius:4px;margin-bottom:5px;background:#dfe2d6;border:1px solid #bac2ae;box-shadow:0 2px 0 #aab69a;gap:10px}.gen.active{background:#f0efe6;border-color:#9da68e;box-shadow:0 2px 0 #879674}.gen.active:before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;background:#ed622e}.gen{position:relative}.gen .icon{font:22px monospace;color:#748264}.gen:nth-child(1) .icon,.gen:nth-child(1) .genled{color:#bd5788}.gen:nth-child(2) .icon,.gen:nth-child(2) .genled{color:#3d8e96}.gen:nth-child(3) .icon,.gen:nth-child(3) .genled{color:#ad872d}.gen:nth-child(4) .icon,.gen:nth-child(4) .genled{color:#62835b}.gen b{font:10px monospace;letter-spacing:-.2px}.gen small{font:7px monospace;margin-top:5px;color:#8b967c}.gen .genled{font-size:8px}.add{background:transparent;box-shadow:none;color:#738263;font:9px monospace;border:1px dashed #a8b395;padding:11px 8px}.bus{padding:25px 7px 0;font-size:8px;color:#71855a}.bus span{font-size:7px;color:#7d9565}.bus i{background:#748e57}.busline{border-color:#b2bea0;background:repeating-linear-gradient(90deg,transparent 0 12px,#93a77d 12px 13px,transparent 13px 24px)}.bus small{font:8px monospace;color:#929e83}
.visual{background:#252d24;margin:12px;border:5px solid #424c3c;border-radius:6px;box-shadow:0 2px 1px #f1f3e7,0 0 0 1px #98a087;overflow:hidden;color:#dfe8cd}.visualtop{height:58px;padding:15px 17px;background:#252d24}.visualtop b{font:11px monospace;color:#e0e9cf}.visualtop small{font:7px monospace;color:#708264;letter-spacing:1px;margin-top:5px}.viztabs{gap:3px}.viztabs button{font:8px monospace;color:#8b9e7a;padding:5px 7px;border-radius:2px}.viztabs .selected{background:#435039!important;color:#d6e7be!important}.canvaswrap{height:270px;margin:0 8px;background:radial-gradient(ellipse at center,#293426,#202a21 90%);border-top:1px solid #3d4c35;border-bottom:1px solid #3d4c35}.plotlabel{color:#8d9e79;font-size:7px;left:10px}.plotlabel span{color:#637a52}.plotbottom{font-size:7px;color:#96ab7e;left:10px;right:10px}.plotbottom i{background:#c8e29d}.axis{color:#697e59}.signaloutputs{padding:14px 16px;font:7px monospace;gap:16px;color:#7f966c}.signaloutputs small{color:#bdcfa7;font:8px monospace}.signaloutputs b:nth-of-type(1){color:#e8a2c7!important}.signaloutputs b:nth-of-type(2){color:#8bc7c6!important}.signaloutputs b:nth-of-type(3){color:#d9ba78!important}.signaloutputs .right{font-size:6px;color:#6f865d}.parameters{padding:17px;border-left:1px solid #acb59b}.sectiontitle button{color:#7a8b67;font-size:16px}.paramtitle{margin:22px 0;font:20px Arial,sans-serif;letter-spacing:-.8px;color:#424f35}.paramtitle select{color:#6d7d58;border:1px solid #adb99c;border-radius:2px;background:#dfe4d3;font:8px monospace;padding:6px}.param label{font:9px monospace;color:#657851}.param output{font:10px monospace;color:#414f34}.param{margin-bottom:24px}.param input{appearance:none;background:#a4b294;border-radius:0;height:2px;margin-top:14px}.param input::-webkit-slider-thumb{appearance:none;width:12px;height:17px;background:#e9eadd;border:1px solid #899a74;border-radius:2px;box-shadow:0 2px 0 #809369;cursor:ew-resize}.paramnote{font:8px/1.8 monospace;color:#849574;margin-top:29px}.paramnote span{color:#ed622e}
.macros{background:#dfe0d7;border:1px solid #aeb6a0;border-radius:6px;margin-top:14px;min-height:174px;box-shadow:0 1px 0 #f5f6eb}.macrointro{width:173px;padding:24px 20px}.macrointro small{font:7px monospace;color:#8a947d}.macrointro h2{font:19px/1.15 Arial,sans-serif;letter-spacing:-.6px;color:#48543a;margin:12px 0}.macrointro p{font:8px monospace;color:#98a18c}.macro{counter-increment:macrocount}#macros{counter-reset:macrocount;padding:23px 10px 15px;gap:13px}.macro b{font:9px monospace;color:#59694a;margin-top:14px}.macro b:before{content:'0' counter(macrocount) ' / ';font-size:7px;color:#a1ab95}.macro output{font:8px monospace;color:#8a987a;margin-top:7px}.knob{width:63px;height:63px;background:conic-gradient(from 225deg,#8d9e78 calc(var(--v)*2.7deg),#bac4ae 0 270deg,transparent 0);box-shadow:none;position:relative}.knob:before{inset:5px;background:repeating-conic-gradient(from 0deg,#e8e9df 0deg 4deg,#d2d7c6 4deg 7deg);box-shadow:0 4px 0 #9eaa8d,0 6px 8px #6879574a,0 1px 1px #ffffec inset;border:1px solid #aeb99d}.knob:after{width:3px;height:15px;left:30px;top:10px;transform-origin:1.5px 21.5px;background:#61784b;border-radius:1px}.macro:nth-child(1) .knob:before{background:repeating-conic-gradient(#e8bdcc 0 4deg,#d5a6b7 4deg 7deg);border-color:#c18d9f;box-shadow:0 4px 0 #ac7e91,0 6px 8px #6879574a}.macro:nth-child(1) .knob:after{background:#a6496a}.macro:nth-child(2) .knob:before{background:repeating-conic-gradient(#acd1cc 0 4deg,#96bdb5 4deg 7deg);border-color:#87b4a8;box-shadow:0 4px 0 #709b8f,0 6px 8px #6879574a}.macro:nth-child(2) .knob:after{background:#367b7e}.macro:nth-child(3) .knob:before{background:repeating-conic-gradient(#e1cc95 0 4deg,#cbb97e 4deg 7deg);border-color:#b5a566;box-shadow:0 4px 0 #a49159,0 6px 8px #6879574a}.macro:nth-child(3) .knob:after{background:#8d7327}.macro:nth-child(6) .knob:before{background:repeating-conic-gradient(#f57943 0 4deg,#e26431 4deg 7deg);border-color:#d65e30;box-shadow:0 4px 0 #b34f28,0 6px 8px #6879574a}.macro:nth-child(6) .knob:after{background:#82341c}.output{width:224px;border-color:#b4bea5;padding:20px}.output .sectiontitle{font-size:8px}.output .sectiontitle span{font-size:7px}.meters{margin-top:23px;background:#c5cdb8;padding:5px;gap:4px;border:1px solid #b3bea1;border-radius:2px}.meters div{height:5px;background:repeating-linear-gradient(90deg,#71864f 0 4px,transparent 4px 6px)}.outputrow{font:7px monospace;color:#849471;margin-top:14px}.outputrow input{accent-color:#617c49;width:83px}.outputrow small{font-size:7px;color:#657b50}.output label{font:8px monospace;color:#80946a;margin-top:13px}.output label input{accent-color:#708954}.output label span{color:#738e50;font:7px monospace}
.presets{padding-top:24px}.presets>.sectiontitle{color:#6c795b}.presets>.sectiontitle span{color:#9aa58b;font-size:7px}#presets{gap:10px;margin-top:12px}.preset{position:relative;min-height:70px;padding:14px 15px;gap:13px;background:#e9e9df;border:1px solid #aeb99d;border-radius:4px;box-shadow:0 3px 0 #acb59d,0 1px 0 #f9f9ef inset;color:#4e5f3b}.preset.active{background:#d2d9c3;border-color:#8c9c75;box-shadow:0 3px 0 #7f9465,0 1px 0 #eef3e3 inset}.preset.active:after{content:'';position:absolute;right:13px;top:12px;width:4px;height:4px;background:#ed622e;border-radius:50%}.preset .art{width:32px;height:32px;font:29px monospace;filter:saturate(.8)}.preset b{font:9px monospace}.preset small{font:7px monospace;letter-spacing:0;color:#8e9a7f;margin-top:6px}.preset .number{font:8px monospace;color:#879978}.preset.active .number{color:#d1582c}footer{font:7px monospace;letter-spacing:.5px;color:#8a987b;padding:26px 0 24px}footer i{background:#839965}#advanced{background:#d5dbca;border:1px solid #adb99d;border-radius:4px;padding:17px}.route{background:#e5e8db;border:1px solid #afbc9e;border-radius:3px}.route select{background:#d6dec9;color:#52683e;border:1px solid #b2c09f;border-radius:2px}.route label{color:#718a5a}.route input[type=range]{accent-color:#738c51}.route button{color:#a3482a;border-color:#c1bca3}.automated .canvaswrap{height:350px}.automated .visual{margin:12px}.automated .macrointro{width:173px}#toast{background:#343e2b;color:#f0f4e7;font:11px monospace;box-shadow:0 4px 10px #0003;border:1px solid #687b50}dialog{background:#e4e7da;color:#46563a;border:1px solid #a0b189;border-radius:6px;font:12px/1.8 monospace}dialog h2{font:24px Arial}dialog button{background:#ed622e;color:#fff1de;border:1px solid #bf552b;box-shadow:0 3px 0 #b44b22}
@media(min-width:1450px){.instrument{min-height:460px}.canvaswrap{height:318px}.knob{width:68px;height:68px}.knob:after{left:32px;transform-origin:1.5px 24px}.macrointro{width:202px}.automated .macrointro{width:202px}}
@media(max-width:1150px){body{padding:22px}.instrument{grid-template-columns:175px minmax(0,1fr) 205px}.macrointro{width:140px;padding:24px 14px}.output{width:190px;padding:19px 13px}.knob{width:53px;height:53px}.knob:after{left:25px;top:9px;height:12px;transform-origin:1.5px 17.5px}.mode button{min-width:90px;padding:10px 12px}.signaloutputs{gap:10px;padding:14px 10px}.status{margin-right:10px}.paramtitle{font-size:18px}.parameters{padding:17px 13px}}
@media(max-width:900px){body{padding:15px}header,main{padding-left:20px;padding-right:20px}.brand>span{display:none}.status{margin-left:auto}.toolbar{gap:12px}.clock{margin-left:auto}.mode button{min-width:0;font-size:9px;padding:10px}.mode button:before{margin-right:7px}.instrument{grid-template-columns:160px minmax(0,1fr)}.parameters{grid-column:1/-1;border-left:0;border-top:1px solid #acb59b;display:grid;grid-template-columns:140px 1fr;gap:15px}.parameters>.sectiontitle{grid-column:1/-1}.paramtitle{margin:0}#parameters{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.param{margin:0}.paramnote{display:none}.macrointro{display:none}.output{width:180px}.knob{width:48px;height:48px}.knob:after{left:23px;top:8px;height:10px;transform-origin:1.5px 16px}.macro b:before{display:none}.macro b{font-size:8px}.signaloutputs .right{display:none}.automated .parameters{display:none}}
@media(max-width:680px){body{padding:8px 8px 22px}header{height:75px;padding:0 16px}.brand{font-size:16px}.status{display:none}header>button:first-of-type{margin-left:auto}main{padding:0 12px}.toolbar{flex-wrap:wrap;padding:14px 0}.mode{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.mode button{font-size:10px;min-height:36px}.clock{margin:6px 0 0 auto;font-size:8px;gap:12px}.clock input{font-size:16px;width:52px}.patchbar{padding:19px 0}.patchbar h1{font-size:21px}.patchbar p{font-size:8px;max-width:240px;line-height:1.5}.patchbar>div>small{font-size:7px}.patchnav{gap:4px}.patchnav button{padding:9px 11px}.instrument{grid-template-columns:1fr}.generators{border-right:0;padding:12px;border-bottom:1px solid #aeb99e}.generators>.sectiontitle{padding:0 0 10px}#generators{display:flex;gap:6px;overflow:auto;padding-bottom:4px}.gen{min-width:110px;flex:1;padding:10px 7px;gap:5px;margin:0}.gen .icon{font-size:19px;min-width:17px}.gen b{font-size:8px}.gen small{font-size:6px}.gen .genled{font-size:6px}.add{width:auto;font-size:8px;padding:7px 12px;margin-top:9px}.bus{display:none}.visual{margin:10px;border-width:4px}.visualtop{height:56px;padding:13px 10px}.canvaswrap{height:260px}.parameters{padding:14px;grid-template-columns:1fr}.paramtitle{font-size:19px}.paramtitle select{width:95px}#parameters{grid-template-columns:repeat(2,1fr);gap:19px}.param label{font-size:9px}.param input{margin-top:13px;margin-bottom:8px}.macros{flex-wrap:wrap}#macros{flex-basis:100%;width:100%;display:grid;grid-template-columns:repeat(6,1fr);gap:5px;padding:20px 8px}.knob{width:43px;height:43px}.knob:after{left:20px;top:8px;transform-origin:1.5px 13.5px}.knob:before{inset:4px}.macro b{font-size:7px;margin-top:12px}.macro output{font-size:7px}.output{width:100%;display:flex;align-items:center;justify-content:space-between;border-left:0;border-top:1px solid #b0bba1;padding:16px 12px;gap:10px}.output .sectiontitle{font-size:7px}.output .sectiontitle span{display:none}.meters{width:65px;margin:0}.outputrow{margin:0;gap:6px}.outputrow input{width:55px}.output label{margin:0;font-size:7px}.output label span{display:none}.presets{padding-top:20px}#presets{grid-template-columns:1fr 1fr;gap:9px}.preset{padding:12px 10px;gap:8px;min-height:67px}.preset b{font-size:8px}.preset small{font-size:6px;line-height:1.4}.preset .art{font-size:25px;width:25px}.preset .number{font-size:7px}footer{padding:23px 0;font-size:6px;gap:10px}footer span:last-child{display:none}.automated .canvaswrap{height:320px}}