html,body{font-family:monospace;height:100%;margin:0;background-color:#3d3d3f;--bg-color-primary: rgb(34, 35, 47);--bg-color-secondary: rgb(153, 142, 195);--btn-color: rgba(34, 35, 47, .939);--btn-color-hover: rgba(62, 64, 86, .939);--border-radius: 5px;--border-color-primary: rgb(87, 7, 75);--border-color-secondary: rgba(251, 167, 252, .91);--text-primary: rgb(31, 24, 24) ;--text-secondary: #fff;--text-size-sm: .75rem;--gap-1: 2px;--gap-2: 4px;--gap-3: 16px}.mt-3{margin-top:8px}.mt-5{margin-top:16px}#root{display:flex;justify-content:center;align-items:start;width:100%;height:100%}p,h1,h2,h3,h4,h5,h6{color:var(--text-primary);padding:unset;margin:unset}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.App{background:linear-gradient(0deg,#f4bebe,#99a0ef);border-radius:var(--border-radius);text-align:center;box-shadow:0 10px 20px #59152f6a;overflow:hidden;border:1px solid var(--border-color-primary);display:flex;flex-direction:column;gap:5px;margin-top:20px}@media only screen and (max-device-width:500px){.App{width:100vw;height:100vh;margin:unset}}header{background:linear-gradient(45deg,#ffeded,#0000);font-size:25pt;color:var(--text-primary);text-align:left;padding-left:1rem;border-radius:4px 0 0}[inert]{filter:opacity(.75)}section{padding:5px}.controls{display:flex;gap:var(--gap-3);justify-content:space-between;align-items:stretch;flex-direction:column}.controls-main{display:grid;grid-template-columns:auto 100px;gap:var(--gap-2)}button{height:40px;display:flex;align-items:center;background-color:var(--btn-color);color:var( --text-secondary);border-radius:var(--border-radius);font-size:larger;border:1px solid var(--border-color-secondary)}button:hover{background-color:var(--btn-color-hover);cursor:pointer}input{background-color:#fefefe;font-size:15pt;border:unset}label,.d-flex{display:flex;align-items:center}.modes{display:flex;justify-content:center;gap:2px}.modes button{height:1.5rem}.modes hr{flex:auto;height:1px;background-color:var(--bg-color-secondary);border:none;transform:translateY(3px)}section.variation{display:grid;gap:var(--gap-3);align-items:start;grid-template-columns:1fr}.ValueInputFieldRange{display:flex;flex-direction:column;gap:var(--gap-3)}.ValueInputFieldRange .ValueInputField{margin-top:var(--gap-2)}.FormGroup{display:flex}.FormGroup *{border-radius:0}.FormGroup button{font-size:.8rem}.FormGroup:not(:last-child){border-right-width:0}.FormGroup :first-child{border-radius:var(--border-radius) 0 0 var(--border-radius)}.FormGroup :last-child{border-radius:0 var(--border-radius) var(--border-radius) 0}button.unselected{border-bottom:3px solid var(--bg-color-secondary);filter:brightness(85%)}.tempo-range{display:flex;gap:var(--gap-3)}.play-button{display:flex;justify-content:center;gap:5px}.play-button svg{height:24px}.diode{background-color:#65104a;filter:drop-shadow(0 0 10px rgb(168,80,80));width:8px;height:8px;border-radius:100%;border:2px solid rgba(196,156,247,.424);margin:4px}.diode.diode-on{background-color:red;box-shadow:0 0 10px red}.version{font-size:.3em;margin-left:5px;color:#0000003e}.divider{height:0;margin:0;border-top:1px solid rgba(0,0,0,.286)}.ValueInputField-group{filter:drop-shadow(-1px 2px 2px rgba(1,151,185,.575))}.ValueInputField-label{background-color:#fbbeff;margin-top:5px;margin-bottom:-5px;padding:.2rem .2rem .2rem .4rem;padding-bottom:calc(.2rem + 5px);justify-self:left;min-width:25%;max-width:50%;border-radius:var(--border-radius) var(--border-radius) 0 0;font-size:.8rem}.ValueInputField,.ValueInputField button{display:flex}.ValueInputField button:after{height:5%;font-size:.8rem}.ValueInputField button :first-child{height:75%}:is(.ValueInputField button:first-child,.ValueInputField button:last-child):after{height:5%;font-size:.8rem}.ValueInputField button:nth-child(2),.ValueInputField button:nth-last-child(2){border-radius:unset}:is(.ValueInputField button:nth-child(2),.ValueInputField button:nth-last-child(2)):after{height:5%;font-size:1rem}.ValueInputField button span{font-size:.9rem;margin-top:auto}.ValueInputField .ValueInputField-div{display:flex;border:1px solid rgba(251,167,252,.91)}.ValueInputField .ValueInputField-input{text-align:right;border-radius:0;max-width:4rem}.ValueInputField .ValueInputField-unit{background-color:#fff;color:#b0b0b0;padding:.1rem;border-radius:0}footer{display:flex;justify-content:space-between;margin:unset;text-align:center;font-size:.75rem;opacity:30%;padding:5px}.what-s-new{text-decoration:underline;cursor:pointer}.volume{display:flex;justify-content:space-around;height:2rem;align-items:center;border-radius:var(--border-radius)}.volume label{color:var(--text-primary);font-size:var(--text-size-sm);text-align:center;flex:auto;padding-left:6px}.volume input[type=range]{flex:1;appearance:none;height:2px;max-width:75%;border-radius:10px}.volume input[type=range]:focus{outline:none}.volume input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid #000000;width:40px;height:10px;border-radius:3px;background:var(--bg-color-primary);cursor:pointer}.bpm-display{display:grid;background-color:#8b3f8b6e;border-radius:5px;height:100%;grid-template-columns:10px auto 10px}.bpm-display .value{color:#f9e1fe;font-size:6rem;margin:unset;transition:all .05s;text-align:right;min-width:180px}.bpm-display .value.disabled{opacity:.2}.bpm-display .value .unit{font-size:2rem}.flex-col{display:flex;flex-direction:column}.flex-row{display:flex;flex-direction:row}.sequencer{display:grid;row-gap:2px}.sequencer-line{display:grid;border-radius:4px;grid-template-columns:auto repeat(16,16px);align-items:center;font-size:.75rem;text-align:right;background-color:#ffffff7c;padding:2px}.sequencer-line :first-child{margin-right:.5rem}.sequencer-line :nth-child(4n+2){filter:brightness(1.5)}.sequencer-btn{border-radius:4px;margin-right:1px;border-color:#db9cff}.sequencer-btn.down{background-color:#9746ba}.sequencer-btn.current{filter:brightness(2)}.advanced{display:flex;font-size:.75rem;align-items:center}