/* Sculpted keycaps: orange = performance selection, blue = signal selection. */
:root{--key-orange:#ec480b;--key-blue:#263ee3}
body{background-color:#c9c7c1;background-image:radial-gradient(#a7a49d .45px,transparent .45px)}
header,main{background-color:#e0ded7}
:is(header>button,.mode button,.clock button,.patchnav button,.gen,.add,.preset,.viztabs button,#addRoute,.route button,dialog button){
 --face-top:#c3bfb6;--face-bottom:#eae6dd;--rim-top:#fffdf6;--rim-right:#d5cfc3;--rim-bottom:#979083;--rim-left:#eeeae1;--key-ink:#302f2c;
 color:var(--key-ink)!important;
 border:5px solid transparent!important;
 border-radius:11px!important;
 background:linear-gradient(180deg,var(--face-top),var(--face-bottom)) padding-box,conic-gradient(from -40deg,var(--rim-top) 0deg,var(--rim-top) 75deg,var(--rim-right) 125deg,var(--rim-bottom) 185deg,var(--rim-bottom) 230deg,var(--rim-left) 285deg,var(--rim-top) 360deg) border-box!important;
 box-shadow:0 0 0 1px #77716788,0 3px 2px #706a5f77,0 5px 8px #69615325,inset 0 2px 3px #766e5b26,inset 0 -1px 2px #fff8!important;
 text-shadow:0 1px 0 #fff5;
 transition:transform .12s,box-shadow .12s,filter .12s;
}
:is(header>button,.mode button,.clock button,.patchnav button,.gen,.add,.preset,.viztabs button,#addRoute,.route button,dialog button):hover{filter:brightness(1.035);transform:translateY(-1px)}
:is(header>button,.mode button,.clock button,.patchnav button,.gen,.add,.preset,.viztabs button,#addRoute,.route button,dialog button):active{transform:translateY(2px);box-shadow:0 0 0 1px #77716788,0 1px 1px #706a5f77,inset 0 2px 3px #766e5b26!important}
/* The first active family: orange performance keys. */
:is(.mode button.active,.preset.active,.clock #play[aria-label="Stop audio"],dialog button){
 --face-top:#c93604;--face-bottom:#fa5a23;--rim-top:#ff9b3e;--rim-right:#f2650c;--rim-bottom:#a92403;--rim-left:#fa690f;--key-ink:#fff4df;
 text-shadow:0 1px 0 #a82e1f66;
 box-shadow:0 0 0 1px #9c4a2b,0 3px 2px #8a3b2288,0 5px 9px #8b3d2233,inset 0 2px 3px #9d260733,inset 0 -1px 2px #ffb15a88!important;
}
/* The second active family: blue signal keys. */
:is(.gen.active,.clock #sync.selected,.viztabs button.selected){
 --face-top:#1b2ab2;--face-bottom:#374eea;--rim-top:#7895ff;--rim-right:#3e58ed;--rim-bottom:#12228c;--rim-left:#3e5cf4;--key-ink:#f5f4ef;
 text-shadow:0 1px 0 #1527a888;
 box-shadow:0 0 0 1px #4a5095,0 3px 2px #1b265e88,0 5px 9px #29367533,inset 0 2px 3px #18289d44,inset 0 -1px 2px #8193ff88!important;
}
.mode{gap:10px}.mode button{padding:10px 14px;min-height:46px;min-width:118px;font-size:10px;border-width:7px!important;border-radius:12px!important}.mode button:before{color:#777166}.mode button.active:before{color:#ffddbd}.mode button.active:after{background:#fff1d7;box-shadow:0 0 4px #ffb563}
header>button{padding:6px 11px;min-height:36px}header #help{width:35px;padding:4px}.clock button{padding:7px;min-height:37px;min-width:39px}.clock #play{color:var(--key-ink)!important;width:41px}.clock #sync{font-size:8px}.patchnav{gap:10px}.patchnav button{padding:8px 13px;min-height:42px}.patchnav button:last-child{color:var(--key-ink)}
.gen{min-height:68px;padding:10px 9px;border-width:8px!important;border-radius:16px!important;margin-bottom:9px;gap:10px}.gen b{font-size:10px;color:#33312d}.gen small{color:#6f6b60;font-size:7px}.gen .icon{color:#6d7066}.gen.active :is(b,small,.icon,.genled){color:#f4f1e9!important}.gen.active small{opacity:.75}.gen.active:before{display:none}.gen.active .genled{font-size:7px;text-shadow:0 0 4px #d9dfff}.generators{padding:18px 12px}.generators>.sectiontitle{padding-bottom:18px}.add{font-size:9px;padding:8px 10px;min-height:35px;margin-top:4px}.bus{padding-top:22px}.bus small{color:#7c846d}
.preset{min-height:104px;padding:12px 15px;border-width:11px!important;border-radius:21px!important;gap:15px;align-items:center}.preset b{font:11px Arial,sans-serif;font-weight:600;color:#34322e;line-height:1.4}.preset small{font:7px/1.5 monospace;color:#7b7467;margin-top:8px}.preset .art{font-size:33px;width:36px;height:40px}.preset .number{font-size:9px;color:#807764;align-self:end;margin-bottom:2px}.preset.active :is(b,small,.art,.number){color:#fff1da!important;filter:none}.preset.active small{opacity:.8}.preset.active:after{display:none}#presets{gap:13px;padding-bottom:5px}
.viztabs{gap:6px}.viztabs button{font-size:8px;padding:4px 7px;min-height:27px;border-width:4px!important;border-radius:7px!important;text-shadow:none}.visualtop{height:66px;align-items:center;padding-top:10px}.viztabs #freeze{min-width:26px}.visual{border-color:#4b4e43}.instrument,.macros,#advanced{border-radius:14px}.route{border-radius:13px;background:linear-gradient(145deg,#e8e5dd,#d5d4ca);box-shadow:inset 0 1px 1px #ffffee,0 2px 2px #6d73541a}.route button,#addRoute{padding:4px 8px;font:9px monospace}.sectiontitle #reset{color:#707a60}.parameters{padding-top:20px}.paramnote{color:#6d795e}.param label{color:#59694a}.sectiontitle{color:#59634f}.preset:focus-visible,.gen:focus-visible,button:focus-visible{outline:2px solid #242b75;outline-offset:4px}
@media(min-width:901px){.instrument{min-height:505px}.canvaswrap{height:326px}.visual{display:flex;flex-direction:column}.canvaswrap{flex:1;min-height:280px}.signaloutputs{min-height:47px}.bus{padding-top:19px}}
@media(max-width:1150px){.mode button{min-width:99px;padding:8px 10px}.gen{padding:10px 7px;gap:6px}.gen b{font-size:9px}.preset{padding:10px 11px;gap:10px}.preset b{font-size:10px}.preset small{font-size:6px}}
@media(max-width:900px){.mode button{min-width:0;padding:9px 10px}.gen{padding:10px 6px;gap:5px;border-width:7px!important}.gen b{font-size:8px}.gen small{font-size:6px}.preset{min-height:98px;border-width:9px!important}}
@media(max-width:680px){.mode button{font-size:9px;min-height:44px;border-width:6px!important;padding:7px 8px}.mode button:before{font-size:7px}.mode button.active:after{margin-left:7px}.gen{min-width:125px;min-height:64px;margin:0 0 3px;flex-shrink:0;border-radius:13px!important;padding:9px 7px}.gen b{font-size:9px}.gen small{font-size:6px}.generators{padding:14px 11px}.add{margin-top:9px;min-height:33px;padding:6px 10px}.visualtop{height:62px}.viztabs button{font-size:7px;padding:4px 5px}.preset{min-height:100px;padding:10px 8px;border-radius:17px!important;gap:8px}.preset b{font-size:10px}.preset .art{width:27px;font-size:27px}.preset .number{font-size:7px}.patchnav button{padding:7px 10px;min-height:40px}#presets{gap:10px}.output{border-radius:0 0 13px 13px}}
@media(prefers-reduced-motion:reduce){button{transition:none!important}}