html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}::selection{background:transparent}::-moz-selection{background:transparent}#sound-panel{--container-border-radius: 10px;--section-background-color: rgb(33, 33, 33);--panel-section-padding: .6rem 1.8rem;--panel-section-border: rgb(209, 209, 209) solid .2rem;box-sizing:border-box;background-color:var(--sequencer-primary-color);height:100%;width:100%;display:flex;padding:1rem 0rem}#sample-name{font-size:2rem}.sample-details{background-color:var(--sequencer-primary-color);box-sizing:border-box;width:30%;padding:var(--panel-section-padding);color:#fff;height:100%;border-right:rgb(209,209,209) solid .15rem;display:flex;flex-direction:column;flex-wrap:wrap}.effect-group{width:100%;display:flex;flex-direction:column;margin:.5rem 0}.effect-group span{margin-top:.6rem}input[type=range]{--slider-track-color: rgba(220, 220, 220, 1);--slider-progress-color: rgb(126, 126, 126);--slider-thumb-color: rgb(30, 29, 29);--slider-thumb-height: 1.4rem;--slider-thumb-width: .8rem;--thumb-border-width: .15rem;--slider-height: .2rem;--slider-width: 1.8rem;--slider-border-radius: 50px;--track-border-radius: 2px;margin-top:1rem;-webkit-appearance:none;appearance:none;width:100%;height:var(--slider-height);cursor:pointer;outline:none;border-radius:var(--track-border-radius)}input[type=range]::-webkit-slider-runnable-track{height:var(--slider-height);border-radius:var(--track-border-radius)}input[type=range]::-moz-range-track{height:var(--slider-height);border-radius:var(--track-border-radius)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:var(--slider-thumb-height);width:var(--slider-thumb-width);border-radius:20%;border:solid rgb(115,113,113);border-width:var(--thumb-border-width);box-sizing:content-box;transform:translateY(calc((-1 * (var(--slider-thumb-height) / 2) - var(--thumb-border-width)) + var(--slider-height) / 2));background-color:var(--slider-thumb-color)}input[type=range]::-moz-range-thumb{appearance:none;height:var(--slider-thumb-height);width:var(--slider-thumb-width);border-radius:20%;border:solid rgb(115,113,113);border-width:var(--thumb-border-width);box-sizing:content-box;background-color:var(--slider-thumb-color)}:root{--ring-width: 14%;--ring-space: 20%;--knob-color-1: rgb(67, 68, 67);--knob-color-2: rgb(40, 38, 38)}.knob-root{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:.2rem 1rem 0;height:fit-content}.knob-container{display:flex;align-items:center;justify-content:center;position:relative;margin-top:.6rem}.knob-value-container{color:#fff;display:flex;justify-content:center}.knob-label,.knob-value{font-size:.8rem}.knob-label{color:#fff;margin:.2rem 0px}.knob-label-container{display:flex;flex-wrap:nowrap}.ring{position:absolute;background:conic-gradient(#545c64 140deg,#b0a1a100 0 220deg,#545c64 0deg);border-radius:50%;width:100%;height:100%}.ring-fill{position:absolute;border-radius:50%;width:100%;height:100%}.space{position:absolute;background-color:#151515;border-radius:50%;width:calc((100%) - var(--ring-width));height:calc((100%) - var(--ring-width))}.knob{display:flex;align-items:center;justify-content:center;position:absolute;background:radial-gradient(circle at center,#4a4949,#4b4a4a,#313134 40%,#222);border-radius:50%;width:calc((100%) - (var(--ring-width) + var(--ring-space)));height:calc((100%) - (var(--ring-width) + var(--ring-space)));cursor:pointer}.knob-indicator-container{display:flex;justify-content:center;width:100%;height:100%}.knob-indicator{background:#fff;width:9%;height:35%;margin-top:4%}#steppers{position:relative;flex:3.4;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding-left:.4rem}.stepper{height:11.75%;width:100%;display:flex;flex-direction:row}.step:active{animation:bounce .3s ease-in-out}.step{border:solid 3px var(--sequencer-primary-color);border-radius:4px;height:100%;background-color:#696969;cursor:pointer;opacity:.6;box-sizing:border-box}.step.beat[data-selected=off]{background-color:#b0b0b0}.stepper-controls[data-selected=on]{border-radius:.2rem}.step[data-selected=on]{opacity:.6}.step[data-ticking=on][data-selected=on]{animation:bounce .25s ease-in-out;opacity:1}[data-ticking=on]{background-color:#f3ef94}.step.beat[data-ticking=on]{background-color:#aee524}.step[data-selected=on][data-stepper-id="0"]{background-color:var(--color-0)}.step[data-selected=on][data-stepper-id="1"]{background-color:var(--color-1)}.step[data-selected=on][data-stepper-id="2"]{background-color:var(--color-2)}.step[data-selected=on][data-stepper-id="3"]{background-color:var(--color-3)}.step[data-selected=on][data-stepper-id="4"]{background-color:var(--color-4)}.step[data-selected=on][data-stepper-id="5"]{background-color:var(--color-5)}.step[data-selected=on][data-stepper-id="6"]{background-color:var(--color-6)}.step[data-selected=on][data-stepper-id="7"]{background-color:var(--color-7)}:root{--ring-width: 14%;--ring-space: 20%;--color-0: #0099ff;--color-1: #b655ff;--color-2: #ffff00;--color-3: #99ff00;--color-4: #ff7fff;--color-5: #ff6600ff;--color-6: #00ffff;--color-7: #ff0066 }#steppers-controls{height:100%;width:30%;min-width:400px;display:flex;flex:2;cursor:pointer;flex-direction:column;justify-content:space-between}.stepper-controls{display:flex;justify-content:space-around;align-items:center;height:11.75%;background-color:#3b3a3a;box-sizing:border-box;color:#fff;border-left:.5rem solid transparent;border-radius:4px}.stepper-controls[data-selected=off]{border-color:#505050}.stepper-controls span{box-sizing:border-box}.solo-mute-container,.stepper-info-container,.stepper-resize-container,.delete-container{display:flex;align-items:center;justify-content:space-evenly;height:100%;font-size:.8rem}.stepper-info-container{flex:1}.solo-mute-container{flex:2}.stepper-resize-container{flex:8}.delete-container{flex:1}.clear-btn{background-color:#1c1c1c;border-radius:4px;display:flex;font-size:.6rem;justify-content:center;align-items:center;height:2rem;width:2rem;cursor:pointer}.clear-img{color:green;max-height:50%}.clear-img svg{fill:green;stroke:green}.clear-svg{stroke:#00f;fill:#00f}.clear-btn:active{animation:bounce .3s ease-in-out}.clear-btn:hover:active{background-color:#858585;animation:bounce .3s ease-in-out}.clear-btn span{text-align:center}.clear-btn:hover{color:#262626;background-color:#fff}.clear-btn img{width:100%;height:100%}.panel-section{height:30%;box-sizing:border-box;border-right:var(--panel-section-border);display:flex;flex-direction:column;justify-content:space-between;padding:0 1rem}.panel-section-title{color:#000;background-color:#f5f5f5;border-radius:4px;font-weight:700;text-align:center;padding-top:.3rem;display:flex;align-items:center;justify-content:center}.panel-section-controls{display:flex;justify-content:center;width:100%}.counter{display:flex}.counter-item{min-width:1rem;flex:1;color:#fff;padding:.4rem;display:flex;justify-content:center;align-items:center;box-sizing:content-box;font-size:.9rem;overflow:hidden;background-color:#1c1c1c}.counter-btn{font-size:1.2rem}.counter-btn:hover:active{background-color:#858585;animation:bounce .3s ease-in-out}.counter-btn:hover{color:#262626;background-color:#fff}.counter-plus{border-radius:0 2rem 2rem 0}.counter-minus{border-radius:2rem 0 0 2rem}.counter-value{font-family:technology;font-size:1.2rem;border-left:1px solid rgb(81,81,81);border-right:1px solid rgb(81,81,81);font-weight:bolder}.loader{width:50px;aspect-ratio:1;display:flex;border:4px solid #0000;border-radius:50%;border-color:#ccc #0000;animation:l16 1s infinite linear}.loader:before,.loader:after{content:"";grid-area:1/1;margin:2px;border:inherit;border-radius:50%}.loader:before{border-color:#9c9c9c #0000;animation:inherit;animation-duration:.5s;animation-direction:reverse}.loader:after{margin:8px}@keyframes l16{to{transform:rotate(1turn)}}.toggle{background-color:#000;opacity:.7;display:flex;justify-content:center;align-items:center;min-height:50%;height:1.4rem;width:1.6rem;box-sizing:border-box}.toggle,button{border-radius:4px;cursor:pointer}.toggle button{background:none;border:none;outline:none}.toggle:active{animation:bounce .3s ease-in-out}.toggle-checked{opacity:1;border-width:.15rem;border-style:solid;background-color:#000}.toggle-label{font-weight:300;color:#eee}#footer{margin-top:.5rem;color:#7e7e7e;font-weight:100;visibility:hidden;display:flex;align-items:center}#footer #separator{margin-left:1rem}#footer-content{display:flex;align-items:flex-end;height:fit-content}#footer img{max-width:100%;max-height:100%}#footer a{all:unset;cursor:pointer}#template1,#template2{margin-left:1rem;background:#d5d4d3;font-family:inherit;padding:.4em 1em;display:flex;font-weight:800;font-size:.9rem;border:3px solid black;border-radius:.4em;box-shadow:.1em .1em;cursor:pointer}#template1:hover,#template2:hover{transform:translate(-.05em,-.05em);box-shadow:.15em .15em}#template1:hover,#template2:active{transform:translate(.05em,.05em);box-shadow:.05em .05em}@font-face{font-family:technology;src:url(../fonts/technology/Technology.ttf);font-weight:400;font-style:normal}@font-face{font-family:technology;src:url(../fonts/technology/Technology-BoldItalic.ttf);font-weight:400;font-style:italic,oblique}@font-face{font-family:technology;src:url(../fonts/technology/Technology-Bold.ttf);font-weight:700;font-style:normal}@font-face{font-family:technology;src:url(../fonts/technology/Technology-Italic.ttf);font-weight:700;font-style:italic,oblique}@font-face{font-family:conthrax;src:url(../fonts/conthrax/conthrax.otf);font-weight:400;font-style:normal}@font-face{font-family:basico;src:url(../fonts/basico/basico.ttf);font-weight:400;font-style:normal}:root{--controls-height: 8%;--main-content-height: calc(100% - (var(--controls-height)));--sequencer-primary-color: rgb(22, 22, 22);--hover-gray: rgb(203, 203, 203);--app-background: radial-gradient( circle at center, rgb(66, 68, 75) 40%, rgb(48, 50, 55) 60%, rgb(20, 20, 21) 100% )}body{height:100vh;position:absolute;inset:0;min-height:600px}#app{font-family:basico,Verdana,sans-serif;font-size:1rem;height:100%;background:var(--app-background);width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}#play{height:3.3rem;width:3.3rem;font-size:1.2rem;padding:.4rem;display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:1rem}#sequencer{border:solid .2rem var(--sequencer-primary-color);visibility:hidden;display:none;justify-items:center;align-items:center;padding-top:.5rem;background-color:var(--sequencer-primary-color);min-height:600px;height:90vh;width:135vh;border-radius:10px}#steppers-loading{background-color:#d6d6d637;position:absolute;z-index:10;height:100%;width:100%;display:flex;justify-content:center;align-items:center}#controls{font-size:.9rem;color:#fff;box-sizing:border-box;display:flex;justify-content:space-around;align-items:center;padding-bottom:.4rem;border-bottom:rgb(230,230,230) 4px solid;width:100%;height:var(--controls-height);padding:0rem 1rem}#reset-btn{border:.3rem solid white;border-radius:.2rem;height:3.3rem;box-sizing:border-box;width:3.3rem;display:flex;justify-content:center;align-items:center;cursor:pointer;font-size:.8rem}#reset-btn:hover{background-color:#fff;color:#000}#app-title span{font-family:conthrax;font-size:2.2rem}#volume-group,#tpc-group{flex:5}#volume-group input,#tpc-group input{flex:2}.control-group{display:flex;height:5rem;align-items:center;margin-right:1rem}.control-group input{margin:0 2rem}#tempo{margin-left:2rem}#main{display:flex;flex-wrap:wrap;flex-direction:row;height:var(--main-content-height);width:inherit;border:none}#top-panel{box-sizing:border-box;height:50%;display:flex;align-items:center;justify-content:center;width:inherit;border-color:#000}#bottom-panel{width:100%;display:flex;border:none;height:50%;box-sizing:border-box;padding:.6rem .6rem 1rem}@keyframes bounce{0%{transform:scale(1)}25%{transform:scale(1.06)}50%{transform:scale(.94)}to{transform:scale(1)}}