:root{color-scheme:dark}*{box-sizing:border-box;margin:0}body{background:#0b0e14;color:#c8ccd4;font:14px/1.4 system-ui,sans-serif}#app{display:flex;gap:16px;padding:16px}#palette{width:180px;display:flex;flex-direction:column;gap:4px}#palette h3{margin:10px 0 2px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#6b7280}#palette button{text-align:left;padding:6px 8px;background:#151a24;color:inherit;border:1px solid #232936;border-radius:6px;cursor:pointer}#palette button.selected{border-color:#7aa2f7;color:#7aa2f7}#controls{display:flex;align-items:center;gap:12px;padding:8px 0 12px;flex-wrap:wrap}#controls label{display:flex;align-items:center;gap:6px;color:#9aa1ad}#controls select,#controls button{background:#151a24;color:inherit;border:1px solid #232936;border-radius:6px;padding:4px 8px;cursor:pointer}#controls button.recording{border-color:#f7768e;color:#f7768e}#controls button:disabled{opacity:.4;cursor:not-allowed}#board{border:1px solid #232936;border-radius:8px;cursor:crosshair}#gate{position:fixed;top:0;right:0;bottom:0;left:0;background:#0b0e14eb;display:flex;align-items:center;justify-content:center}#gate button{font-size:20px;padding:16px 32px;background:#151a24;color:#c8ccd4;border:1px solid #7aa2f7;border-radius:12px;cursor:pointer}#gate.hidden{display:none}#arp-panel{width:180px;display:flex;flex-direction:column;gap:10px}#arp-panel h3{margin:10px 0 2px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#6b7280}#arp-panel button{text-align:left;padding:6px 8px;background:#151a24;color:inherit;border:1px solid #232936;border-radius:6px;cursor:pointer}#arp-panel button.active{border-color:#e0af68;color:#e0af68}#arp-panel label.stack{display:flex;flex-direction:column;gap:4px;color:#9aa1ad;font-size:12px}#arp-panel select{background:#151a24;color:inherit;border:1px solid #232936;border-radius:6px;padding:4px 8px}