.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:4px;cursor:pointer;font-family:inherit;font-weight:500;transition:all .15s ease}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-small{padding:.25rem .5rem;font-size:.75rem}.btn-medium{padding:.5rem 1rem;font-size:.875rem}.btn-large{padding:.75rem 1.5rem;font-size:1rem}.btn-primary{background:#3b82f6;color:#fff}.btn-primary:hover:not(:disabled){background:#2563eb}.btn-primary.btn-active{background:#1d4ed8}.btn-secondary{background:#374151;color:#fff}.btn-secondary:hover:not(:disabled){background:#4b5563}.btn-secondary.btn-active{background:#1f2937}.btn-danger{background:#ef4444;color:#fff}.btn-danger:hover:not(:disabled){background:#dc2626}.slider-container{display:flex;flex-direction:column;gap:.25rem}.slider-container.slider-vertical{flex-direction:column;align-items:center;height:100%}.slider-top-row{display:flex;justify-content:space-between;align-items:center}.slider-label{font-size:.75rem;color:#9ca3af}.slider-input{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:#ccc;border-radius:2px;outline:none}.slider-vertical .slider-input{writing-mode:vertical-lr;direction:rtl;height:100%;width:4px}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:#3b82f6;border-radius:50%;cursor:pointer;transition:background .15s ease}.slider-input::-webkit-slider-thumb:hover{background:#2563eb}.slider-input::-moz-range-thumb{width:14px;height:14px;background:#3b82f6;border-radius:50%;cursor:pointer;border:none}.slider-value{font-size:.75rem;color:#9ca3af;text-align:right;font-family:monospace}.select-container{display:flex;align-items:center;gap:.5rem}.select-label{font-size:.75rem;color:#9ca3af}.select-input{padding:.5rem;background:#1f2937;border:1px solid #374151;border-radius:4px;color:#fff;font-size:.875rem;cursor:pointer;min-width:120px}.select-input:focus{outline:none;border-color:#3b82f6}.select-input option{background:#1f2937;color:#fff}.transport{display:flex;align-items:center;gap:2rem;padding:1rem;background:#1f2937;border-radius:8px}.transport-controls{display:flex;gap:.5rem}.transport-display{display:flex;align-items:baseline;gap:.25rem;font-family:monospace}.transport-beat{font-size:1.5rem;font-weight:700;color:#3b82f6;min-width:30px}.transport-info{font-size:.875rem;color:#6b7280}.transport-tempo,.transport-master-volume{flex:1;max-width:200px}.track-list{display:flex;flex-direction:column;gap:.5rem;background:#1f2937;border-radius:8px;padding:1rem}.track-list-header{display:flex;justify-content:space-between;align-items:center}.track-list-header h3{margin:0;font-size:1rem;color:#9ca3af}.track-list-items{display:flex;flex-direction:column;gap:.5rem}.track-item{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:#374151;border-radius:4px;cursor:pointer;transition:background .15s ease}.track-item:hover{background:#4b5563}.track-item-selected{background:#3b82f6}.track-item-selected:hover{background:#2563eb}.track-item-header{display:flex;align-items:center;gap:.5rem}.track-item-name-input{font-weight:500;font-size:inherit;font-family:inherit;background:transparent;border:1px solid transparent;border-radius:4px;color:inherit;padding:.125rem .25rem;outline:none;width:100%;transition:background .15s ease,border-color .15s ease}.track-item-name-input:hover{background:#0003;border-color:#4b5563}.track-item-name-input:focus{background:#0000004d;border-color:#3b82f6}.track-item-body{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.track-item-notes{font-size:.75rem;color:#9ca3af;white-space:nowrap}.track-item-selected .track-item-notes{color:#bfdbfe}.track-item-actions{display:flex;align-items:center;gap:.25rem;margin-left:auto}.track-item-actions .btn{font-size:.75rem;border:1px solid transparent;line-height:.875rem;display:inline-flex;align-items:center;justify-content:center}.track-item-selected .btn-primary{background:#fff3;border-color:#fff6;transition:none}.track-item-selected .btn-primary:hover:not(:disabled){background:#ffffff4d}.track-item-selected .btn-danger{transition:none}.track-item-volume{display:flex;align-items:center;gap:.5rem}.track-item-volume-buttons{display:flex;gap:.25rem;flex-shrink:0}.track-item-volume-slider{flex:1;min-width:0}.track-item-volume-value{font-size:.625rem;color:#9ca3af;font-family:monospace;min-width:28px;text-align:right;flex-shrink:0}.track-item-selected .track-item-volume-value{color:#bfdbfe}.track-item-selected .slider-input::-webkit-slider-thumb{background:#fff}.track-item-selected .slider-input::-webkit-slider-thumb:hover{background:#e2e8f0}.track-item-selected .slider-input::-moz-range-thumb{background:#fff}.track-item-selected .slider-input::-moz-range-thumb:hover{background:#e2e8f0}.note-editor{background:#1f2937;border-radius:8px;padding:1rem;overflow:hidden}.note-editor-empty{display:flex;align-items:center;justify-content:center;min-height:200px;color:#6b7280}.note-editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.note-editor-header h3{margin:0;font-size:1rem;color:#9ca3af}.note-editor-controls{display:flex;align-items:center;gap:.5rem}.resolution-toggle{display:flex;border-radius:4px;overflow:hidden}.resolution-btn{padding:.25rem .5rem;background:#374151;border:1px solid #4b5563;border-right:none;color:#9ca3af;font-size:.75rem;cursor:pointer;transition:background .15s ease,color .15s ease}.resolution-btn:last-child{border-right:1px solid #4b5563}.resolution-btn:hover{background:#4b5563;color:#e5e7eb}.resolution-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff}.resolution-btn.active+.resolution-btn{border-left-color:#3b82f6}.randomize-notes-btn{padding:.35rem .75rem;background:#8b5cf6;border:none;border-radius:4px;color:#fff;font-size:.75rem;cursor:pointer;transition:background .15s ease}.randomize-notes-btn:hover{background:#7c3aed}.note-editor-grid-container{display:flex;overflow:auto;max-height:520px}.note-editor-labels{display:flex;flex-direction:column;flex-shrink:0}.note-editor-label-spacer{height:20px;flex-shrink:0}.note-editor-label{height:20px;width:40px;display:flex;align-items:center;justify-content:flex-end;padding-right:.5rem;font-size:.625rem;color:#9ca3af;background:#111827;border-bottom:1px solid #374151;flex-shrink:0}.note-editor-label.black-key{background:#0f172a;color:#6b7280}.note-editor-grid{flex:1;min-width:0}.note-editor-beat-markers{display:flex;height:20px;background:#111827;border-bottom:2px solid #3b82f6}.note-editor-beat-marker{width:30px;display:flex;align-items:center;justify-content:center;font-size:.625rem;color:#6b7280}.note-editor-beat-marker.sub{width:20px}.note-editor-beat-marker.playing{background:#fbbf244d;color:#fbbf24;font-weight:700}.note-editor-row{display:flex;height:20px}.note-editor-row.black-key-row{background:#0003}.note-editor-cell{width:30px;height:20px;border:1px solid #374151;border-right:none;border-bottom:none;cursor:pointer;transition:background .1s ease}.note-editor-cell.cell-sm{width:20px}.note-editor-cell:last-child{border-right:1px solid #374151}.note-editor-row:last-child .note-editor-cell{border-bottom:1px solid #374151}.note-editor-cell:hover{background:#3b82f633}.note-editor-cell.bar-start{border-left:2px solid #4b5563}.note-editor-cell.beat-start{border-left:2px solid #374151}.note-editor-cell.has-note{background:#3b82f6;position:relative}.note-editor-cell.has-note:hover{background:#2563eb}.note-editor-cell.note-start.note-end{border-radius:3px}.note-editor-cell.note-start:not(.note-end){border-radius:3px 0 0 3px;border-right:none}.note-editor-cell.note-middle{border-left-color:transparent;border-right:none;border-radius:0}.note-editor-cell.note-end:not(.note-start){border-radius:0 3px 3px 0;border-left-color:transparent}.note-editor-cell.drag-preview{background:#3b82f680}.note-editor-cell.playing{background:#fbbf2426}.note-editor-cell.playing.has-note{background:#f59e0b}.instrument-panel{background:#1f2937;border-radius:8px;padding:1rem}.instrument-panel-empty{display:flex;align-items:center;justify-content:center;min-height:200px;color:#6b7280}.instrument-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.instrument-panel-header h3{margin:0;font-size:1rem;color:#9ca3af}.instrument-panel-actions{display:flex;gap:.5rem}.preview-btn{padding:.25rem .75rem;background:#3b82f6;border:none;border-radius:4px;color:#fff;font-size:.75rem;cursor:pointer;transition:background .15s ease}.preview-btn:hover{background:#2563eb}.randomize-btn{padding:.25rem .75rem;background:#8b5cf6;border:none;border-radius:4px;color:#fff;font-size:.75rem;cursor:pointer;transition:background .15s ease}.randomize-btn:hover{background:#7c3aed}.instrument-params{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.param-section{background:#374151;border-radius:4px;padding:.75rem;overflow:hidden}.param-section h4{margin:0 0 .5rem;font-size:.75rem;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em}.param-section .slider-container{margin-bottom:.5rem}.param-section .slider-container:last-child{margin-bottom:0}.param-section .select-container{margin-bottom:.5rem}.import-export{display:flex;gap:.5rem}*{box-sizing:border-box}:root{color-scheme:dark}body{margin:0;background:#111827;color:#f3f4f6;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{display:flex;flex-direction:column;min-height:100vh;padding:1rem;gap:1rem}.app-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0}.app-header-left{display:flex;align-items:baseline;gap:.5rem}.app-header h1{margin:0;font-size:1.5rem;background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-title-separator{color:#4b5563;font-size:1.25rem}.app-title-input{font-size:1rem;font-weight:500;line-height:1;background:transparent;border:1px solid transparent;border-radius:4px;color:#9ca3af;padding:.25rem .5rem;outline:none;transition:background .15s ease,border-color .15s ease,color .15s ease;max-width:200px}.app-title-input:hover{background:#ffffff0d;border-color:#4b5563;color:#f3f4f6}.app-title-input:focus{background:#ffffff0d;border-color:#3b82f6;color:#f3f4f6}.app-header-right{display:flex;align-items:center;gap:1rem}.app-transport{flex-shrink:0}.app-content{display:flex;gap:1rem;flex:1;min-height:0}.app-sidebar{width:300px;flex-shrink:0;display:flex;flex-direction:column;gap:1rem}.app-main{flex:1;display:flex;flex-direction:column;gap:1rem;min-width:0;overflow:hidden}@media(max-width:768px){.app-content{flex-direction:column}.app-sidebar{width:100%}}