body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;background-color:#e3ded9;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;height:100vh;justify-content:center;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.key{align-items:flex-end;border-radius:5px;font-size:clamp(0px,16px,11px);font-size:clamp(0px,calc(var(--key-width, 48px) - 32px),11px);height:64px;height:calc(var(--key-width, 48px)*4/3);overflow:hidden;padding-bottom:2px;touch-action:manipulation;transition:background-color .2s;-ms-user-select:none;width:48px;width:var(--key-width,48px)}.key.Black,.key.white{border:1px solid #aca7a4}.key.Black{background-color:#545150}.key.active{transform:scale(.95)}.key.uniform{background-color:#f7f4f2!important;border:1px solid #ccc;color:#585655!important}.key.customhighlight{background-color:#373635!important;border:1px solid #aca7a4;color:#fff!important}.keyboard{display:flex;flex-direction:column;gap:0;margin-top:10px;touch-action:none}.row{display:flex;gap:.5px;justify-content:center;position:relative}.row:nth-child(2),.row:nth-child(4){margin-left:-50.016px;margin-left:calc(var(--key-width, 48px)*-1.042)}.keyboard .row.hexagon-row:nth-child(2),.keyboard .row.hexagon-row:nth-child(4){margin-left:-50.016px;margin-left:calc(var(--key-width, 48px)*-1.042);top:20px}.key-placeholder{height:64px;height:calc(var(--key-width, 48px)*4/3);visibility:hidden;width:48px;width:var(--key-width,48px)}.row.extra-space-below{margin-bottom:10px}.key{align-items:center;border:1px solid #75716f;cursor:pointer;display:flex;justify-content:center;transition:background-color .1s ease;-webkit-user-select:none;user-select:none}.key.white{background-color:#fff}.key.Black{background-color:#393736;color:#fff}.key.hexagon{border:none;clip-path:polygon(50% 4%,100% 28%,100% 72%,50% 96%,0 72%,0 28%);height:48px;height:var(--key-width,48px);margin:2px;width:48px;width:var(--key-width,48px)}.keyboard .row.hexagon-row{gap:1px;margin-left:0;top:8px}.keyboard .row.hexagon-row:first-child{top:0}.keyboard .row.hexagon-row:nth-child(2){margin-left:-50.016px;margin-left:calc(var(--key-width, 48px)*-1.042);top:-18.72px;top:calc(var(--key-width, 48px)*-.39)}.keyboard .row.hexagon-row:nth-child(3){top:-37.44px;top:calc(var(--key-width, 48px)*-.78)}.keyboard .row.hexagon-row:nth-child(4){margin-bottom:-48px;margin-bottom:calc(var(--key-width, 48px)*-1);margin-left:-50.016px;margin-left:calc(var(--key-width, 48px)*-1.042);top:-56.64px;top:calc(var(--key-width, 48px)*-1.18)}.key.circle,.keyboard .key-placeholder+.key.hexagon{height:48px;height:var(--key-width,48px);width:48px;width:var(--key-width,48px)}.key.circle{border:1px solid #75716f;border-radius:50%;margin:-2px}.keyboard .row.circle-row{gap:4px;margin-left:0;top:-6px}.keyboard .row.circle-row:first-child{top:0}.keyboard .row.circle-row:nth-child(2){margin-left:-50.016px;margin-left:calc(var(--key-width, 48px)*-1.042);top:-4px}.keyboard .row.circle-row:nth-child(3){top:-8px}.keyboard .row.circle-row:nth-child(4){margin-left:-50.016px;margin-left:calc(var(--key-width, 48px)*-1.042);top:-12px}.keyboard .key-placeholder+.key.circle,.keyboard .key.circle+.key-placeholder{height:48px;height:var(--key-width,48px);width:48px;width:var(--key-width,48px)}.chord-controls{gap:10px;margin-bottom:20px}.arpeggiator-controls,.chord-controls{display:flex;flex-direction:column;margin-top:-10px}.arpeggiator-controls{gap:15px;margin-bottom:10px}.control-row,.control-row-custom,.control-row-extended{align-items:center;display:flex;gap:10px;justify-content:center}.arpeggiator-controls button,.chord-controls button,.control-row-custom button,.control-row-extended button,.keyboard-toggle-container button{border:none;border-radius:5px;color:#333;cursor:pointer;padding:8px 10px;transition:transform .1s}.inversion-button{background-color:#eeeae6;margin-left:-2px}.control-row-extended button{font-size:12px;padding:6px 10px}.control-row-custom button{font-size:12px}.chord-controls button.active,.keyboard-toggle-container button.active{transform:scale(1.1)}.arpeggiator-controls input[type=text]{border:1px solid #ccc;border-radius:5px;margin-left:5px;padding:5px;width:90px}.arpeggiator-controls label{font-size:14px}.arpeggiator-controls input[type=range]{-webkit-appearance:none;background:#0000;margin-left:5px;width:102px}.arpeggiator-controls input[type=range]::-webkit-slider-runnable-track{background:#d3cdc7;border-radius:4px;height:8px}.arpeggiator-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#6e6c6a;border-radius:50%;cursor:pointer;height:16px;margin-top:-4px;width:16px}.arpeggiator-controls span,.keyboard-toggle-container span{font-size:12px;margin-left:5px}.BlockChord1,.direction-button,.random-pattern-button{align-items:center;background-color:#eeeae6;display:flex;font-size:16px;height:30px;justify-content:center;padding:2px 12px;width:30px}.BlockChord1{font-size:12px;margin-right:-10px}.direction-button.up{background-color:#efe7c7}.direction-button.down{background-color:#cedfdf}.keyboard-toggle-container{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;margin-top:12px}.key-color-toggle,.key-shape-toggle,.keyboard-toggle{background-color:#eeeae6}.help-arpeggiatorPattern,.help-chordProgression,.help-customChords,.help-infty{align-items:center;background-color:#d3cdc7;border-radius:50%;cursor:help;display:inline-flex;font-size:12px;height:20px;justify-content:center;position:relative;width:20px}.help-customChords{margin-left:-4px}.help-chordProgression{margin-top:6px}.help-arpeggiatorPattern:focus:after,.help-arpeggiatorPattern:hover:after,.help-chordProgression:focus:after,.help-chordProgression:hover:after,.help-customChords:focus:after,.help-customChords:hover:after,.help-infty:focus:after,.help-infty:hover:after{background-color:#333;border-radius:5px;color:#fff;content:"This is not realtime recording. The recorded chord progression will be played according to the current BPM.";font-size:14px;left:50%;margin-top:5px;padding:10px;position:absolute;text-align:center;top:100%;transform:translateX(-50%);white-space:normal;width:300px;z-index:10}.help-arpeggiatorPattern:focus:after,.help-arpeggiatorPattern:hover:after{content:"Specify the order in which chord notes should be played. Numbers exceeding the chord notes count triggers corresponding notes in higher octaves";position:absolute}.help-customChords:focus:after,.help-customChords:hover:after{content:"Register your own chord by clicking the notes the mini keyboard, with the bottom-left key being the root note";position:absolute}.help-infty:focus:after,.help-infty:hover:after{content:"Create inverted block-chords according to the notes specified in the arpeggiator.";position:absolute}.custom-chord-container{align-items:center;display:flex;margin-right:10px}.mini-keyboard{display:flex;flex-direction:column-reverse;margin-left:3px;margin-right:-9.4px}.mini-keyboard .mini-row.top-row{margin-left:5px}.mini-keyboard .mini-row.bottom-row{margin-left:10px}.mini-row{display:flex}.mini-key{background-color:#fff;border:1px solid #cfc9c4;border-radius:3px;box-sizing:border-box;cursor:pointer;height:15px;margin:.1px;padding:0;width:12px}.mini-key.active{background-color:#f99}.chord-button-container{position:relative}.floating-keyboard{background-color:#f1eceae6;border:1px solid #ccc;border-radius:3px;display:none;left:50%;padding:5px 15px 5px 5px;position:absolute;top:100%;transform:translateX(-50%);z-index:20}.chord-button-container:focus-within .floating-keyboard,.chord-button-container:hover .floating-keyboard{display:block}.mini-keyboard.static .mini-key{cursor:default}.mini-keyboard.extended{width:95px}.highlight-selector-row{align-items:center;display:flex;gap:6px;justify-content:center;margin-top:-6px}.highlight-label{font-size:12px}.note-list{display:flex;flex-wrap:wrap;gap:2px}.note-button{align-items:center;background-color:#fff;border-radius:1px;display:inline-flex;font-size:10px;height:18px;justify-content:center;padding:8px!important;width:10px!important}.note-button.active{background-color:#dab3b3;color:#fff}.key-range-selector{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.key-input{align-items:center;display:flex;gap:5px}.key-input label,.key-input select{color:#333;font-size:12px}.key-input select{background-color:#fff;border:1px solid #ccc;border-radius:5px;cursor:pointer;height:28px;padding:0 5px;width:45px}.key-input select.input-error{border-color:#e74c3c}.error-message{color:#e74c3c;font-size:12px;margin-top:5px;text-align:center;width:100%}.chord-progression-display{background-color:#f7f5f4;border:.8px solid #cecccb;border-radius:5px;font-size:10px;height:20px;margin-bottom:16px;margin-top:0;padding:5px}.progression-list{display:flex;flex-wrap:wrap;gap:4px}.chord-item{background-color:#eeeae6;border-radius:3px;font-family:monospace;font-size:10px;line-height:2;padding:0 8px 1px 2px}.chord-item .notation-container{display:inline-block;position:relative;vertical-align:middle;width:1}.chord-item sup{font-size:.8em;left:0;position:absolute;top:-1.6em}.chord-item sub{bottom:-2.5em;font-size:.5em;left:-2.4em;position:absolute}.chord-item .arpeggioPattern-display{bottom:.1em;font-size:.6em;position:relative;transform:scale(.8)}.app{align-items:center;background-color:#e2ded8;display:flex;flex-direction:column;font-family:Arial,sans-serif;min-height:100vh;padding:20px}h1{color:#333;margin-bottom:20px}body{color:#0e0d0d}.progression-controls{display:flex;font-size:14px;gap:10px;justify-content:center;margin-top:0}.progression-controls button{background-color:#eeeae6;border:none;border-radius:5px;color:#333;cursor:pointer;font-size:12px;height:30px;padding:0 12px;transition:background-color .2s}.progression-controls button.active{background-color:#dab3b3}.progression-controls button:disabled{background-color:#cccac8;color:#919191;cursor:not-allowed}.progression-controls button.play-button{font-size:14px;height:30px;padding:0 10px}.repeat-control,.volume-control{align-items:center;display:inline-flex;gap:10px;margin-bottom:14px}.repeat-control input[type=number]{border:1px solid #ccc;border-radius:5px;height:24px;width:18px}.repeat-control,.volume-control label{font-size:12px}.volume-control input[type=range]{-webkit-appearance:none;background:#0000;margin-left:-2px;width:87.5px}.volume-control input[type=range]::-webkit-slider-runnable-track{background:#d3cdc7;border-radius:4px;height:8px}.volume-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#6e6c6a;border-radius:50%;cursor:pointer;height:16px;margin-top:-4px;width:16px}
/*# sourceMappingURL=main.68e7ffe2.css.map*/