:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--bg-color: #C8BDB2;--panel-bg: #D9CEC3;--text-main: #333333;--text-muted: #666666;--accent: #6B8E23;--accent-hover: #E67E22;--border-color: #A39B92;--selection: #D8E0D0;--cell-bg: #E3D9CD;--cell-hi: #D6CCC0;--header-bg: #D1C7BB;--button-bg: #C5B9AD}.ime-disabled{ime-mode:disabled;-ms-ime-mode:disabled}*{box-sizing:border-box}body{margin:0;font-family:Hiragino Kaku Gothic ProN,Meiryo,Noto Sans JP,sans-serif;background-color:var(--bg-color);color:var(--text-main);overflow:hidden}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw;max-width:100vw;overflow:hidden}.top-bar{height:50px;background-color:var(--panel-bg);border-bottom:2px solid var(--border-color);display:flex;align-items:center;padding:0 20px;min-width:0;width:100%;box-sizing:border-box}.main-content{display:flex;flex:1;overflow:hidden;width:100%}.sidebar{width:220px;background-color:var(--panel-bg);border-right:1px solid var(--border-color);overflow-y:auto;display:flex;flex-direction:column}.sidebar h2{font-size:14px;margin:0;padding:12px;border-bottom:1px solid var(--border-color);background-color:var(--header-bg);color:#555;text-transform:uppercase}.track-item{padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--border-color);font-size:14px;transition:background-color .1s}.track-item:hover{background-color:var(--selection)}.track-item.active{background-color:var(--accent);color:#fff;border-bottom-color:var(--accent)}.event-workspace{flex:1;display:flex;flex-direction:row;background-color:var(--bg-color);min-width:0;width:100%}.event-list-container{min-width:0;overflow-x:auto;position:relative;background-color:var(--panel-bg)}.resizer{width:5px;cursor:col-resize;background-color:var(--border-color);transition:background-color .2s;z-index:100;display:flex;align-items:center;justify-content:center}.resizer:hover{background-color:var(--accent)}.resizer:after{content:"";width:1px;height:20px;background-color:var(--text-muted);border-radius:1px}.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.resizing-v{cursor:ns-resize;-webkit-user-select:none;user-select:none}.h-resizer{height:5px;cursor:ns-resize;background-color:var(--border-color);transition:background-color .2s;z-index:100;display:flex;align-items:center;justify-content:center}.h-resizer:hover{background-color:var(--accent)}.h-resizer:after{content:"";height:1px;width:20px;background-color:var(--text-muted);border-radius:1px}.piano-roll-container{flex:1;display:flex;flex-direction:column;background-color:var(--bg-color);position:relative;overflow:hidden;min-width:0}.event-table{width:100%;border-collapse:collapse;font-size:13px;color:#000}.event-table th{background-color:var(--header-bg);position:sticky;top:0;text-align:left;padding:4px 6px;border-bottom:1px solid var(--border-color);border-right:1px solid var(--border-color);z-index:10;color:#555;font-weight:700}.event-table td{padding:1px 4px;border-bottom:1px solid var(--border-color);border-right:1px solid var(--border-color);white-space:nowrap}.event-row{background-color:#eae0d5;transition:background-color .1s}.event-row:hover{background-color:var(--cell-hi)}.event-row.selected{background-color:#e67e224d!important}.event-row.playing{background-color:#6b8e2333}.note.selected{outline:2px solid var(--accent-hover)!important;box-shadow:0 0 10px #e67e2280;z-index:1000!important}.event-input{background:transparent;border:1px solid transparent;color:#000;font-family:JetBrains Mono,Courier New,monospace;font-size:inherit;width:100%;padding:1px 2px;border-radius:2px}.event-input:focus{outline:none;background-color:#fff;border:1px solid var(--accent)}.event-input-select{background:var(--cell-bg);color:#000;border:1px solid var(--border-color);padding:2px;font-family:inherit}button{background-color:var(--button-bg);color:var(--text-main);border:1px solid var(--border-color);padding:6px 14px;border-radius:6px;cursor:pointer;transition:all .2s;font-weight:500;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px;outline:none}button:focus,button:focus-visible{outline:none!important;box-shadow:none!important}button:hover{background-color:var(--accent-hover);color:#fff;border-color:var(--accent-hover)}.top-bar button{border-radius:10px;height:32px;padding-top:0;padding-bottom:0}.btn-primary{background-color:var(--accent);border-color:var(--accent);color:#fff}.btn-transport{background-color:var(--button-bg)!important;color:#333!important;border-color:var(--border-color)!important;min-width:95px;justify-content:center;outline:none!important;box-shadow:none!important}.btn-transport:focus{outline:none!important}.btn-transport:hover{background-color:var(--accent-hover)!important;color:#fff!important}.toolbar-group{display:flex;align-items:center;gap:10px;padding-right:20px;border-right:1px solid var(--border-color);height:100%;flex-shrink:0}.toolbar-group--no-right-border{border-right:none;padding-right:10px}.display-panel{background-color:#fff;border:1px solid var(--border-color);padding:4px 8px;border-radius:4px;font-family:JetBrains Mono,Courier New,monospace;color:var(--accent);min-width:120px;text-align:center}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.menu-item{transition:background-color .1s;color:var(--text-main)}.menu-item:hover{background-color:var(--accent);color:#fff!important}.btn-icon-circle{width:32px;height:32px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;background:var(--button-bg);border:1px solid var(--border-color);cursor:pointer;flex-shrink:0;transition:background-color .15s}.btn-icon-circle:hover{background-color:var(--accent-hover)!important}