/* MB enclosure: ivory service chassis, charcoal instrument plates, amber LEDs. */
:root{--housing:#aa9572;--panel:#24251f;--text:#e1c79a;--muted:#bba67f;--line:#6d6048;--lime:#b9d394;--cyan:#c6d2b1;--amber:#e2b35d}
body{background:#11120f;background-image:radial-gradient(ellipse at 50% 25%,#4c493428,transparent 65%);padding:22px 24px 35px;color:#dfc69b;font-family:'Arial Narrow','Roboto Condensed',Arial,sans-serif}
header,main{max-width:1500px;margin-left:auto;margin-right:auto;background-color:#ac9877;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='130' height='130' opacity='.16' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(ellipse at 4% 10%,#e4cfa452,transparent 35%),radial-gradient(ellipse at 100% 90%,#3f342666,transparent 42%),repeating-linear-gradient(112deg,#29241611 0 .7px,transparent .7px 13px);box-shadow:inset 0 0 0 2px #d5c4a0,inset 0 0 0 5px #78694f,inset 0 0 16px #30271980,0 14px 30px #0009}
header{height:107px!important;min-height:107px;padding:14px 38px!important;border-radius:16px 16px 0 0;border-bottom:0;gap:22px;position:relative}main{padding:13px 30px 22px!important;border-radius:0 0 12px 12px;position:relative}main:after{opacity:.11;mix-blend-mode:multiply}header:before,header:after{content:'⊗';position:absolute;top:12px;color:#201f17;font-size:19px;text-shadow:0 1px #d7bf92}header:before{left:14px}header:after{right:14px;transform:none;background:none;width:auto;height:auto;box-shadow:none;border:0}.deck-vents{display:none}
.brand{padding:8px 22px!important;flex:1;justify-content:center;min-height:76px;border:3px solid #4a4030;border-radius:6px;background:linear-gradient(#1b1e18,#121710);box-shadow:inset 0 0 0 1px #b19b6b,0 2px 4px #342a2188;position:relative}.brand:before,.brand:after{content:'•';position:absolute;top:3px;color:#ac9364;font-size:17px}.brand:before{left:8px}.brand:after{right:8px}.brand .motherbox-logo{width:370px!important;height:61px!important;max-width:100%}.brand .motherbox-logo g{fill:#d3ba8c}.status{font:10px/1.7 monospace;color:#2c2c21!important;margin:0!important;max-width:125px;letter-spacing:.6px}.status i{background:#72884d;box-shadow:0 0 5px #a4c173}.status span{display:none}
.instrument{padding:8px!important;gap:10px!important;grid-template-columns:250px minmax(0,1fr)!important;background:#74654e!important;border:2px solid #4f4433!important;box-shadow:inset 0 1px #d2b88c,0 2px 3px #352c2088!important;border-radius:8px;overflow:visible!important;align-items:stretch}.instrument:has(#advanced:not([hidden])){grid-template-columns:250px minmax(0,1fr) 300px!important}.parameters{grid-column:1;grid-row:1;display:block!important;border:2px solid #0f130e!important;border-radius:6px!important;padding:13px!important;background:linear-gradient(130deg,#303029,#20251e)!important;box-shadow:inset 0 0 0 1px #71664f,inset 0 0 16px #0005!important;position:relative}.parameters>.sectiontitle{margin:12px 0;color:#dfc49a!important}.paramtitle{margin:8px 0 12px!important}.paramtitle #paramName{font-size:17px;color:#dec59c}.paramtitle select{background:#161d15;color:#dec59c;border-color:#796b50;font-size:10px}.generators{grid-column:auto;grid-row:auto;padding:0 0 10px!important;border:0!important;border-bottom:1px solid #71644a!important;background:none!important}.generators>.sectiontitle{color:#d1bb92!important;font-size:9px!important}.generators .bus{display:none}.generators #generators{display:flex!important;gap:7px!important;padding:7px 0!important;overflow:visible}.gen{width:33px!important;height:34px!important;min-width:33px!important;min-height:34px!important;flex:0 0 33px!important;padding:4px!important;border-radius:3px!important;box-shadow:0 0 0 2px #11180e,0 3px 4px #0008!important}.gen .icon,.gen .icon svg{width:20px!important;height:20px!important}.gen:not(.active){--face-top:#615b46;--face-bottom:#918267;--rim-top:#b29c71;--rim-right:#4b4634;--rim-bottom:#3f3d2e;--rim-left:#a99368}.gen.active{--face-top:#775a28;--face-bottom:#b3873d;--rim-top:#e0b56e;--rim-right:#715126;--rim-bottom:#41381d;--rim-left:#cba363}.gen .icon{color:#e4cfa7!important}.generators .add{margin:5px 0 0!important;min-height:26px}
.visual{grid-column:2;grid-row:1;margin:0!important;border:9px solid #151b13!important;border-radius:20px!important;box-shadow:0 0 0 2px #76664c,inset 0 0 25px #000,0 4px 9px #0009!important;background:#0a1a0e!important;overflow:hidden}.canvaswrap,.automated .canvaswrap{height:270px!important;min-height:270px!important;max-height:270px!important;margin:0!important;background:radial-gradient(ellipse,#183b18,#06150b 80%)!important;box-shadow:inset 0 0 45px 10px #000;border-radius:9px}.visualtop{background:#151d13!important;border-bottom:1px solid #5d593c!important;color:#d3ba8b!important;min-height:45px}.visualtop b,.visualtop small{color:#cfbd8f!important}.visualtop .dot{background:#b2d47c!important;box-shadow:0 0 7px #a5df72}.plotlabel,.plotbottom{color:#a5ce88!important}.signaloutputs{background:#111b11!important;border-top:1px solid #615b3c;color:#c4b786!important}.axis{color:#88b477!important}
#parameters{grid-template-columns:1fr 1fr!important;gap:15px!important}.param label{color:#e0c395!important;align-items:center!important;font-family:'Arial Narrow',Arial,sans-serif!important;font-size:11px!important;letter-spacing:.8px}.param .rotary-control{display:flex;justify-content:center;margin:8px auto 0!important}.param label>.digital-screen{order:2;margin-top:7px!important}.rotary-cap{background:radial-gradient(circle at 40% 26%,#ddcba3,#b2a078 59%,#685a3f 63%,#28291c 70%)!important;border-color:#171d12!important;box-shadow:0 0 0 2px #806e4a,0 4px 6px #000b,inset 0 1px 1px #f4e1ae!important}.rotary-cap:after{background:#282a1c!important;box-shadow:none}.rotary-control:hover .rotary-cap{outline:1px solid #c7ac73;outline-offset:3px}.rotary-cap{width:43px;height:43px;flex-basis:43px}.rotary-cap:after{left:17px;transform-origin:1px 14px}.performance-row .rotary-cap{width:32px;height:32px;flex-basis:32px}.performance-row .rotary-cap:after{left:12px;transform-origin:1px 10px}
#advanced{grid-column:3;grid-row:1;margin:0!important;min-width:0;background:linear-gradient(120deg,#c7b38e,#ac9674)!important;border:2px solid #3e3929!important;box-shadow:inset 0 0 0 1px #e1cca4,0 2px 5px #0007!important;padding:13px!important;border-radius:6px}.advanced-title,.advanced-title .sectiontitle,#advanced>.sectiontitle,#advanced .sectiontitle{color:#272b20!important}.route{background:none!important;border:0!important;border-top:1px solid #625a44!important;border-radius:0;padding:10px 0!important;gap:6px!important;color:#232b1d!important}.route label,.route output{color:#283120!important;font-size:10px!important}.route select{background:#1c2418!important;color:#d6c69d!important;border:1px solid #74694b!important;font-size:10px!important}.route .target-select{width:135px!important;max-width:100%!important}.route button{background:#4c4936!important;color:#e2c690!important}.route .digital-value{width:47px!important;background:#1a2115!important;color:#e5c278!important}#routes{display:flex!important;flex-direction:column;gap:0!important;margin-top:8px}#advanced .sectiontitle span{font-size:8px!important}
.bass-editor,.performance-bar,.macros{background:linear-gradient(120deg,#2e3027,#20261e)!important;border:3px solid #171c13!important;border-radius:7px!important;box-shadow:inset 0 0 0 1px #7d6e4f,0 2px 3px #4f412f88!important;padding:15px!important}.bass-editor .sectiontitle,.sectiontitle,.bass-control label,.bass-check,.performance-row>label,.mutation-locks,.phrase-tools label,.step-detail label,.resample-actions label{color:#dbc296!important}.bass-control label{font-family:'Arial Narrow',Arial,sans-serif;font-size:11px!important;letter-spacing:.5px}.bass-control .control-unit{color:#ab9b75!important}.bass-control select,.step-detail input,.performance-bar select{background:#171d14!important;color:#e1c99b!important;border-color:#655c42!important}.bass-tabs{border-color:#695e43!important}.bass-tabs button,.control-subtabs button,.phrase-tools button,.bass-action,.performance-bar button,.fx-order button{background:linear-gradient(#3c3e30,#20271b)!important;color:#d9c195!important;border:2px solid #10170e!important;box-shadow:inset 0 1px 0 #8c7d5866,0 1px #706344!important;border-radius:2px!important}.bass-tabs button.active,.control-subtabs button.active{background:linear-gradient(#68532d,#9b773d)!important;color:#ffe0a5!important;box-shadow:inset 0 1px #e3bd77!important;border-color:#4c3e20!important}.control-subtabs button{font-size:10px!important}.bass-description,.keyboard-note,.keyboard-drawer summary,.keyboard-drawer summary span{color:#b9a980!important}.phrase-step{background:#151e13!important;border-color:#494936!important}.phrase-step.on{background:#8c7950!important}.phrase-step.on button,.phrase-step.on small{color:#f5db9f!important}.phrase-step input{accent-color:#c8a65d}.phrase-tools select{background:#1b2416!important;color:#d5c197!important;border-color:#6a6045!important}.fx-order>div{background:#192216!important;border-color:#6e6345!important;color:#d3bf91!important}
.digital-screen{background:linear-gradient(155deg,#27271b,#090e08 60%)!important;border:2px solid #100f0b!important;box-shadow:inset 0 2px 6px #000,0 0 0 1px #796442,0 2px 1px #453e2c!important;border-radius:1px!important}.segment.lit{fill:#ffbf49!important;filter:drop-shadow(0 0 1px #ff9d2780)}.segment{fill:#d29435}.segment-digits svg{filter:drop-shadow(0 0 3px #ff990044)!important}.segment-digits small{color:#dfac50!important}.digital-screen>.rotary-value{background:#14180d!important;color:#ffc55f!important}.knob{background:conic-gradient(from 225deg,#c6ad78 calc(var(--v)*2.7deg),#504b31 0 270deg,transparent 0)!important}.knob:before,.macro:nth-child(n) .knob:before{background:radial-gradient(circle at 35% 25%,#cebd92,#9a895e 68%,#554e32)!important;border-color:#3a3b26!important}.knob:after,.macro:nth-child(n) .knob:after{background:#292c19!important}.macro b,.macro output{color:#d8bd8b!important}.macro b:before{color:#9e9169!important}
.bass-monitor{background:#171e14!important;border:5px solid #34372a!important;box-shadow:inset 0 0 12px #000,0 0 0 1px #a08b60!important;border-radius:4px}.bass-monitor figcaption,.bass-readings{color:#c8c493!important}.output{background:#1e2619!important;border-left:1px solid #756445!important;box-shadow:inset 0 1px 5px #0008!important}.output .sectiontitle,#db,.outputrow,.output label{color:#d5bd8e!important}.meters{border-color:#756747!important;background:#10180d!important}.meters div{background:#c5a44c!important}.global-caption,.printed-trace-legend,.printed-trace-legend span+span,footer{color:#302e20!important}.toolbar{border-color:#746545!important}.mode{background:#675b41!important;border-color:#403c2a!important;box-shadow:inset 0 2px 4px #0005}.mode button{--face-top:#4c4b38;--face-bottom:#333c29;--rim-top:#8f8056;--rim-right:#48442d;--rim-bottom:#252d1d;--rim-left:#8b7b51;color:#d6bf8f!important}.mode button.active{--face-top:#796134;--face-bottom:#a17b3c;--rim-top:#dbb16b;--rim-right:#70552b;--rim-bottom:#4c4020;--rim-left:#be9b5e;color:#fff0c5!important}.global-controls>.patchbar{background:none!important}.preset-readout{background:radial-gradient(ellipse at 50% 0,#26331c,#101b10)!important;border-color:#242c1c!important;box-shadow:0 0 0 2px #786b4a,inset 0 0 20px #000!important}.preset-readout h1{color:#e6c787!important;text-shadow:0 0 5px #c3a65055!important}.readout-header,.readout-header #patchStatus{color:#b1a67a!important}.terminal-controls :is(button,#bpm){background:#121e10!important;color:#d8c18a!important;border-color:#776c47!important;text-shadow:none!important}.terminal-controls :is(#sync.selected,#play[aria-label="Stop audio"]){background:#c0a45d!important;color:#1e2916!important}.preset{--face-top:#a38d65;--face-bottom:#c0aa80;--rim-top:#ddc59a;--rim-right:#82704f;--rim-bottom:#6a5b3d;--rim-left:#cbb48b;color:#282c1e!important}.preset.active{--face-top:#8c6930;--face-bottom:#bb8b3c;--rim-top:#e3bc75;--rim-right:#775425;--rim-bottom:#4c3c1d;--rim-left:#bda062;color:#fff0bf!important}#presets{background:#6a5c43!important;border-color:#504631!important}.patchnav button,.viztabs button{--face-top:#4c4c37;--face-bottom:#333b29;--rim-top:#93835b;--rim-right:#4a442e;--rim-bottom:#252b1b;--rim-left:#8e7e53;color:#dbc394!important}.viztabs button.selected{--face-top:#7e683d;--face-bottom:#aa8947;--rim-top:#cbb376;--rim-right:#726035;--rim-bottom:#403c21;--rim-left:#b49b64;color:#fce9bb!important}.panel-traces{opacity:.9}.printed-audio{stroke:#3b3b25!important}.printed-control{stroke:#45513b!important}.panel-traces .audio-ink,.panel-traces .control-ink{fill:#353b27!important;stroke:#ac9877!important}.printed-trace-legend{padding-bottom:10px}.automated .instrument{grid-template-columns:1fr!important}.automated .visual{grid-column:1}.automated .parameters{display:none!important}input[type=checkbox]{accent-color:#bca264!important}
@media(max-width:1150px){.instrument,.instrument:has(#advanced:not([hidden])){grid-template-columns:230px minmax(0,1fr)!important}#advanced{grid-column:1/-1;grid-row:2}#routes{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 18px!important}.brand .motherbox-logo{width:310px!important}.status{font-size:9px}.canvaswrap{height:250px!important;min-height:250px!important}}
@media(max-width:680px){body{padding:10px 8px 20px}header{padding:11px 20px!important;height:91px!important;min-height:91px}.brand{padding:6px 12px!important;min-height:62px}.brand .motherbox-logo{width:250px!important;height:45px!important}.status{display:none}main{padding:10px 20px 16px!important}.instrument,.instrument:has(#advanced:not([hidden])){grid-template-columns:minmax(0,1fr)!important;padding:7px!important}.visual{grid-column:1;grid-row:1;border-width:7px!important}.parameters{grid-column:1;grid-row:2}.parameters .generators #generators{justify-content:flex-start}.parameters>.sectiontitle{margin-top:12px}#advanced{grid-column:1;grid-row:3}#routes{display:flex!important}.canvaswrap,.automated .canvaswrap{height:215px!important;min-height:215px!important;max-height:215px!important}.bass-editor,.performance-bar,.macros{padding:12px!important}.automated .parameters{display:none!important}.automated .visual{grid-row:1}.generators{display:block!important}.bass-control label{font-size:11px!important}.brand:before,.brand:after{font-size:13px}}
/* Keep the three plates at hardware proportions; routing scrolls within its bay. */
@media(min-width:1151px){.instrument{grid-template-rows:460px!important}.parameters{height:460px!important;overflow:auto}.visual{height:460px!important;display:flex;flex-direction:column}.visual .canvaswrap{flex:1;min-height:0!important;max-height:none!important;height:auto!important}.visualtop,.signaloutputs{flex-shrink:0}#advanced{height:460px;overflow:hidden;display:flex;flex-direction:column}#advanced[hidden]{display:none!important}#routes{flex:1;min-height:0;overflow:auto;scrollbar-color:#756547 #aa9671;scrollbar-width:thin;padding-right:4px}.route{flex-shrink:0}.automated .instrument{grid-template-rows:340px!important}.automated .visual{height:340px!important}}
.instrument{position:relative}.bolted{position:relative}.plate-fasteners{position:absolute;inset:5px;pointer-events:none;z-index:3;display:block;width:auto;height:auto;margin:0;background:radial-gradient(circle at 4px 4px,#17190f 0 1px,#9d875c 1px 2px,#252b1b 2px 4px,#635b3d 4px 5px,transparent 5.5px),radial-gradient(circle at calc(100% - 4px) 4px,#17190f 0 1px,#9d875c 1px 2px,#252b1b 2px 4px,#635b3d 4px 5px,transparent 5.5px),radial-gradient(circle at 4px calc(100% - 4px),#17190f 0 1px,#9d875c 1px 2px,#252b1b 2px 4px,#635b3d 4px 5px,transparent 5.5px),radial-gradient(circle at calc(100% - 4px) calc(100% - 4px),#17190f 0 1px,#9d875c 1px 2px,#252b1b 2px 4px,#635b3d 4px 5px,transparent 5.5px);border-radius:0}
.global-controls .presets>.sectiontitle,.global-controls .presets>.sectiontitle span{color:#353724!important}footer{color:#41432b!important}.gen.active{background:linear-gradient(#8e7138,#b59650)!important;color:#f7dda4!important}.gen:not(.active){background:linear-gradient(#4b4935,#7c7050)!important}.mode button.active{background:linear-gradient(#846a34,#ae8b43)!important}.preset.active{background:linear-gradient(#8c6c32,#b48b46)!important}.preset:not(.active){background:linear-gradient(#af9a73,#c8b78f)!important}.viztabs button{background:linear-gradient(#3c4230,#252e20)!important;color:#d6bf90!important}.viztabs button.selected{background:linear-gradient(#7d6838,#a58b49)!important}.gen .icon{color:#d3bc8b!important}.gen.active .icon{color:#fff0bf!important}.panel-traces marker path{stroke:#585339!important}
@media(max-width:1150px) and (min-width:681px){.instrument{grid-template-rows:430px auto!important}.parameters{height:430px;overflow:auto}.visual{height:430px;display:flex;flex-direction:column}.visual .canvaswrap{flex:1;height:auto!important;min-height:0!important;max-height:none!important}#advanced{max-height:440px;overflow:auto}.automated .visual{height:340px}.automated .instrument{grid-template-rows:340px!important}}
.generators{position:relative}.generators #add{position:absolute;right:0;top:-4px;width:24px!important;min-width:24px!important;min-height:23px!important;height:23px!important;padding:0!important;margin:0!important;font-size:14px!important;background:#4a4c33!important;color:#e3c795!important;border:1px solid #77694a!important;box-shadow:inset 0 1px #b19a6380!important}.generators .sectiontitle{padding-right:34px}.generators #genCount{margin-left:auto}.param{display:flex;flex-direction:column;align-items:center;gap:7px}.param>label{min-height:17px!important;margin:0!important}.param>.rotary-control{margin:0 0 2px!important}.param>.digital-screen{margin-top:3px;width:86px!important;min-width:86px!important;max-width:86px!important}.rotary-cap:before{content:'';position:absolute;inset:-8px;border-radius:50%;background:repeating-conic-gradient(from -135deg,#c2a874 0 1deg,transparent 1deg 18deg);mask:radial-gradient(circle,transparent 62%,#000 65% 70%,transparent 73%);opacity:.65;pointer-events:none}.performance-row .rotary-cap:before{inset:-6px;opacity:.35}.paramtitle{margin-top:10px!important;margin-bottom:15px!important}.instrument:has(#advanced:not([hidden])) .parameters{scrollbar-color:#8a7952 #23291d;scrollbar-width:thin}