:root{color-scheme:light dark;--bg: #12141a;--bg-panel: #1b1e27;--bg-cell: #262a35;--border: #363c4a;--text: #e8e9ee;--text-dim: #9aa1b1;--accent: #5b8cff;--accent-2: #8f6bff;--danger: #ff5d6c;--success: #4fd18b;--current-step: #ffd166;font-family:system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);overflow-x:hidden}#root{min-height:100vh}.app-shell{display:flex;flex-direction:column;gap:12px;padding:12px;max-width:100vw}.app-header h1{margin:0;font-size:1.3rem}.tagline{margin:2px 0 0;color:var(--text-dim);font-size:.85rem}button{background:var(--bg-cell);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:6px 10px;cursor:pointer;font-size:.85rem}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.5;cursor:not-allowed}button.danger{border-color:var(--danger);color:var(--danger)}input,select{background:var(--bg-cell);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:4px 6px;font-size:.85rem}.transport-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:8px}.field{display:flex;align-items:center;gap:4px;font-size:.8rem;color:var(--text-dim)}.field input[type=number]{width:64px}.field.checkbox{flex-direction:row-reverse}.step-indicator{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--current-step)}.pattern-bank{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.pattern-chip{display:flex;align-items:center;gap:2px;background:var(--bg-panel);border:1px solid var(--border);border-radius:999px;padding:2px 4px 2px 10px}.pattern-chip.active{border-color:var(--accent)}.pattern-chip button[role=tab]{background:transparent;border:none;padding:4px 2px}.icon-button{padding:2px 6px}.new-pattern{border-style:dashed}.pattern-settings{display:flex;gap:12px;align-items:center}.workspace{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}.step-editor{flex:1 1 640px;min-width:0;background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:8px}.step-grid-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}table.step-grid{border-collapse:collapse;-webkit-user-select:none;user-select:none}table.step-grid th,table.step-grid td{padding:2px}.track-header-cell{position:sticky;left:0;background:var(--bg-panel);z-index:1;text-align:left;min-width:220px}.step-header{min-width:26px;text-align:center;font-size:.7rem;color:var(--text-dim)}.step-header.beat-start{color:var(--text)}.step-header.current{color:var(--current-step)}.step-cell.beat-start{border-left:1px solid var(--border)}.step-cell.current .step-button{box-shadow:0 0 0 2px var(--current-step) inset}.step-button{width:26px;height:26px;padding:0;border-radius:4px;background:var(--bg-cell);border:1px solid var(--border)}.step-button.occupied{background:var(--accent);border-color:var(--accent)}.step-button.selected{outline:2px solid var(--accent-2)}.track-controls{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:2px 4px}.track-name{width:96px}.track-role{width:72px}.track-buttons{display:flex;gap:4px;align-items:center}.toggle.active{background:var(--accent-2);border-color:var(--accent-2)}.track-row.muted{opacity:.55}.add-track{margin-top:8px}.event-inspector{flex:0 0 260px;background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px;-webkit-user-select:text;user-select:text}.event-inspector.empty{color:var(--text-dim)}.event-inspector h3{margin:0 0 4px;font-size:1rem}.event-inspector .field{flex-direction:column;align-items:stretch}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border)}.tabs button[aria-selected=true]{border-color:var(--accent);color:var(--accent)}.tab-content{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:12px;-webkit-user-select:text;user-select:text}.event-monitor-toolbar{display:flex;gap:8px;margin-bottom:8px}.event-monitor-scroll{overflow-x:auto;max-height:320px;overflow-y:auto}.event-monitor table{border-collapse:collapse;width:100%;font-size:.75rem}.event-monitor th,.event-monitor td{border-bottom:1px solid var(--border);padding:3px 6px;text-align:left;white-space:nowrap}.monitor-payload{font-family:ui-monospace,monospace}.warning-list ul{margin:4px 0;padding-left:20px}.warning-list.error{color:var(--danger)}.success{color:var(--success)}.import-export-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.file-import-label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--text-dim)}@media(max-width:480px){.app-shell{padding:8px;gap:8px}.workspace{flex-direction:column;align-items:stretch}.step-editor,.event-inspector{flex-basis:auto;width:100%}.track-header-cell{min-width:160px}}