.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)}}@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}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}*{-webkit-user-select:none;-ms-user-select:none;user-select:none}:root{--controls-height: 4rem;--main-content-height: calc(100% - (var(--controls-height)));--sequencer-primary-color: rgb(7, 7, 7);--hover-gray: rgb(203, 203, 203);--app-background: rgb(16, 16, 16)}body{height:100vh;position:absolute;inset:0;min-height:600px}#app{font-family:basico,Verdana,sans-serif;font-size:1rem;height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;background-image:url(../pictures/camo.svg)}#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;top:1.4rem;display:none;position:absolute;justify-items:center;align-items:center;padding-top:.5rem;margin-top:4rem;background-color:var(--sequencer-primary-color);height:calc(100vh - 9rem);width:135vh;border-radius:10px}@media(max-width:1024px){#app{visibility:hidden;display:none}}#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}#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}#main{display:flex;flex-wrap:wrap;flex-direction:row;height:var(--main-content-height);width:inherit;border:none}rythm-panel{width:100%;height:50%}viewer-panel{width:100%;height:50%}#content{height:100%;width:100%;display:flex;flex-direction:row;padding:1rem .8rem;box-sizing:border-box}#steppers{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%}stepper-controls{height:12.5%;min-width:30rem}stepper-element{height:12.5%;width:100%}.stepper{width:100%;height:92%;box-sizing:content-box;display:flex}.step{border-radius:4px;background-color:#696969;margin-right:4px;flex:1;cursor:pointer;opacity:.6;box-sizing:border-box}.step.beat[data-selected=off]{background-color:#b0b0b0}.step[data-selected=on]{opacity:.6}:root{--ring-width: 14%;--ring-space: 20%;--color-0: #0099ff;--color-1: #b655ff;--color-2: #ffff00;--color-3: #99ff00;--color-4: #ff7fff;--color-5: #ff4500;--color-6: #00ffff;--color-7: #ff0066 }.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)}[data-ticking=on]{background-color:#f3ef94}.step[data-ticking=on][data-selected=on]{animation:bounce .25s ease-in-out;opacity:1}.step.beat[data-ticking=on]{background-color:#aee524}#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)}}.starfield-container{position:fixed;inset:0;z-index:0;overflow:hidden}.starfield-container svg{width:100%;height:100%;display:block}.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 80% 80% at 50% 50%,transparent 30%,rgba(22,22,22,.4) 70%,rgba(22,22,22,.85) 100%)}.ambient-glow{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 50% 50% at 50% 55%,rgba(255,140,50,.015) 0%,transparent 70%)}