@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";:root{--font: "Inter", system-ui, -apple-system, sans-serif;--bg: #f4f5f7;--panel: #ffffff;--panel-border: #e1e3e6;--panel-shadow: 0 4px 12px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.02);--panel-shadow-lg: 0 10px 24px rgba(0,0,0,.06), 0 4px 8px rgba(0,0,0,.04);--text-primary: #1a1b1e;--text-secondary: #5c5f66;--text-tertiary: #909296;--accent: #339af0;--accent-light: #e7f5ff;--accent-hover: #228be6;--cell-bg: #ffffff;--cell-bg-beat: #f8f9fa;--cell-border: #dee2e6;--cell-hover-border: #adb5bd;--cell-hover-bg: #f1f3f5;--playhead-color: rgba(51, 154, 240, .15);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--transition: .12s ease;--topbar-h: 56px;--sidebar-w: 140px;--bottom-h: 68px}:root.dark{--bg: #111111;--panel: #1a1a1a;--panel-border: #2c2c2c;--panel-shadow: 0 4px 6px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3);--panel-shadow-lg: 0 10px 15px rgba(0,0,0,.5), 0 4px 6px rgba(0,0,0,.3);--text-primary: #f0f0f0;--text-secondary: #a0a0a0;--text-tertiary: #6b6b6b;--accent: #ff6b6b;--accent-light: #2c1a1a;--accent-hover: #ff4757;--cell-bg: #222222;--cell-bg-beat: #2a2a2a;--cell-border: #333333;--cell-hover-border: #555555;--cell-hover-bg: #383838;--playhead-color: rgba(255, 107, 107, .2)}@media (prefers-color-scheme: dark){:root:not(.light){--bg: #111111;--panel: #1a1a1a;--panel-border: #2c2c2c;--panel-shadow: 0 4px 6px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3);--panel-shadow-lg: 0 10px 15px rgba(0,0,0,.5), 0 4px 6px rgba(0,0,0,.3);--text-primary: #f0f0f0;--text-secondary: #a0a0a0;--text-tertiary: #6b6b6b;--accent: #ff6b6b;--accent-light: #2c1a1a;--accent-hover: #ff4757;--cell-bg: #222222;--cell-bg-beat: #2a2a2a;--cell-border: #333333;--cell-hover-border: #555555;--cell-hover-bg: #383838;--playhead-color: rgba(255, 107, 107, .2)}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:var(--font);background:var(--bg);color:var(--text-primary);font-size:13px;line-height:1.4;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer;border:none;outline:none;-webkit-user-select:none;user-select:none}.app-root{display:flex;flex-direction:column;height:100dvh;min-height:0}.top-bar{flex:0 0 var(--topbar-h);display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:var(--panel);border-bottom:1px solid var(--panel-border);box-shadow:var(--panel-shadow);z-index:10}.top-bar-left{display:flex;align-items:center;gap:9px;min-width:160px}.app-logo{display:flex;align-items:center;color:var(--accent);flex-shrink:0;margin-top:-1px}.app-name{font-size:15px;font-weight:600;color:var(--text-primary);letter-spacing:-.3px;line-height:1}.top-bar-center{display:flex;align-items:center;gap:12px}.top-bar-right{display:flex;align-items:center;gap:10px;min-width:160px;justify-content:flex-end}.main-area{flex:1 1 0;display:flex;min-height:0;overflow-y:auto;overflow-x:hidden}.sidebar{flex:0 0 var(--sidebar-w);background:var(--panel);border-right:1px solid var(--panel-border);display:flex;flex-direction:column;padding-top:4px;padding-bottom:20px}.sidebar-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);padding:12px 16px 8px;height:36px;box-sizing:border-box}.instrument-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px;cursor:pointer;border-radius:0;transition:background var(--transition);position:relative;-webkit-user-select:none;user-select:none;height:42px;min-height:42px;flex:1}.instrument-row:before{content:"";position:absolute;top:2px;right:6px;bottom:2px;left:6px;border-radius:var(--radius-sm);background:transparent;transition:background var(--transition);z-index:0}.instrument-row:hover:before{background:#ffffff0d}.instrument-row.selected:before{background:#ffffff14}.sampler-controls{z-index:1}.instr-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;position:relative;z-index:1;box-shadow:0 1px 3px #0003}.instr-name{font-size:13px;font-weight:500;color:var(--text-secondary);position:relative;z-index:1;transition:color var(--transition);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.instrument-row.selected .instr-name{color:var(--accent);font-weight:600}.instrument-row.selected:after{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--accent);border-radius:0 2px 2px 0}.instrument-row{margin-bottom:3px}.grid-wrapper{position:relative;flex:1 1 0;display:flex;flex-direction:column;overflow:visible;padding:20px 24px 20px 20px;min-height:0}.beat-numbers{display:grid;grid-template-columns:repeat(var(--page-size, 16),1fr);gap:3px;padding:10px 0 4px 1px;position:sticky;top:0;z-index:10;background:var(--bg);margin-top:-10px}.beat-num{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;color:var(--text-tertiary);height:16px;font-variant-numeric:tabular-nums}.grid{display:flex;flex-direction:column;gap:3px;flex:1}.grid-row{display:grid;grid-template-columns:repeat(var(--page-size, 16),1fr);gap:3px;height:42px;min-height:42px;flex:1}.grid-cell{border-radius:var(--radius-sm);background:var(--cell-bg);border:1.5px solid var(--cell-border);cursor:pointer;transition:background var(--transition),border-color var(--transition),box-shadow var(--transition),transform 60ms ease;position:relative;overflow:hidden;grid-row:1;box-shadow:inset 0 2px 4px #0003}.grid-cell:hover{border-color:var(--cell-hover-border);background:var(--cell-hover-bg);box-shadow:0 0 0 2px #4a6ea01a;z-index:1}.grid-cell.deactivated{opacity:.2;cursor:not-allowed;pointer-events:none}.grid-cell.beat-start{background:var(--cell-bg-beat)}.grid-cell.filled{background:var(--note-color, #4a6ea0);border-color:transparent;box-shadow:0 1px 3px #00000026}.grid-cell.filled:hover{background:var(--note-color-hover, #5e88c0);border-color:transparent;box-shadow:0 2px 6px #0003}.grid-cell.filled:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,transparent 60%);border-radius:inherit;pointer-events:none}.grid-cell.active-step{box-shadow:inset 0 0 0 1000px var(--playhead-color)}.grid-cell.filled.active-step{box-shadow:0 1px 3px #00000026,inset 0 0 0 1000px #ffffff26;filter:brightness(1.08)}@keyframes popIn{0%{transform:scale(.6);opacity:.6}60%{transform:scale(1.06)}to{transform:scale(1);opacity:1}}.grid-cell.pop-in{animation:popIn .18s cubic-bezier(.34,1.56,.64,1) forwards}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:var(--radius-sm);font-weight:500;font-size:13px;background:var(--cell-bg);color:var(--text-primary);border:1px solid var(--cell-border);transition:all var(--transition);box-shadow:0 1px 2px #0003}.btn:hover{background:var(--cell-hover-bg);border-color:var(--cell-hover-border);box-shadow:0 2px 4px #0000004d;transform:translateY(-1px)}.btn:active{transform:translateY(1px);box-shadow:none}.btn-primary{background:linear-gradient(145deg,var(--accent),var(--accent-hover));color:#fff;border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px #ff6b6b4d}.btn-primary:hover{background:linear-gradient(145deg,var(--accent-hover),var(--accent));box-shadow:0 4px 12px #ff6b6b66;color:#fff}.btn-secondary{background:#ffffff0d;color:var(--text-primary);border-color:#ffffff1a}.btn-secondary:hover{background:#ffffff26;border-color:#ffffff4d}.btn-success{background:#27ae60;color:#fff;border-color:#27ae60}.btn-success:hover{background:#2ecc71;border-color:#2ecc71;color:#fff}.btn-sm{padding:5px 10px;font-size:12px}.btn-danger{color:#ff6b6b;border-color:#ff6b6b4d}.btn-danger:hover{background:#ff6b6b1a;border-color:#ff6b6b;color:#ff6b6b}.btn-play{padding:8px 18px;background:var(--accent);color:#fff;border-color:transparent;font-size:13px;font-weight:500;box-shadow:0 1px 4px #4a6ea04d;min-width:90px;justify-content:center}.btn-play:hover{background:var(--accent-hover);border-color:transparent;box-shadow:0 2px 8px #4a6ea059}.btn-play.playing{background:#3a6a3a;box-shadow:0 1px 4px #3a6a3a4d}.btn-play.playing:hover{background:#2e5a2e}.btn-play .icon-stop,.btn-play.playing .icon-play{display:none}.btn-play.playing .icon-stop{display:inline-block}.btn.saved{background:#edf7ed;border-color:#8dc88d;color:#3a6a3a}.bpm-control{display:flex;align-items:center;gap:6px;background:var(--cell-bg);border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:3px}.genre-select{background:var(--bg);border:1px solid var(--panel-border);color:var(--text-secondary);border-radius:var(--radius-sm);padding:4px 8px;font-size:13px;font-weight:500;outline:none;cursor:pointer;transition:border-color var(--transition),color var(--transition)}.genre-select:hover{border-color:var(--accent);color:var(--text-primary)}.bpm-btn{border-radius:4px;padding:4px 8px;font-size:14px;font-weight:600;background:transparent;border:none;color:var(--text-secondary);line-height:1;transition:background var(--transition),color var(--transition)}.bpm-btn:hover{background:var(--accent-light);color:var(--accent);box-shadow:none;border-color:transparent}.bpm-display{font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap;min-width:58px;text-align:center;font-variant-numeric:tabular-nums;transition:color var(--transition)}@keyframes bpmBump{0%{transform:scale(1);color:var(--accent)}40%{transform:scale(1.12)}to{transform:scale(1);color:var(--text-primary)}}.bpm-bump{animation:bpmBump .3s ease forwards}.bottom-panel{flex:0 0 var(--bottom-h);display:flex;align-items:center;gap:20px;padding:0 20px;background:var(--panel);border-top:1px solid var(--panel-border);box-shadow:0 -1px 4px #0000000a}.status-text{font-size:12px;color:var(--text-secondary);flex:0 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:380px}.status-text kbd{display:inline-block;background:var(--cell-bg);border:1px solid var(--panel-border);border-radius:4px;padding:1px 5px;font-size:11px;font-family:inherit;font-weight:600;color:var(--text-primary);box-shadow:0 1px 2px #00000014;vertical-align:1px}.status-text strong{color:var(--text-primary);font-weight:600}.visualizer-wrap{flex:1;height:36px;border-radius:var(--radius-sm);overflow:hidden;background:var(--cell-bg);border:1px solid var(--panel-border)}.visualizer-canvas{width:100%;height:100%;display:block}.audio-clip{grid-row:1;background:var(--clip-color, #8e44ad);border-radius:var(--radius-sm);opacity:.8;z-index:5;pointer-events:none;box-shadow:inset 0 2px 4px #fff3;display:flex;align-items:center;padding:0 8px;color:#fff;font-size:11px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.5);overflow:hidden;white-space:nowrap}.vol-slider{accent-color:var(--accent);cursor:pointer}.mode-select{background:var(--cell-bg);color:var(--text-primary);border:1px solid var(--cell-border);border-radius:3px;cursor:pointer}.mode-select:focus{outline:none;border-color:var(--accent)}.pagination{display:flex;justify-content:center;align-items:center;gap:16px;margin-bottom:8px}.page-indicator{font-size:12px;font-weight:500;color:var(--text-secondary)}.page-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-primary);border-radius:var(--radius-sm);padding:4px 12px;font-size:14px;cursor:pointer;transition:all var(--transition)}.page-btn:hover{background:var(--surface-hover);border-color:var(--border-hover);transform:translateY(-1px)}@media (max-width: 720px){:root{--sidebar-w: 110px}.app-name{display:none}.top-bar-right{gap:6px}.status-text{max-width:180px}}.mode-picker-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#f0efece0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:999}.mode-picker-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius-lg);box-shadow:var(--panel-shadow-lg);padding:36px 40px 32px;width:420px;max-width:92vw;text-align:center;animation:cardIn .22s cubic-bezier(.34,1.56,.64,1) both}@keyframes cardIn{0%{transform:scale(.92) translateY(8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.mode-picker-icon{display:flex;justify-content:center;margin-bottom:14px;color:var(--accent)}.mode-picker-title{font-size:20px;font-weight:600;letter-spacing:-.4px;color:var(--text-primary);margin-bottom:8px}.mode-picker-sub{font-size:13px;color:var(--text-secondary);line-height:1.6;margin-bottom:28px}.mode-picker-options{display:flex;gap:12px}.mode-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 16px 18px;border:1.5px solid var(--panel-border);border-radius:var(--radius-md);background:var(--cell-bg);cursor:pointer;transition:background var(--transition),border-color var(--transition),box-shadow var(--transition),transform 80ms ease;font-family:var(--font)}.mode-btn:hover{background:var(--accent-light);border-color:var(--accent);box-shadow:0 0 0 3px #4a6ea01f;transform:translateY(-1px)}.mode-btn:active{transform:scale(.97)}.mode-btn-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--panel);border:1px solid var(--panel-border);color:var(--accent)}.mode-btn:hover .mode-btn-icon{background:var(--accent);border-color:var(--accent);color:#fff}.mode-btn-label{font-size:14px;font-weight:600;color:var(--text-primary)}.mode-btn-desc{font-size:11px;color:var(--text-tertiary);font-weight:400}.soundboard-area{flex:1;display:flex;background:var(--bg);overflow:hidden}.soundboard-search-container{flex:2;display:flex;flex-direction:column;padding:20px;border-right:1px solid var(--panel-border);background:var(--panel)}.soundboard-bindings-container{flex:1;display:flex;flex-direction:column;padding:20px;background:var(--bg);min-width:300px}.soundboard-search-header{margin-bottom:15px}.soundboard-search-header h2{font-size:20px;font-weight:600;margin:0 0 4px}.soundboard-search-row{display:flex;gap:10px;margin-bottom:20px}.soundboard-input{flex:1;padding:10px 14px;font-size:14px;border:1px solid var(--cell-border);border-radius:var(--radius-sm);background:var(--cell-bg);color:var(--text-primary)}.soundboard-input:focus{outline:none;border-color:var(--accent)}.soundboard-results{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.soundboard-hint{color:var(--text-tertiary);font-size:14px;font-style:italic;text-align:center;margin-top:20px}.soundboard-result-card{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#ffffff0d;border:1px solid var(--cell-border);border-radius:var(--radius-md);transition:all .2s ease}.soundboard-result-card:hover{background:#ffffff1a;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.soundboard-result-title{font-size:15px;font-weight:500;color:var(--text-primary);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:12px}.soundboard-result-actions{display:flex;gap:8px;flex-shrink:0}.soundboard-bindings-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;margin-top:10px}.soundboard-binding-card{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--cell-bg);border:1px solid var(--cell-border);border-radius:var(--radius-sm);box-shadow:0 1px 3px #0000000d}.soundboard-binding-key{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--accent);color:#fff;font-weight:700;font-size:16px;border-radius:4px;flex-shrink:0}.soundboard-binding-title{flex:1;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.soundboard-binding-waiting{padding:30px;text-align:center;background:var(--accent-light);border:2px dashed var(--accent);border-radius:var(--radius-md);color:var(--accent)}