@layer reset,base,theme,components,media;@layer reset{html,body{font-family:unset;margin:0}a,p,h1,h2,h3,h4,h5,h6{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}}@layer base{html{font-family:monospace;height:100%;background-color:var(--bg-html-color)}a,p,h1,h2,h3,h4,h5,h6{color:var(--text-primary)}hr{height:1px;width:100%;background-color:var(--bg-color-secondary);border:none}.full-height{flex:1}.col{display:flex;flex-direction:column}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-sm{font-size:.3em;margin-left:5px}.text-xxl{font-size:3rem}.row{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around}.gap-1{gap:var(--gap-1)}.row-gap-1{row-gap:var(--gap-1)}header{background:linear-gradient(10deg,#c98080,#9d6fb7);border-bottom:solid 1px var(--border-color-primary);text-align:left;padding-left:1rem}section{padding:5px}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}button.unselected{border-bottom:3px solid var(--bg-color-secondary);filter:brightness(85%)}input{background-color:#fefefe;font-size:15pt;border:unset}label{display:flex;align-items:center}footer{display:flex;justify-content:space-between;margin:unset;text-align:center;font-size:.75rem;opacity:30%;padding:5px}[inert]{filter:opacity(.75)}.box-shadow{box-shadow:0 4px 4px #59152f6a}}@layer theme{:root{--bg-html-color: #ececec;--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(128, 106, 124);--border-color-secondary: rgba(251, 167, 252, .91);--text-primary: rgb(31, 24, 24) ;--text-secondary: #fffffff5;--text-size-sm: .75rem;--gap-1: 2px;--gap-2: 4px;--gap-3: 16px;--screen-size-sm: 350px}}@layer components{#root{display:flex;justify-content:center;align-items:start;width:100%;height:100%}.App{background:linear-gradient(0deg,#f4bebe,#99a0ef);border-radius:var(--border-radius);text-align:center;overflow:hidden;border:1px solid var(--border-color-primary);display:flex;flex-direction:column;margin-top:20px;width:300px;height:auto}.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)}.d-flex{display:flex;align-items:center}.modes{display:flex;justify-content:center;gap:2px}.modes button{height:1.5rem}.modes hr{flex:auto;width:unset;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}.tempo-range{display:flex;gap:var(--gap-3)}.play-button{height:48px}.play-button svg{height:40px}.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}.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{display:flex;width:100%;justify-content:space-between;align-items:stretch}.ValueInputField button{display:flex;flex:auto}.ValueInputField button:after{font-size:4px}.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:3rem}.ValueInputField .ValueInputField-unit{background-color:#fff;color:#b0b0b0;padding:.1rem;font-size:.75rem;border-radius:0}.what-s-new{text-decoration:underline;cursor:pointer}.volume{display:flex;flex-direction:column;align-content:start;align-items:start;height:5px;padding:10px;row-gap:5px;border-radius:var(--border-radius)}.volume label{color:var(--text-primary);font-size:var(--text-size-sm);padding-left:6px;height:20px}.volume input[type=range]{flex:1;appearance:none;height:2px;width:100%;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}.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}}@layer media{@media only screen and (max-device-width:300px){.full-page-sm{width:100vw;height:100vh;margin:unset;transition:all .1s}.no-border-radius-sm{border-radius:0;border:unset}.display-none-sm{display:none}.flex-col-sm{display:flex;flex-direction:column}.flex-row-sm{display:flex;flex-direction:row}}}