:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#f1f2f7;background:#11131a;font-synthesis:none;text-rendering:optimizeLegibility;font-weight:400;--muted: #8c91a2;--panel: #1a1d27;--border: #2a2e3a;--accent: #b9f36b}*{box-sizing:border-box}body{min-width:360px;min-height:100vh;margin:0;background:radial-gradient(ellipse at 10% 0%,#252a37 0,transparent 38rem),#11131a}button,select{font:inherit}.app-shell{max-width:1440px;margin:0 auto;padding:38px 42px 24px}.topbar{display:flex;align-items:center;gap:14px;margin-bottom:30px}.brand-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;color:#11131a;background:var(--accent);font-size:15px;font-weight:700;letter-spacing:-1px}.eyebrow{margin:0 0 5px;color:var(--muted);font-size:10px;font-weight:500;letter-spacing:1.7px}h1,h2,p{margin-top:0}h1{margin:0;font-size:21px;font-weight:600;letter-spacing:-.5px}h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.3px}.local-badge{margin-left:auto;padding:7px 10px;border:1px solid #3d4932;border-radius:99px;color:var(--accent);font-size:9px;font-weight:500;letter-spacing:1px}.panel{border:1px solid var(--border);border-radius:15px;background:#1a1d27ef}.connection-panel{padding:22px 24px 18px;margin-bottom:20px}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.connection-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}button,select,.file-button{border:1px solid var(--border);border-radius:8px;padding:9px 13px;color:#e8eaf0;background:#242834;cursor:pointer;font-size:12px}button:hover:not(:disabled),.file-button:hover{border-color:#747b8d}button:disabled{opacity:.38;cursor:not-allowed}.primary-button{border-color:var(--accent);color:#171b12;background:var(--accent);font-weight:700}.primary-button:hover:not(:disabled){background:#c8ff7b;border-color:#c8ff7b}.status-dot{width:8px;height:8px;border-radius:50%;background:#777}.status-dot.ready{background:var(--accent);box-shadow:0 0 12px #b9f36b88}.status-message{margin:14px 0 0;color:var(--muted);font-size:11px}select{min-width:190px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;align-items:start;gap:20px}.pads-panel,.controls-panel{padding:22px}.small-label{color:var(--muted);font:10px ui-monospace,monospace}.pad-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.pad-card{min-width:0;padding:6px;border:1px solid #292d38;border-radius:9px;background:#20232d}.pad-visual{display:flex;align-items:flex-start;justify-content:space-between;aspect-ratio:1.5;width:100%;padding:7px;border:1px solid #535867;border-radius:7px;background:#373b48;box-shadow:inset 0 -3px #16182088;color:#e8eaf0;font:10px ui-monospace,monospace;text-align:left;cursor:pointer;transition:filter .1s,transform .1s}.pad-visual:hover{filter:brightness(1.15)}.pad-visual:active{transform:translateY(2px);box-shadow:inset 0 -1px #16182088}.pad-visual:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.pad-visual strong{align-self:flex-end;font-size:11px;font-weight:600}.pad-color-1{background:#373f4d}.pad-color-2{background:#413d4a}.pad-color-3{background:#394643}.sample-name{overflow:hidden;margin:6px 1px 5px;color:var(--muted);font-size:9px;text-overflow:ellipsis;white-space:nowrap}.file-button{display:block;overflow:hidden;padding:6px 4px;color:#d9dce4;text-align:center;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.file-button input{display:none}.file-button:has(input:disabled){opacity:.4;cursor:not-allowed}.preview-button{width:100%;margin-top:3px;padding:4px 2px;border-color:transparent;color:var(--muted);background:transparent;font-size:9px}.helper-text{margin:-4px 0 22px;color:var(--muted);font-size:11px;line-height:1.6}.keyboard-help{display:grid;gap:5px;margin:-8px 0 20px;padding:11px;border:1px solid #2c303c;border-radius:8px;background:#171a22}.keyboard-help strong{color:#dfe1e9;font-size:10px;font-weight:600}.keyboard-help span{color:var(--accent);font:10px ui-monospace,monospace;letter-spacing:2px}.keyboard-help small{color:var(--muted);font-size:9px}.envelope-controls{display:grid;gap:20px}.range-control>span{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#dfe1e9;font-size:11px}.range-control output{color:var(--accent);font:11px ui-monospace,monospace}input[type=range]{width:100%;height:4px;accent-color:var(--accent);cursor:pointer}.envelope-visual{margin-top:26px;padding:12px 8px 0;border:1px solid #2c303c;border-radius:9px;background:#171a22}.envelope-visual svg{display:block;width:100%;overflow:visible}.envelope-visual .grid-line{fill:none;stroke:#303440;stroke-width:1}.envelope-visual .envelope-line{fill:none;stroke:var(--accent);stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.envelope-visual circle{fill:var(--accent)}.envelope-visual text{fill:#858b9b;font:9px ui-monospace,monospace;text-anchor:middle}.tip-box{display:grid;gap:5px;margin-top:15px;padding:12px;border-left:2px solid var(--accent);border-radius:4px;background:#232a20}.tip-box strong{color:#d6f3b4;font-size:10px}.tip-box span{color:#a3a994;font-size:10px;line-height:1.5}footer{padding-top:17px;color:#666c7b;font:10px ui-monospace,monospace;text-align:center}@media(max-width:900px){.app-shell{padding:26px 20px 20px}.workspace{grid-template-columns:1fr}}@media(max-width:560px){.app-shell{padding:20px 12px}.pads-panel,.controls-panel,.connection-panel{padding:16px}.pad-grid{gap:6px}.pad-card{padding:5px}.pad-visual{padding:7px}.file-button{font-size:9px}}