@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Press+Start+2P&display=swap";:root,[data-theme=light]{--bg: #f5f5f5;--surface: #ffffff;--surface2: #f0f0f0;--accent: #6b7b2a;--accent2: #5a6a22;--accent-dim: rgba(107, 123, 42, .12);--text: #1a1a1a;--text2: #777;--border: #ddd;--melody: #5b4fc7;--harmony: #2a9d8f;--bass: #d4940a;--drums: #c7393e;--grid-white: #f8f8f8;--grid-black: #eee;--grid-line: #e0e0e0;--grid-beat: #d0d0d0;--grid-bar: #bbb;--grid-header: #f0f0f0;--grid-header-border: #ccc;--grid-num: #999;--btn-hover: #e4e4e4;--btn-hover-border: #bbb;--preset-hover: #e8e8e8;--menubar-bg: #f0f0f0;--menubar-border: #ccc;--menubar-text: #333;--menubar-hover: rgba(0, 0, 0, .06);--menubar-hover-text: var(--accent);--menu-dropdown-bg: #fff;--menu-dropdown-border: #ccc;--menu-dropdown-shadow: rgba(0, 0, 0, .12);--menu-item-text: #333;--menu-shortcut-color: #999;--menu-divider: #ddd;--app-name-color: var(--accent);--toolbar-sep: #ccc;--input-bg: #fff;--input-color: #333;--input-border: #ccc;--bpm-label: #999;--bpm-val: var(--accent)}[data-theme=dark]{--bg: #121212;--surface: #1e1e1e;--surface2: #2a2a2a;--accent: #9ab33a;--accent2: #b0cc44;--accent-dim: rgba(154, 179, 58, .15);--text: #e0e0e0;--text2: #888;--border: #3a3a3a;--melody: #7b6ff0;--harmony: #3cc4b4;--bass: #f0aa20;--drums: #e05558;--grid-white: #1a1a1a;--grid-black: #222;--grid-line: #2a2a2a;--grid-beat: #333;--grid-bar: #444;--grid-header: #1a1a1a;--grid-header-border: #333;--grid-num: #666;--btn-hover: #333;--btn-hover-border: #555;--preset-hover: #333;--menubar-bg: #1a1a1a;--menubar-border: #333;--menubar-text: #e0e0e0;--menubar-hover: rgba(255, 255, 255, .1);--menubar-hover-text: #fff;--menu-dropdown-bg: #2a2a2a;--menu-dropdown-border: #444;--menu-dropdown-shadow: rgba(0, 0, 0, .3);--menu-item-text: #e0e0e0;--menu-shortcut-color: #888;--menu-divider: #444;--app-name-color: #9ab33a;--toolbar-sep: #444;--input-bg: rgba(255, 255, 255, .1);--input-color: #e0e0e0;--input-border: #555;--bpm-label: #888;--bpm-val: #9ab33a}*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Press Start 2P",Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;overflow:hidden}#root{display:flex;flex-direction:column;height:100vh}main{flex:1;display:flex;flex-direction:column;overflow:hidden}.btn{background:var(--surface2);color:var(--text);border:1px solid var(--border);padding:4px 10px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:10px;font-weight:500;transition:all .15s;display:flex;align-items:center;gap:5px}.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover-border)}.btn.transport{background:var(--accent);color:#fff;border-color:var(--accent);padding:3px 8px;border-radius:4px}.btn.transport:hover{background:var(--accent2)}.btn.transport.playing{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.btn svg{width:14px;height:14px}input[type=text]{background:var(--input-bg);color:var(--input-color);border:1px solid var(--input-border);padding:4px 8px;border-radius:4px;font:inherit;font-size:10px;width:240px}header{display:flex;align-items:center;padding:0;background:var(--menubar-bg);border-bottom:1px solid var(--menubar-border);flex-shrink:0;height:38px;font-size:10px;color:var(--menubar-text)}.menubar{display:flex;align-items:center;height:100%}.app-name{font-weight:700;font-size:12px;color:var(--app-name-color);padding:0 12px;white-space:nowrap}.menu-root{position:relative;height:100%}.menu-trigger{background:none;border:none;color:var(--menubar-text);font:inherit;font-size:10px;padding:0 10px;height:100%;cursor:default;transition:background .1s}.menu-trigger:hover,.menu-trigger.open{background:var(--menubar-hover);color:var(--menubar-hover-text)}.menu-dropdown{position:absolute;top:100%;left:0;min-width:220px;background:var(--menu-dropdown-bg);border:1px solid var(--menu-dropdown-border);border-radius:0 0 6px 6px;box-shadow:0 6px 20px var(--menu-dropdown-shadow);z-index:200;padding:4px 0}.menu-item{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;color:var(--menu-item-text);font:inherit;font-size:10px;padding:8px 16px;cursor:default;text-align:left;transition:background .08s}.menu-item:hover{background:var(--accent);color:#fff}.menu-item:hover .menu-shortcut{color:#ffffffb3}.menu-item.checked:before{content:"✓";margin-right:8px;font-family:Inter,system-ui,sans-serif;font-size:12px;font-weight:700}.menu-shortcut{font-family:Inter,system-ui,sans-serif;font-size:11px;color:var(--menu-shortcut-color);margin-left:24px;white-space:nowrap}.menu-divider{height:1px;background:var(--menu-divider);margin:4px 0}.header-spacer{flex:1}.header-right{display:flex;align-items:center;gap:8px;padding:0 12px;height:100%;margin-left:auto}.toolbar-sep{width:1px;height:18px;background:var(--toolbar-sep)}.tempo-control{display:flex;align-items:center;gap:6px}.tempo-control input[type=range]{width:80px;accent-color:var(--bpm-val)}.tempo-control .val{font-size:10px;font-weight:600;color:var(--bpm-val);min-width:28px}#sound-picker{display:flex;gap:0;padding:0;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.sound-group{flex:1;padding:10px 12px;border-right:1px solid var(--border);cursor:pointer;transition:all .15s;position:relative}.sound-group:last-child{border-right:none}.sound-group:hover,.sound-group.active{background:var(--surface2)}.sound-group.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:0}.sound-group:nth-child(1).active:after{background:var(--melody)}.sound-group:nth-child(2).active:after{background:var(--harmony)}.sound-group:nth-child(3).active:after{background:var(--bass)}.sound-group:nth-child(4).active:after{background:var(--drums)}.sound-group .label{font-size:8px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:4px}.sound-group:nth-child(1) .label{color:var(--melody)}.sound-group:nth-child(2) .label{color:var(--harmony)}.sound-group:nth-child(3) .label{color:var(--bass)}.sound-group:nth-child(4) .label{color:var(--drums)}.sound-group .current-sound{font-size:10px;font-weight:500;display:flex;align-items:center;gap:6px}.sound-group .chevron{font-size:8px;color:var(--text2);transition:transform .15s}.sound-group.open .chevron{transform:rotate(180deg)}.sound-menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0!important;z-index:50;max-height:240px;overflow-y:auto;box-shadow:0 8px 24px #00000026}.sound-menu.open{display:block}.sound-option{padding:8px 12px;cursor:pointer;font-size:10px;transition:background .1s}.sound-option:hover{background:var(--surface2)}.sound-option.selected{color:var(--accent);font-weight:600}#grid-area{flex:1;display:flex;overflow:hidden;position:relative}#grid-labels{width:44px;flex-shrink:0;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border);overflow:hidden;scrollbar-width:none}#grid-labels::-webkit-scrollbar{display:none}.grid-label{display:flex;align-items:center;justify-content:center;font-size:7px;color:var(--text2);font-weight:500;padding:0 2px}.grid-label.is-c{color:var(--accent);font-weight:700}#grid-scroll{flex:1;overflow:auto}#grid-canvas{display:block;cursor:crosshair}#playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);pointer-events:none;z-index:10;display:none;left:28px;box-shadow:0 0 8px #6b7b2a66}#pattern-bar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--surface);border-top:1px solid var(--border);flex-shrink:0}#pattern-bar .label{font-size:8px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;font-weight:600}.pattern-list{display:flex;gap:4px;flex:1;overflow-x:auto}.pat-slot{width:40px;height:28px;border-radius:5px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;cursor:pointer;transition:all .15s;flex-shrink:0}.pat-slot:hover{border-color:var(--btn-hover-border)}.pat-slot.dragging{opacity:.4}.pat-slot.drag-over-left{box-shadow:-3px 0 0 0 var(--accent)}.pat-slot.drag-over-right{box-shadow:3px 0 0 0 var(--accent)}.pat-slot.active{border-color:var(--accent);background:var(--accent-dim);color:var(--accent)}.pat-slot.has-notes{background:var(--surface2)}.modal-bg{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:100;align-items:center;justify-content:center}.modal-bg.show{display:flex}.modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:440px;width:90%;max-height:80vh;overflow-y:auto}.modal h2{font-size:14px;color:var(--accent);margin-bottom:12px}.modal p{font-size:10px;line-height:2;color:var(--text2);margin-bottom:8px}.modal b{color:var(--text)}.modal .close{margin-top:12px}.preset-grid{display:grid;grid-template-columns:1fr;gap:6px;margin-top:12px;max-height:50vh;overflow-y:auto}.preset-card{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:12px 14px;cursor:pointer;transition:all .15s}.preset-card:hover{border-color:var(--btn-hover-border);background:var(--preset-hover);transform:translateY(-1px)}.preset-card .preset-name{font-size:10px;font-weight:600;margin-bottom:4px}.preset-card .preset-desc{font-size:8px;color:var(--text2);line-height:1.8}.preset-card .preset-tag{display:inline-block;font-size:7px;padding:2px 6px;border-radius:3px;margin-top:4px;font-weight:500}@media(max-width:640px){header{height:auto;flex-wrap:wrap;padding:0}.menubar{width:100%;border-bottom:1px solid var(--menubar-border)}.header-spacer{display:none}.header-right{width:100%;padding:6px 10px;gap:6px;margin-left:0;justify-content:flex-start}.menu-trigger{padding:0 8px;min-height:34px}.menu-dropdown{min-width:180px}.menu-item{padding:12px 16px;font-size:10px}.menu-shortcut,.toolbar-sep{display:none}input[type=text]{flex:1;width:auto;min-width:80px}.tempo-control input[type=range]{width:60px}#sound-picker{overflow-x:auto}.sound-group{padding:8px;min-width:0}.sound-group .label{font-size:7px}.sound-group .current-sound{font-size:8px}#pattern-bar{flex-wrap:wrap;padding:6px 10px;gap:6px}#pattern-bar .label{width:100%}.pat-slot{width:34px;height:26px;font-size:9px}.modal{padding:16px;max-width:95%}}