/* BB-01 / recessed console, revision C */
:root{--text:#d0c6ab;--muted:#8d927f;--line:#343d35;--panel:#30392f;--lime:#e4ac56;--orange:#dc652c;--cyan:#70b9c7;--pink:#cd947a;--amber:#d8b463}
body{background:#171d19;background-image:repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 4px),radial-gradient(ellipse at 50% 0,#394436,transparent 75%);padding-top:28px;color:var(--text)}
header,main{background-color:#3d483a;background-image:repeating-linear-gradient(0deg,#d7d2b703 0 1px,transparent 1px 3px),linear-gradient(110deg,#ffffff05,transparent 30%,#0000000a 80%);border-color:#151f17}
header{border-radius:9px 9px 0 0;box-shadow:0 1px 0 #75816a inset,0 0 0 1px #131b13;min-height:94px}
main{border-radius:0 0 9px 9px;box-shadow:inset 1px 0 #75816a66,inset -1px 0 #0006,0 7px 0 #222e21,0 9px 0 #131d14,0 24px 40px #0006}
header:before,header:after{background:radial-gradient(circle at 30% 25%,#8f9380,#3a4235 75%);border-color:#172316;color:#172117;box-shadow:inset 0 1px 1px #d7d9bd66,0 1px 0 #87957655;width:13px;height:13px;font-size:14px;line-height:12px}
.brand{color:#e0d7b9;font-family:monospace;letter-spacing:-1px}.brand b{font-weight:600;text-transform:uppercase}.brandmark em{background:#d0c6a5;box-shadow:1px 0 #968c6d}.brand sup{color:#a9aa8e}.brand>span:not(.brandmark){border-color:#66705b;color:#aaa990}.status{color:#aaa991}.status span{color:#7b8972}.status i{background:#ecb864;box-shadow:0 0 5px #ecb86466}
.toolbar{border-color:#202c21;box-shadow:0 1px 0 #62705477,inset 0 1px #65735755;padding:17px 0}.mode{background:#1d291f;padding:6px;border-radius:6px;box-shadow:inset 0 3px 6px #000a,0 1px 0 #71846277;gap:7px}.mode button{min-width:114px}#modeHint{color:#a0a28a;font-size:9px}.clock{color:#b7b49a}.clock small{color:#8b997d}.clock input{background:#151f17;color:#ebbd72;box-shadow:inset 0 2px 6px #000c,0 1px 0 #78866c55;border:3px solid #283627;border-radius:3px;text-shadow:0 0 7px #d6a15144}.clock button{margin-left:2px}
.patchbar{padding:25px 0 23px;position:relative}.patchbar>div>small{color:#c3aa78;letter-spacing:1.7px;font-size:8px}.patchbar>div>small:before{content:'▰ ';color:#d9ab54;margin-right:5px}.patchbar h1{color:#e1d8b8;font-family:monospace;letter-spacing:-1.3px;font-size:25px;text-shadow:0 1px #1118}.patchbar h1 span{color:#9caa8c}.patchbar p{color:#a2ab91;font-size:9px}.patchnav{background:#243023;padding:6px;border-radius:6px;box-shadow:inset 0 3px 5px #0009,0 1px 0 #7c89685c;gap:7px}
/* A dark gasket and downward shadows make each control sit inside the faceplate. */
:is(header>button,.mode button,.clock button,.patchnav button,.gen,.add,.preset,.viztabs button,#addRoute,.route button,dialog button){
 --face-top:#aaa58f;--face-bottom:#c4bda5;--rim-top:#d3cbb2;--rim-right:#a59e86;--rim-bottom:#847e67;--rim-left:#c4bca2;--key-ink:#283025;
 border-width:4px!important;border-radius:5px!important;
 box-shadow:0 0 0 2px #101b12,0 0 0 4px #253124,0 2px 0 4px #74836366,inset 0 3px 5px #504a3255,inset 0 -1px 0 #d8d1b288!important;
 text-shadow:0 1px 0 #e3d8b944;transform:none;
 background:linear-gradient(180deg,var(--face-top),var(--face-bottom)) padding-box,conic-gradient(from -40deg,var(--rim-top),var(--rim-top) 75deg,var(--rim-right) 125deg,var(--rim-bottom) 205deg,var(--rim-left) 285deg,var(--rim-top)) border-box!important;
}
:is(header>button,.mode button,.clock button,.patchnav button,.gen,.add,.preset,.viztabs button,#addRoute,.route button,dialog button):hover{transform:none;filter:brightness(1.075)}
:is(header>button,.mode button,.clock button,.patchnav button,.gen,.add,.preset,.viztabs button,#addRoute,.route button,dialog button):active{transform:translateY(1px);box-shadow:0 0 0 2px #101b12,0 0 0 4px #253124,inset 0 5px 8px #1116,inset 0 -1px 0 #d8d1b244!important}
:is(.mode button.active,.preset.active,.clock #play[aria-label="Stop audio"],dialog button){--face-top:#ae431e;--face-bottom:#d57637;--rim-top:#d89551;--rim-right:#ad542b;--rim-bottom:#76351d;--rim-left:#c97e40;--key-ink:#ffebbd;text-shadow:0 1px 1px #67210e;box-shadow:0 0 0 2px #101b12,0 0 0 4px #253124,0 2px 0 4px #74836366,inset 0 3px 6px #5f220c77,inset 0 -1px 0 #e3a56f66!important}
:is(.gen.active,.clock #sync.selected,.viztabs button.selected){--face-top:#244b5b;--face-bottom:#3b7788;--rim-top:#6a9caa;--rim-right:#326170;--rim-bottom:#243e4a;--rim-left:#527f8d;--key-ink:#d7e8d8;text-shadow:0 1px 1px #173540;box-shadow:0 0 0 2px #101b12,0 0 0 4px #253124,0 2px 0 4px #74836366,inset 0 3px 6px #152e3a88,inset 0 -1px 0 #91bdc366!important}
.mode button{border-width:5px!important;border-radius:3px!important;padding:10px 13px;font-size:10px;min-height:43px}.mode button:before{color:#5d604e}.mode button.active:before{color:#e7c396}.mode button.active:after{background:#ffdf93;box-shadow:0 0 4px #ffd879}.clock #play{min-width:38px}.clock #sync{font-weight:600}.patchnav button{border-radius:3px!important}.patchnav button:last-child{color:var(--key-ink)}
.instrument{background:#303d2d;background-image:linear-gradient(90deg,#ffffff03,transparent 50%);border:1px solid #192719;border-radius:5px;box-shadow:inset 0 2px 4px #0008,inset 0 0 0 5px #263524,0 1px 0 #74836688;overflow:visible;padding:5px}.generators{border-color:#1c2b1d;padding:18px 13px}.generators>.sectiontitle{padding-left:1px;padding-right:1px}.sectiontitle{color:#b6b59a;font-size:8px;letter-spacing:1.3px}.sectiontitle span{color:#7b8e70}.sectiontitle button{color:#b3b89a}.gen{border-width:5px!important;min-height:62px;padding:9px 10px;margin-bottom:12px;border-radius:5px!important}.gen b{color:#2b3325;font-size:10px}.gen small{color:#59604b}.gen .icon{filter:saturate(.5);text-shadow:0 1px #e7dfc388}.gen.active :is(b,small,.icon,.genled){color:#d8e5cd!important}.gen .genled{font-size:6px}.add{margin-top:5px;padding:8px 10px;font-size:8px}.bus{color:#a2b58d}.bus span{color:#b2c49c}.bus small{color:#7e9471;font-size:7px}.busline{border-color:#576e45;background:repeating-linear-gradient(90deg,transparent 0 12px,#7d9564 12px 13px,transparent 13px 24px)}.bus i{background:#b3c77b}
.visual{margin:10px;border:6px solid #17241a;border-radius:9px;background:#101e15;box-shadow:0 0 0 1px #57664a,inset 0 2px 14px #000b,0 1px 0 #7f8f6966;position:relative;overflow:hidden}.visual:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,#00000016 0 1px,transparent 1px 3px),linear-gradient(130deg,#d7e6b408,transparent 40%);box-shadow:inset 0 0 30px #0006;pointer-events:none;border-radius:3px}.visualtop{background:#15251a;height:64px;padding:14px 17px}.visualtop b{font-size:11px;color:#d4d6a6}.visualtop small{color:#849b69;font-size:7px}.dot{background:#d4af64!important;box-shadow:0 0 4px #d4af6444}.viztabs{gap:10px;padding:3px}.viztabs button{border-width:3px!important;border-radius:3px!important;padding:5px 7px;min-height:25px;--face-top:#6c7760;--face-bottom:#8a9578;--rim-top:#919b80;--rim-right:#56644c;--rim-bottom:#45533b;--rim-left:#7a876a;--key-ink:#142311;font-size:7px}.viztabs button.selected{--face-top:#285564;--face-bottom:#3d7988;--rim-top:#71999b;--rim-right:#315d65;--rim-bottom:#233d45;--rim-left:#497b82;--key-ink:#d3e2c5}.canvaswrap{background:radial-gradient(ellipse,#1d3422,#12251a 85%);border-color:#3a5432;margin:0 12px}.plotlabel{color:#8ca474;letter-spacing:1.3px}.plotlabel span{color:#55754b}.plotbottom{color:#adc589;font-size:7px}.plotbottom i{background:#d2d995;box-shadow:0 0 4px #c9d89266}.signaloutputs{background:#14271a;color:#6d8b57;padding:15px 18px}.signaloutputs small{color:#c9d39e}.signaloutputs .right{color:#668755}.parameters{border-color:#1b2b1c;padding:20px 17px}.paramtitle{color:#d3d1af;font-family:monospace;font-size:21px;letter-spacing:-1px}.paramtitle select{border:3px solid #1c2d1d;background:#243a25;color:#b7c59a;box-shadow:inset 0 2px 4px #0006,0 1px #627d4b55;font-size:8px}.param label{color:#a2b38d;font-size:9px}.param output{color:#e4bc72;text-shadow:0 0 4px #d4a55b33}.param input{background:#142817;box-shadow:0 1px #65864d66;height:4px;border:1px solid #1d301e}.param input::-webkit-slider-thumb{background:linear-gradient(90deg,#8f977c,#c9c9a9 45%,#879778);border:2px solid #152918;box-shadow:0 1px 0 #73995b,0 0 0 1px #48623a;width:13px;height:19px;border-radius:2px}.paramnote{font-size:8px;color:#7d9670}.paramnote span{color:#d7a75a}
.macros{border:1px solid #192919;border-radius:4px;background:linear-gradient(#354730,#31412c);box-shadow:inset 0 2px 5px #0008,0 1px #7d8e6566;padding:5px;margin-top:18px;position:relative}.macrointro{padding:25px 18px}.macrointro small{color:#a7b18e;font-size:7px}.macrointro h2{font:18px/1.2 monospace;letter-spacing:-1px;color:#c1c6a3}.macrointro p{font-size:7px;color:#859c72}.macro b{color:#c1c7a2;font-size:9px}.macro b:before{color:#749361}.macro output{color:#a6bf8a;font-size:8px}.knob{background:conic-gradient(from 225deg,#c4cfa3 calc(var(--v)*2.7deg),#49623d 0 270deg,transparent 0);box-shadow:0 0 0 4px #1a301b,inset 0 1px 4px #000;border-radius:50%}.knob:before{background:repeating-conic-gradient(#969b7b 0 4deg,#6e7b5e 4deg 7deg);border-color:#4c6040;box-shadow:0 2px 0 #152b17,0 3px 5px #0006,inset 0 1px 0 #c4c9a566}.knob:after{background:#263c22}.macro:nth-child(1) .knob:before{background:repeating-conic-gradient(#c4967b 0 4deg,#aa8065 4deg 7deg);border-color:#7f674a;box-shadow:0 2px 0 #152b17,0 3px 5px #0006}.macro:nth-child(1) .knob:after{background:#62442c}.macro:nth-child(2) .knob:before{background:repeating-conic-gradient(#6a9291 0 4deg,#4b7471 4deg 7deg);border-color:#3d625a;box-shadow:0 2px 0 #152b17,0 3px 5px #0006}.macro:nth-child(2) .knob:after{background:#1c4442}.macro:nth-child(3) .knob:before{background:repeating-conic-gradient(#b9aa70 0 4deg,#9b8e53 4deg 7deg);border-color:#796d3b;box-shadow:0 2px 0 #152b17,0 3px 5px #0006}.macro:nth-child(3) .knob:after{background:#5d542c}.macro:nth-child(6) .knob:before{background:repeating-conic-gradient(#d08243 0 4deg,#b26832 4deg 7deg);border-color:#8d5128;box-shadow:0 2px 0 #152b17,0 3px 5px #0006}.macro:nth-child(6) .knob:after{background:#713c21}
.output{border-color:#1d301d;background:#293d26;border-radius:0 2px 2px 0;box-shadow:inset 2px 0 5px #0004}.output .sectiontitle{color:#b4c099}.output .sectiontitle span{color:#8d9e77}.meters{background:#112614;border:3px solid #1d321d;box-shadow:inset 0 2px 4px #000,0 1px #708b5155;border-radius:2px}.meters div{background:repeating-linear-gradient(90deg,#c5bb6f 0 4px,transparent 4px 6px);filter:drop-shadow(0 0 2px #b3c77c66)}.outputrow{color:#9aaf83}.outputrow input{accent-color:#bcbf8d}.outputrow small{color:#dfc07c}.output label{color:#a5b78d}.output label span{color:#c4cc9e}.output label input{accent-color:#b1bc84}
.presets{padding-top:26px;position:relative}.presets>.sectiontitle{color:#c7c6a6}.presets>.sectiontitle span{color:#8c9c7b}#presets{gap:13px;background:#202f22;box-shadow:inset 0 3px 7px #000a,0 1px #75886677;border:1px solid #1c291d;border-radius:5px;padding:12px;margin-top:13px}.preset{min-height:98px;border-width:6px!important;border-radius:4px!important;padding:13px 13px;align-items:center;position:relative}.preset b{font:10px/1.5 monospace;letter-spacing:-.2px;color:#283325}.preset small{font-size:6px;color:#60664f;letter-spacing:.3px}.preset .number{font:8px monospace;color:#5c654d}.preset .art{font-size:30px;filter:saturate(.4);text-shadow:0 1px #e1d1a377}.preset.active :is(b,small,.art,.number){color:#ffe6b3!important}.preset.active small{opacity:.8}.preset.active:before{content:'';position:absolute;left:6px;top:6px;width:9px;height:2px;background:#f6d29b77;transform:rotate(-15deg)}
#advanced{background:#2e412b;border-color:#162917;border-radius:4px;box-shadow:inset 0 3px 6px #0007,0 1px #79906266;margin-top:18px}.route{background:linear-gradient(#3e5135,#35462e);border:2px solid #1e321d;border-radius:4px;box-shadow:inset 0 2px 5px #0006,0 1px #6e855455;color:#b3c39b}.route label{color:#a4b98d}.route select{background:#233b23;border:2px solid #172c17;color:#bdd0a2;border-radius:2px;font-size:8px}.route input[type=range]{accent-color:#b8bc84}.route button{--face-top:#8e8f6e;--face-bottom:#a8ad87;--rim-top:#b5b799;--rim-right:#757e5c;--rim-bottom:#5e6949;--rim-left:#9a9f7b;--key-ink:#263a21}.route label input[type=checkbox]{accent-color:#6c9ca1}footer{color:#8d9f7c;font-size:7px;padding:26px 0 24px;border-top:1px solid #52644844;margin-top:21px}footer i{background:#c6b56a}footer span:last-child{color:#b0ad8b}#toast{background:#172b1c;color:#dbc68e;border:1px solid #8e9a67;box-shadow:0 4px 12px #0008;border-radius:3px}dialog{background:#344a2e;color:#c8d0a9;border:5px solid #1e321f;border-radius:5px;box-shadow:0 0 0 1px #738a58}dialog h2{font-family:monospace;color:#e0ca93}
/* Stenciled safety marks and scuffed edges, kept outside control labels. */
.macros:before{content:'';position:absolute;top:-1px;left:14px;width:40px;height:3px;background:repeating-linear-gradient(120deg,#b8a15a 0 4px,#293a25 4px 8px);opacity:.6}.patchbar:after{content:'REC / PLAY / REPEAT';position:absolute;right:0;bottom:7px;font:6px monospace;letter-spacing:1.6px;color:#849576}.presets:after{content:'MEMORY MODULE / DO NOT EJECT';font:6px monospace;letter-spacing:1px;color:#809270;position:absolute;right:12px;top:27px}.instrument:before{content:'';position:absolute;pointer-events:none}.automated .visual{margin:10px}.automated .canvaswrap{min-height:350px}
@media(max-width:1150px){.mode button{min-width:96px;padding:9px 10px}.gen{padding:9px 7px}.gen b{font-size:9px}.preset{padding:11px 9px;gap:10px}.preset b{font-size:9px}.preset small{font-size:6px}}
@media(max-width:900px){.mode button{min-width:0;padding:9px 10px}.parameters{border-top-color:#1b2d1c}.gen b{font-size:8px}.gen{min-height:62px}.paramtitle{font-size:19px}.preset{min-height:95px}#presets{padding:11px;gap:11px}.output{padding:19px 13px}.preset b{font-size:9px}}
@media(max-width:680px){body{padding:10px 8px 24px}.toolbar{padding:12px 0}.mode{width:100%;gap:9px;padding:7px}.mode button{font-size:9px;padding:7px 6px;min-height:42px}.clock{margin-top:9px;margin-bottom:4px}.patchbar{padding:19px 0 26px}.patchbar h1{font-size:21px}.patchbar:after{font-size:5px;bottom:8px}.patchnav{gap:9px;padding:6px}.patchnav button{min-height:35px;padding:5px 9px}.instrument{padding:3px;overflow:hidden}.generators{padding:13px 10px;border-bottom-color:#1c301d}#generators{gap:12px;padding:5px 4px 7px}.gen{min-width:124px;min-height:61px;margin:0 0 2px;padding:9px 7px;border-radius:4px!important}.gen b{font-size:9px}.add{margin:10px 4px 5px}.visual{margin:8px;border-width:5px}.visualtop{height:62px;padding:12px}.visualtop b{font-size:10px}.visualtop small{font-size:6px}.viztabs{gap:8px}.viztabs button{padding:4px 5px;font-size:6px}.canvaswrap{margin:0 8px;min-height:240px}.parameters{padding:16px 12px}.paramtitle{font-size:19px}.param label{font-size:9px}.macros{padding:5px;margin-top:14px}.macro b{font-size:7px}.macro output{font-size:7px}.output{border-top-color:#172d19;border-radius:0;padding:16px 10px;box-shadow:inset 0 2px 4px #0004}.presets{padding-top:23px}.presets:after{display:none}.presets>.sectiontitle{font-size:7px;gap:12px}#presets{grid-template-columns:1fr 1fr;gap:12px;padding:11px}.preset{border-width:5px!important;min-height:95px;padding:10px 7px;gap:7px}.preset b{font-size:9px}.preset small{font-size:5px}.preset .art{font-size:24px;width:25px}.preset .number{font-size:7px}footer{font-size:6px;letter-spacing:.3px;margin-top:18px;padding:21px 0}}