/* BB-01 / service-aged polymer housing */
:root{--housing:#4a4b3d}
body{background-color:#161b17;background-image:radial-gradient(ellipse at 25% 10%,#74715b16,transparent 60%),repeating-linear-gradient(0deg,#fff1 0 .3px,transparent .3px 4px)}
header,main{background-color:var(--housing);background-image:radial-gradient(ellipse at 3% 15%,#cbc0a520,transparent 25%),radial-gradient(ellipse at 96% 68%,#171a1555,transparent 27%),radial-gradient(ellipse at 40% 0,#b3aa8620,transparent 45%),repeating-linear-gradient(12deg,#f8edc208 0 .6px,transparent .6px 8px),repeating-linear-gradient(94deg,#0000000b 0 .5px,transparent .5px 5px),linear-gradient(110deg,#ffffff03,#00000009)}
header{box-shadow:inset 0 1px 0 #a39b7c99,inset 1px 0 0 #a39b7c55,inset 0 3px 9px #171b1566,0 0 0 1px #131b13}
main{box-shadow:inset 1px 0 0 #aaa08766,inset -2px 0 2px #12180e77,inset 0 -3px 5px #10180f77,0 7px 0 #2e3025,0 9px 0 #181e14,0 24px 40px #0008}
/* Fine-grained surface texture is generated locally, with no image assets. */
header,main,.instrument,.macros,#advanced{background-blend-mode:normal}
main:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:6;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23c9c0a1' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E");background-size:180px 180px;mix-blend-mode:soft-light}
.brand{color:#d4c49d;text-shadow:1px 0 #2a3023,-.4px .5px #a59b77}.brand b{opacity:.9}.brandmark{opacity:.83}.status{color:#a6a183}
.toolbar{border-top-color:#282d22;border-bottom-color:#292e22;box-shadow:0 1px 0 #a09a7455,inset 0 1px #9b927055}
.patchbar>div>small{color:#bca372}.patchbar h1{color:#d4c7a2}.patchbar p{color:#aaa88a}
.instrument{background-color:#3c4331;background-image:radial-gradient(ellipse at 0 100%,#141d1155,transparent 35%),radial-gradient(ellipse at 85% 15%,#b0a5770d,transparent 30%),repeating-linear-gradient(8deg,#e6d9a304 0 .6px,transparent .6px 6px);border-color:#21291b;box-shadow:inset 0 2px 5px #000a,inset 0 0 0 5px #2c3322,0 1px 0 #99926e66}
.generators,.parameters{border-color:#252e1f}.parameters{background:radial-gradient(ellipse at 85% 80%,#17220f33,transparent 70%)}
.macros{background-color:#3e4931;background-image:radial-gradient(ellipse at 30% 0,#b9ad8222,transparent 50%),radial-gradient(ellipse at 80% 100%,#18231044,transparent 45%),repeating-linear-gradient(4deg,#d5c89105 0 1px,transparent 1px 11px);box-shadow:inset 0 2px 6px #0009,inset 1px 0 #a49c6866,0 1px #aaa06e44}
.output{background:linear-gradient(100deg,#343f29,#303a25);box-shadow:inset 2px 0 5px #0007,inset -2px -2px 6px #1a230f55}
/* Yellowed ABS key faces, polished where fingers repeatedly make contact. */
:is(header>button,.mode button,.clock button,.patchnav button,.gen,.add,.preset,.viztabs button,#addRoute,.route button,dialog button){
 --face-top:#a69d80;--face-bottom:#c2b493;--rim-top:#c8bd9b;--rim-right:#948d6b;--rim-bottom:#797358;--rim-left:#b4aa86;
 background:radial-gradient(ellipse at 48% 65%,#f9edcb18,transparent 65%) padding-box,repeating-linear-gradient(9deg,#fff8cf05 0 .5px,transparent .5px 5px) padding-box,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;
 box-shadow:0 0 0 2px #171f12,0 0 0 4px #2d3422,0 2px 0 4px #a49a6e44,inset 0 3px 6px #51472e66,inset 0 -1px 0 #d7c79966!important;
}
:is(.mode button.active,.preset.active,.clock #play[aria-label="Stop audio"],dialog button){--face-top:#9f4926;--face-bottom:#c37c43;--rim-top:#c49360;--rim-right:#9c5a34;--rim-bottom:#693c25;--rim-left:#bb8550;--key-ink:#f0d5a0}
:is(.gen.active,.clock #sync.selected,.viztabs button.selected){--face-top:#375552;--face-bottom:#557d77;--rim-top:#79978a;--rim-right:#466961;--rim-bottom:#344b43;--rim-left:#6b8a7c;--key-ink:#dbe1bd}
.gen{position:relative}.gen:not(.active):nth-child(2){--face-top:#a7a187;--face-bottom:#bbb295}.gen:not(.active):nth-child(3){--face-top:#a49a7c;--face-bottom:#baac87}.gen:not(.active):nth-child(4){--face-top:#aaa286;--face-bottom:#c8bd9d}.gen:not(.active):nth-child(5){--face-top:#9d977c;--face-bottom:#b6ac8a}
.gen:after{content:'';position:absolute;pointer-events:none;inset:2px;background:linear-gradient(109deg,transparent 10%,#ede0b033 10.2%,transparent 10.8%),linear-gradient(176deg,transparent 80%,#413a2122 80.3%,transparent 81%),radial-gradient(ellipse at 4% 5%,#dfd0a433,transparent 10%);border-radius:2px;opacity:.6}.gen small{opacity:.8}.gen.active :is(b,small,.icon,.genled){color:#d9dfbb!important}.gen .icon{opacity:.8}
.preset{background-blend-mode:normal}.preset:after{display:block;content:'';position:absolute;pointer-events:none;inset:0;background:linear-gradient(170deg,transparent 8%,#f4e2ac33 8.3%,transparent 8.8%),linear-gradient(100deg,transparent 94%,#312c1933 95%,transparent 96%),radial-gradient(ellipse at 0 100%,#473b1b55,transparent 20%);border-radius:2px;opacity:.65}.preset.active:after{display:block}.preset b{opacity:.9}.preset .number{opacity:.75}.preset.active :is(b,small,.art,.number){color:#edcf98!important}.preset small{opacity:.8}.preset .art{opacity:.65}
.mode button{position:relative}.mode button.active:after{background:#e9c475;box-shadow:0 0 4px #ddb664}.mode button:before{opacity:.7}.mode button.active:before{color:#d8bc88}
.knob:before{filter:saturate(.78) brightness(.93)}.knob:after{box-shadow:.6px .4px #e4d4a344}.knob{box-shadow:0 0 0 4px #24321d,inset 0 1px 4px #000,0 1px 0 5px #8b916555}
.visual{border-color:#1d281c;box-shadow:0 0 0 1px #777b55,inset 0 2px 14px #000b,0 1px 0 #b5a97744}.visual:after{background:repeating-linear-gradient(0deg,#00000016 0 1px,transparent 1px 3px),linear-gradient(130deg,#ddce9e0c,transparent 40%),linear-gradient(24deg,transparent 22%,#d5dfb009 22.1%,transparent 22.3%),linear-gradient(155deg,transparent 73%,#d5dfb009 73.1%,transparent 73.3%);box-shadow:inset 0 0 30px #0008}
/* Service label and rubbed legends, printed on the housing rather than floating cards. */
.patchbar:after{content:'SERVICE 07 / DEEP RANGE';color:#aa9d78;letter-spacing:1.4px}.presets:after{content:'CAUTION / KEEP CLEAR OF MAGNETIC FIELDS';color:#9b9877;font-size:6px}.macros:before{width:55px;background:repeating-linear-gradient(120deg,#ae975e 0 4px,#343b25 4px 8px);opacity:.55}.sectiontitle{color:#b1af8b}.sectiontitle span{color:#849273}.param label{color:#afb894}.paramnote{color:#899b77}footer{color:#979b78;border-color:#8d875033}footer span:last-child{color:#aaa07b}#advanced{background:#38452d}
@media(max-width:680px){.presets:after{display:none}.patchbar:after{font-size:5px}main:after{opacity:.1}}