:root{--bg: #000;--panel: #111;--line: #2e2e2e;--line-light: #3a3a3a;--text: #fff;--muted: #a0a0a0;--dim: #707070;--font: Telegraf, "IBM Plex Sans", system-ui, sans-serif;--mono: "IBM Plex Mono", ui-monospace, monospace;--radius: 0;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:12px;letter-spacing:.12px}button,select,input{font:inherit;color:inherit}button{background:transparent;border:.8px solid var(--line);border-radius:var(--radius);padding:5px 10px;color:var(--muted);cursor:pointer;letter-spacing:.4px}button:hover:not(:disabled){color:var(--text);border-color:var(--line-light)}button.active{color:var(--bg);background:var(--text);border-color:var(--text)}#app{max-width:1100px;margin:0 auto;padding:20px 20px 40px}.top{display:flex;align-items:flex-end;gap:16px;padding-bottom:16px;border-bottom:.8px solid var(--line)}.brand{flex:1}.title{font-size:18px;letter-spacing:.8px}.sub{color:var(--dim);margin-top:2px}.status{display:flex;align-items:center;gap:8px;color:var(--muted)}.dot{width:7px;height:7px;background:#3a3a3a}.dot.on{background:#fff}.banner{margin-top:12px;padding:8px 10px;border:.8px solid var(--line);color:var(--muted)}.layout{display:grid;grid-template-columns:minmax(320px,1fr) minmax(280px,360px);gap:28px;margin-top:24px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;aspect-ratio:1}.pad{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:10px;min-height:0;border:.8px solid var(--line);background:#0a0a0a;color:var(--muted);text-align:left;overflow:hidden}.pad:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;opacity:calc(var(--v, 0) * .55 + var(--p, 0) * .2);pointer-events:none}.pad.hit{color:#000;border-color:#fff}.pad.learn{outline:1px solid #fff;outline-offset:2px}.pad.drop{border-color:#fff}.pad.sample .pad-idx:after{content:" · smp"}.pad-idx,.pad-name,.pad-note{position:relative;z-index:1}.pad-idx{position:absolute;top:8px;left:10px;font-size:10px;color:var(--dim)}.pad.hit .pad-idx{color:#333}.pad-name{font-size:13px;letter-spacing:.3px}.pad-note{font-family:var(--mono);font-size:10px;color:var(--dim)}.pad.hit .pad-note{color:#333}.banks,.row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px}.lbl{color:var(--dim);margin-right:4px;letter-spacing:.5px;text-transform:uppercase;font-size:10px}.side{min-width:0}.panel{margin-top:14px;padding:10px;border:.8px solid var(--line)}.meta{font-family:var(--mono);margin-bottom:10px}.kv{display:grid;grid-template-columns:48px 1fr;gap:4px 10px;color:var(--muted)}.kv div:nth-child(odd){color:var(--dim)}.check{display:flex;align-items:center;gap:8px;margin-top:14px;color:var(--muted)}.ports{display:grid;grid-template-columns:1fr;gap:8px}.ports label{display:grid;gap:4px;color:var(--dim)}select{width:100%;background:#0a0a0a;border:.8px solid var(--line);color:var(--text);padding:5px 6px}.log{margin:14px 0 0;padding:10px;max-height:240px;overflow:auto;list-style:none;border:.8px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--muted)}.log li{padding:2px 0;border-bottom:.8px solid #1a1a1a}.log .noteon{color:#fff}.log .hidden,.hidden{display:none}.dim{color:var(--dim)}.hint{color:var(--dim);line-height:1.5;margin-top:16px}@media(max-width:800px){.layout{grid-template-columns:1fr}.top{flex-wrap:wrap}}