:root{--wb-grey: #aaaaaa;--wb-grey-d: #8c8c8c;--wb-grey-l: #c4c4c4;--wb-black: #000000;--wb-white: #ffffff;--wb-blue: #6688bb;--wb-blue-d: #3d5a8f;--wb-orange: #ee9944;--font-ui: "DejaVu Sans Mono", "IBM Plex Mono", Menlo, Consolas, "Courier New", monospace;--ui-size: 12px}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:#5a6f99;font-family:var(--font-ui);font-size:var(--ui-size);color:var(--wb-black);overflow:hidden;user-select:none}.app{height:100vh;display:grid;grid-template-rows:22px auto minmax(200px,1fr) var(--bottom-h, 300px) 22px;background:var(--wb-grey)}.titlebar{display:flex;align-items:stretch;background:var(--wb-white);border-bottom:1px solid var(--wb-black);height:22px;position:relative;z-index:20}.titlebar .title{padding:0 10px;line-height:21px;font-weight:700;white-space:nowrap}.titlebar .menus{display:flex}.titlebar .menu{position:relative}.titlebar .menu>button{font:inherit;background:none;border:0;padding:0 10px;height:21px;cursor:pointer;color:#000}.titlebar .menu>button:hover,.titlebar .menu.open>button{background:var(--wb-black);color:var(--wb-white)}.titlebar .spacer{flex:1}.titlebar .depth{width:22px;border-left:1px solid #000;display:flex;align-items:center;justify-content:center}.titlebar .depth i{width:10px;height:8px;border:1px solid #000;box-shadow:3px 3px 0 0 var(--wb-white),3px 3px 0 1px #000}.dropdown{position:absolute;top:21px;left:0;min-width:260px;background:var(--wb-white);border:1px solid var(--wb-black);box-shadow:3px 3px #00000059;padding:2px 0}.dropdown .item{display:flex;justify-content:space-between;gap:16px;padding:2px 10px;cursor:pointer;white-space:nowrap}.dropdown .item:hover{background:var(--wb-black);color:var(--wb-white)}.dropdown .item.disabled{color:#999;pointer-events:none}.dropdown .sep{border-top:1px dotted #000;margin:3px 4px}.dropdown .key{opacity:.65}.bevel{border:1px solid;border-color:var(--wb-white) var(--wb-black) var(--wb-black) var(--wb-white)}.bevel-in{border:1px solid;border-color:var(--wb-black) var(--wb-white) var(--wb-white) var(--wb-black)}.btn{font:inherit;font-size:var(--ui-size);background:var(--wb-grey);color:#000;border:1px solid;border-color:var(--wb-white) var(--wb-black) var(--wb-black) var(--wb-white);padding:2px 7px;min-height:20px;cursor:pointer;white-space:nowrap}.btn:hover{background:#b6b6b6}.btn:active,.btn.on{border-color:var(--wb-black) var(--wb-white) var(--wb-white) var(--wb-black);background:var(--wb-blue);color:#fff}.btn:disabled{color:#777;cursor:default}.btn.small{padding:0 4px;min-height:16px;font-size:11px}.btn.wide{min-width:86px}.btn:focus-visible,.field:focus-visible,select:focus-visible{outline:2px solid var(--wb-orange);outline-offset:0}.field{font:inherit;font-size:var(--ui-size);background:var(--wb-grey-l);color:#000;border:1px solid;border-color:var(--wb-black) var(--wb-white) var(--wb-white) var(--wb-black);padding:1px 4px;height:20px;min-width:0}.field:focus{background:var(--wb-white);outline:none}select.field{height:20px;padding:0 2px}textarea.field{height:auto;resize:none}.numbox{display:inline-flex;align-items:stretch}.numbox .btn{padding:0 4px;min-height:20px;width:18px}.numbox input{width:44px;text-align:center}.label{font-size:11px;color:#111;margin-right:4px;white-space:nowrap}.group{display:inline-flex;align-items:center;gap:3px}.check{display:inline-flex;align-items:center;gap:4px;cursor:pointer}.panel .check,.tools .check,.param .check{white-space:nowrap}.check input{accent-color:var(--wb-blue);margin:0}.win{display:flex;flex-direction:column;background:var(--wb-grey);border:1px solid #000;min-height:0;min-width:0}.win>.wtitle{height:18px;line-height:16px;padding:0 6px;font-weight:700;font-size:11px;background:var(--wb-blue);color:#fff;border-bottom:1px solid #000;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}.win>.wtitle .close{width:10px;height:10px;border:1px solid #000;background:#fff}.win>.wtitle .grow{flex:1}.win>.wbody{flex:1;min-height:0;display:flex;flex-direction:column;padding:4px;gap:4px;overflow:hidden}.win.inactive>.wtitle{background:var(--wb-grey-d)}.panel{display:flex;flex-direction:column;gap:5px;padding:5px 6px;border-bottom:1px solid #000}.panel .prow{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px}.panel .sep{width:1px;align-self:stretch;background:var(--wb-grey-d);box-shadow:1px 0 0 var(--wb-white)}.lcd{background:#0b0f0b;color:#8cff6a;font-weight:700;padding:2px 8px;letter-spacing:1px;border:1px solid;border-color:var(--wb-black) var(--wb-white) var(--wb-white) var(--wb-black);white-space:nowrap;min-width:0}.lcd .dim{color:#3e7a32}.editled{display:inline-block;width:9px;height:9px;border:1px solid #000;margin-right:5px;background:#444;vertical-align:-1px}.editled.on{background:#ff3a2a;box-shadow:0 0 6px #ff3a2a}.main{display:grid;grid-template-columns:236px minmax(0,1fr) 262px;gap:3px;padding:3px;min-height:0}.leftcol,.rightcol{display:flex;flex-direction:column;gap:3px;min-height:0;overflow-y:auto;overflow-x:hidden}.leftcol .win,.rightcol .win{flex-shrink:0}.leftcol .list,.rightcol .list{min-height:68px}.list{flex:1;min-height:0;overflow-y:auto;background:var(--wb-grey-l);border:1px solid;border-color:var(--wb-black) var(--wb-white) var(--wb-white) var(--wb-black);font-size:12px}.list .row{display:flex;gap:6px;padding:0 4px;line-height:16px;cursor:pointer;white-space:nowrap;overflow:hidden}.list .row:hover{background:#d6d6d6}.list .row.sel{background:var(--wb-blue);color:#fff}.list .row.play{box-shadow:inset 3px 0 0 var(--wb-orange)}.list .row .num{color:inherit;opacity:.8}.list .row .meta{margin-left:auto;opacity:.7}.btnrow{display:flex;flex-wrap:wrap;gap:3px}.btnrow .btn{flex:1 1 auto}.formgrid{display:grid;grid-template-columns:auto 1fr;gap:3px 6px;align-items:center}.pattern{position:relative;display:flex;flex-direction:column;min-height:0;min-width:0}.pattern .pscroll{flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;position:relative}.pattern .pinner{position:relative;height:100%;display:flex;flex-direction:column}.pattern .pheader{display:flex;height:34px;flex:none;background:var(--wb-grey);border-bottom:1px solid #000}.pattern .pheader .lnhead{flex:none;display:flex;align-items:center;justify-content:center;font-size:10px;color:#333}.pattern .thead{flex:none;border-right:1px solid #000;display:flex;flex-direction:column;justify-content:space-between;padding:2px 4px;cursor:pointer;position:relative}.pattern .thead .tname{display:flex;justify-content:space-between;font-size:11px;font-weight:700}.pattern .thead.muted{background:#7a7a7a;color:#ddd}.pattern .thead.cur{box-shadow:inset 0 -3px 0 var(--wb-blue)}.pattern .thead .vu{height:6px;background:#222;border:1px solid #000;position:relative;overflow:hidden}.pattern .thead .vu i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#3c3,#cc3 70%,#e33)}.pattern canvas{display:block;flex:1;min-height:0;cursor:text}.pattern .pinfo{display:flex;gap:10px;align-items:center;padding:2px 6px;font-size:11px;border-top:1px solid #000;background:var(--wb-grey);white-space:nowrap;overflow:hidden}.bottom{display:flex;flex-direction:column;min-height:0;border-top:1px solid #000}.tabs{display:flex;gap:2px;padding:3px 4px 0;border-bottom:1px solid #000;background:var(--wb-grey)}.tabs .tab{font:inherit;font-size:12px;padding:2px 12px;border:1px solid #000;border-bottom:0;cursor:pointer;background:var(--wb-grey-d);color:#111;position:relative;top:1px}.tabs .tab.on{background:var(--wb-grey);font-weight:700;border-bottom:1px solid var(--wb-grey)}.tabs .grow{flex:1}.tabbody{flex:1;min-height:0;display:flex;padding:4px;gap:6px;overflow:hidden}.resizer{height:5px;cursor:ns-resize;background:var(--wb-grey-d);border-top:1px solid var(--wb-white)}.sampleed{display:flex;flex-direction:column;flex:1;min-width:0;gap:4px}.sampleed .wave{flex:1;min-height:60px;position:relative}.sampleed canvas{width:100%;height:100%;display:block;cursor:crosshair;border:1px solid;border-color:var(--wb-black) var(--wb-white) var(--wb-white) var(--wb-black)}.sampleed .tools{display:flex;flex-wrap:wrap;gap:3px 8px;align-items:center}.sampleed .tools .group .btn{padding:1px 5px}.sidebox{width:250px;flex:none;display:flex;flex-direction:column;gap:4px;overflow-y:auto}.gen{display:flex;gap:8px;flex:1;min-width:0;min-height:0}.gen .presets{width:170px;flex:none;display:flex;flex-direction:column;gap:4px}.gen .params{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 14px;align-content:start;padding-right:4px}.gen .param{display:grid;grid-template-columns:86px 1fr 48px;align-items:center;gap:4px}.gen .param input[type=range]{width:100%;accent-color:var(--wb-blue)}.gen .param .val{text-align:right;font-size:11px}.gen .ghead{grid-column:1 / -1;font-weight:700;border-bottom:1px solid var(--wb-grey-d);margin-top:4px}.gen .preview{width:260px;flex:none;display:flex;flex-direction:column;gap:4px}.gen canvas{width:100%;height:90px;border:1px solid;border-color:#000 #fff #fff #000;background:#000}.medsynth{display:flex;gap:8px;flex:1;min-width:0}.medsynth .col{display:flex;flex-direction:column;gap:4px;min-width:0}.medsynth textarea{font-family:var(--font-ui);font-size:12px;width:100%}.medsynth canvas{border:1px solid;border-color:#000 #fff #fff #000;background:#000;cursor:crosshair}.hint{font-size:11px;color:#222;line-height:1.35}.err{color:#a00;font-size:11px}.help{flex:1;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px;font-size:12px;line-height:1.45;min-height:0}.help .hcol{overflow-y:auto;min-height:0;padding-right:6px}.help h4{margin:4px 0}.help p{margin:0 0 6px}.help table{border-collapse:collapse;width:100%;margin-bottom:6px}.help td{padding:0 4px;vertical-align:top}.help td:first-child{white-space:nowrap;font-weight:700;width:1%}.help kbd{background:var(--wb-grey-l);border:1px solid #000;padding:0 3px;font-family:inherit;font-size:11px}.status{display:flex;align-items:center;gap:12px;padding:0 8px;background:var(--wb-grey);border-top:1px solid #000;font-size:11px;white-space:nowrap;overflow:hidden}.status .msg.warn{color:#7a3b00;font-weight:700}.status .msg.error{color:#a00000;font-weight:700}.status .grow{flex:1}.status .audio-off{background:var(--wb-orange);padding:0 6px;border:1px solid #000;cursor:pointer}.modal-bg{position:fixed;inset:0;background:#00000040;display:flex;align-items:center;justify-content:center;z-index:100}.modal{width:min(640px,92vw);max-height:80vh}.modal .wbody{padding:10px}.modal .content{overflow-y:auto;max-height:55vh;line-height:1.45;white-space:pre-wrap;background:var(--wb-grey-l);padding:6px;border:1px solid;border-color:#000 #fff #fff #000}.modal .actions{display:flex;justify-content:space-between;margin-top:8px}.dropzone{position:fixed;inset:0;z-index:90;background:#6688bb80;border:4px dashed #fff;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;pointer-events:none}::-webkit-scrollbar{width:14px;height:14px}::-webkit-scrollbar-track{background:var(--wb-grey-d)}::-webkit-scrollbar-thumb{background:var(--wb-grey);border:1px solid;border-color:#fff #000 #000 #fff}
