:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#1a1a1a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh}.header{padding:1rem 1.5rem;background:#242424;border-bottom:1px solid #333;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;max-width:100%;overflow-x:hidden}.header h1{margin:0;font-size:1.25rem;font-weight:600}.rule-selector{display:flex;align-items:center;gap:.5rem}.rule-selector label{font-size:.9rem}.rule-selector input[type=number]{width:4rem;padding:.35rem .5rem;font-size:1rem;border:1px solid #555;border-radius:6px;background:#1a1a1a;color:inherit}.controls{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem}.controls button{padding:.5rem 1rem;font-size:.9rem;border-radius:6px;border:1px solid #555;background:#333;color:inherit;cursor:pointer}.controls button:hover:not(:disabled){border-color:#646cff;background:#404050}.controls button:disabled{opacity:.6;cursor:not-allowed}.controls label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;cursor:pointer}.row-viewer{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;min-width:0}.row-viewer label{font-size:.9rem}.row-viewer .row-length-value{font-size:.85rem;font-family:monospace;padding:.1rem .25rem;border:1px solid #555;border-radius:4px;background:#1a1a1a}.row-length-controls{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.remove-from-left-right-controls{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;min-width:0}.start-index-controls{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.row-viewer input[type=number]{width:4rem;padding:.35rem .5rem;font-size:1rem;border:1px solid #555;border-radius:6px;background:#1a1a1a;color:inherit}.midi-controls{flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;min-width:0}.midi-row-scale-select{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;min-width:0}.scale-select{padding:.35rem .5rem;font-size:1rem;border:1px solid #555;border-radius:6px;background:#1a1a1a;color:inherit;min-width:12rem;max-width:100%}.tempo-division-select{padding:.35rem .5rem;font-size:1rem;border:1px solid #555;border-radius:6px;background:#1a1a1a;color:inherit;min-width:4.5rem;max-width:100%}.midi-row-notes-tempo,.midi-transpose-controls{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;min-width:0}.tempo-controls{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem;min-width:0}.randomize-and-cycle-data{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.row-meta-value{font-size:.85rem;font-family:monospace;padding:.1rem .25rem;border:1px solid #555;border-radius:4px;background:#1a1a1a}.midi-row-output-send{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.notes-input{max-width:12rem;width:100%;min-width:0;padding:.35rem .5rem;font-size:1rem;border:1px solid #555;border-radius:6px;background:#1a1a1a;color:inherit}.tempo-input{width:4rem;padding:.35rem .5rem;font-size:1rem;border:1px solid #555;border-radius:6px;background:#1a1a1a;color:inherit}.transpose-btn{padding:.35rem .5rem;font-size:1rem;border:1px solid #555;border-radius:6px;background:#1a1a1a;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.transpose-btn:hover{border-color:#646cff;background:#404050}.output-select{padding:.35rem .5rem;font-size:1rem;border:1px solid #555;border-radius:6px;background:#1a1a1a;color:inherit;min-width:0;max-width:100%}.output-select:disabled{opacity:.7;cursor:not-allowed}.randomize-notes-button{padding:.5rem 1rem;font-size:.9rem;border-radius:6px;border:1px solid #555;background:#333;color:inherit;cursor:pointer}.randomize-notes-button:hover{border-color:#646cff;background:#404050}.send-midi-button{padding:.5rem 1rem;font-size:.9rem;border-radius:6px;border:1px solid #555;background:#333;color:inherit;cursor:pointer}.send-midi-button:hover:not(:disabled){border-color:#646cff;background:#404050}.send-midi-button:disabled{opacity:.6;cursor:not-allowed}.row-viewer .row-display{font-family:monospace;font-size:.85rem;padding:.35rem .5rem;max-width:min(300px,100%);max-height:3rem;overflow:auto;border:1px solid #555;border-radius:6px;background:#1a1a1a;white-space:nowrap;-webkit-user-select:text;user-select:text}.header2-visual{padding:.1rem 1.5rem;background:#242424;display:flex;flex-wrap:wrap;align-items:center;max-width:100%;overflow-x:hidden}.rule-visual-container{display:flex;align-items:flex-end;gap:0;padding:.25rem;margin-top:10px;margin-right:1.5rem;border:1px solid #555;border-radius:6px;background:#1a1a1a;flex-shrink:0;width:fit-content}.rule-visual-segment{display:flex;flex-direction:column;align-items:center;border-right:1px solid #555;padding:0 2px}.rule-visual-segment:last-child{border-right:none}.rule-visual-top{display:flex;gap:0}.rule-visual-bottom{display:flex;justify-content:center}.rule-visual-container .cell{width:14px;height:14px;min-width:14px;min-height:14px;border:1px solid #555}.header2-container{display:flex;flex-wrap:wrap;align-items:center;column-gap:1rem;row-gap:0;min-width:0}.rule-container{display:flex;align-items:center;gap:.5rem}.main{flex:1;min-height:0;display:flex;justify-content:center;padding:1rem;overflow:auto}.scroll-inner{display:inline-block;padding-left:50vw;padding-right:50vw;min-width:100%}.grid-container{display:inline-block;width:min-content;overflow:visible}.grid{display:flex;flex-direction:column;gap:0;width:fit-content}.grid-row{display:flex;flex-wrap:nowrap;justify-content:center}.cell{width:6px;height:6px;min-width:6px;min-height:6px;box-sizing:border-box}.cell-off{background:#1a1a1a}.cell-on{background:#e0e0e0}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#f5f5f5}.header{background:#fff;border-bottom-color:#ddd}.rule-selector input[type=number],.row-viewer input[type=number],.notes-input,.scale-select,.tempo-division-select,.tempo-input,.transpose-btn,.output-select{background:#f9f9f9;border-color:#ccc}.send-midi-button{background:#f0f0f0;border-color:#ccc}.send-midi-button:hover:not(:disabled){background:#e5e5ff;border-color:#646cff}.randomize-notes-button{background:#f0f0f0;border-color:#ccc}.randomize-notes-button:hover{background:#e5e5ff;border-color:#646cff}.row-viewer .row-display,.row-meta-value{background:#f9f9f9;border-color:#ccc}.controls button{background:#f0f0f0;border-color:#ccc}.controls button:hover:not(:disabled){background:#e5e5ff;border-color:#646cff}.cell-off{background:#f5f5f5}.cell-on{background:#222}.rule-visual-container{background:#f9f9f9;border-color:#ccc}.rule-visual-segment{border-right-color:#ccc}.rule-visual-container .cell{border-color:#ccc}}@media(max-width:480px){.header,.header2-visual{padding-left:.75rem;padding-right:.75rem}.row-viewer .row-display{max-width:100%}}