:root{--bg:#0a0a0b;--panel:#141417;--panel-hi:#1b1b1f;--line:#26262b;--txt:#e9e9ec;--dim:#6d6d76;--dimmer:#3d3d44;--acc:#b8ff2e;--acc-dim:#5c7d17;--red:#ff4d3d;--r:5px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg);color:var(--txt);font:12px/1.4 ui-monospace,SF Mono,Menlo,Consolas,monospace;-webkit-font-smoothing:antialiased;letter-spacing:.02em;display:flex;justify-content:center;padding:18px}.app{width:100%;max-width:1080px;display:flex;flex-direction:column;gap:12px}.gate{position:fixed;inset:0;background:#0a0a0beb;display:grid;place-items:center;z-index:50}.gate.hidden{display:none}.gate button{background:transparent;border:1px solid var(--acc);color:var(--acc);font:inherit;font-size:12px;letter-spacing:.22em;padding:16px 28px;border-radius:var(--r);cursor:pointer}.gate button:hover{background:var(--acc);color:#000}.bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:9px 12px}.tbtn{width:30px;height:30px;border:1px solid var(--line);background:var(--panel-hi);border-radius:var(--r);color:var(--txt);cursor:pointer;display:grid;place-items:center;transition:background .08s,border-color .08s}.tbtn:hover{border-color:var(--dim)}.tbtn.on{background:var(--acc);border-color:var(--acc);color:#000}.fld{display:flex;align-items:baseline;gap:6px;user-select:none}.fld .k{color:var(--dim);font-size:10px;letter-spacing:.12em}.fld .v{font-size:15px;cursor:ns-resize;min-width:38px;font-variant-numeric:tabular-nums}.fld .v.click{cursor:pointer;font-size:12px;color:var(--acc)}.spacer{flex:1}.chip{border:1px solid var(--line);background:var(--panel-hi);border-radius:var(--r);padding:6px 10px;color:var(--dim);cursor:pointer;transition:color .08s,border-color .08s}.chip:hover{color:var(--txt);border-color:var(--dim)}.meter{width:52px;height:6px;background:var(--panel-hi);border:1px solid var(--line);border-radius:2px;overflow:hidden}.meter i{display:block;height:100%;background:var(--acc);width:0%}.meter.hot i{background:var(--red)}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}@media (max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}.box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:9px;transition:border-color .1s,opacity .1s;position:relative}.box.sel{border-color:var(--dim)}.box.muted{opacity:.32}.box.exp{border-color:var(--acc)}.hd{display:flex;align-items:center;gap:8px}.hd .nm{font-size:10px;letter-spacing:.16em;color:var(--dim)}.hd .len{margin-left:auto;font-size:9px;color:var(--dimmer);letter-spacing:.1em}.box.poly .hd .len{color:var(--acc-dim)}.ico{width:18px;height:18px;flex:none;color:var(--txt)}.box.muted .ico{color:var(--dim)}.ringwrap{display:flex;justify-content:center;padding:2px 0}canvas.ring{cursor:pointer;width:68px;height:68px;display:block}.dials{display:flex;gap:8px;justify-content:center}.dial{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:ns-resize;user-select:none}.dial svg{display:block}.dial .lb{font-size:8px;letter-spacing:.14em;color:var(--dim)}.dial .arcbg{fill:none;stroke:var(--dimmer);stroke-width:2.5;stroke-linecap:round}.dial .arcfg{fill:none;stroke:var(--acc);stroke-width:2.5;stroke-linecap:round}.dial .dot{fill:var(--txt)}.btns{display:flex;gap:4px}.b{flex:1;height:22px;border:1px solid var(--line);background:transparent;color:var(--dim);border-radius:3px;cursor:pointer;font:inherit;font-size:10px;display:grid;place-items:center;transition:background .08s,color .08s,border-color .08s}.b:hover{color:var(--txt);border-color:var(--dim)}.b.on{background:var(--txt);color:#000;border-color:var(--txt)}.b.solo.on{background:var(--acc);border-color:var(--acc);color:#000}.drawer{background:var(--panel);border:1px solid var(--acc);border-radius:var(--r);padding:11px;display:flex;flex-direction:column;gap:10px}.drawer .dhd{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.16em;color:var(--dim)}.drawer .dhd .cl{margin-left:auto;cursor:pointer;color:var(--dim);font-size:13px;padding:0 4px}.drawer .dhd .cl:hover{color:var(--txt)}canvas.steps{width:100%;height:56px;display:block;cursor:ns-resize}.modes{display:flex;gap:4px;align-items:center}.modes .lb{font-size:8px;letter-spacing:.14em;color:var(--dim);margin-right:4px}.mb{border:1px solid var(--line);background:transparent;color:var(--dim);font:inherit;font-size:9px;letter-spacing:.1em;padding:3px 8px;border-radius:3px;cursor:pointer}.mb:hover{color:var(--txt)}.mb.on{background:var(--acc);border-color:var(--acc);color:#000}.drow{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}.sel-wrap{display:flex;flex-direction:column;gap:4px}.sel-wrap .lb{font-size:8px;letter-spacing:.14em;color:var(--dim)}select{background:var(--panel-hi);color:var(--txt);border:1px solid var(--line);border-radius:3px;padding:4px 6px;font:inherit;font-size:11px}.pats{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:8px}.p{flex:1;height:28px;border:1px solid var(--line);background:transparent;color:var(--dim);border-radius:3px;cursor:pointer;font:inherit;font-size:10px;display:grid;place-items:center;transition:background .08s,color .08s,border-color .08s}.p:hover{color:var(--txt)}.p.has{color:var(--txt);border-color:var(--dimmer)}.p.on{background:var(--acc);border-color:var(--acc);color:#000}.p.q{border-color:var(--acc);color:var(--acc);animation:bl .35s steps(2,end) infinite}@keyframes bl{50%{opacity:.35}}.foot{display:flex;gap:14px;color:var(--dimmer);font-size:10px;letter-spacing:.06em;padding:0 2px;flex-wrap:wrap}.foot b{color:var(--dim);font-weight:400}