:root{--color-main: #130721;--color-accent: #9747FF;--color-accent-light: #9747ff33;font-family:Poppins,system-ui,Avenir,Helvetica,Arial,sans-serif;color:#fff;line-height:1.5;text-transform:uppercase;font-weight:700;color-scheme:light dark;background:var(--color-main);background-size:400% 400%;animation:gradient 15s ease infinite;height:100vh;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}@font-face{font-family:Poppins;src:url(/assets/Poppins-Bold-7219547e.ttf);font-weight:700}@font-face{font-family:Poppins;src:url(/assets/Poppins-Medium-fcff04f4.ttf);font-weight:500}@font-face{font-family:Poppins;src:url(/assets/Poppins-Light-da1b33b8.ttf);font-weight:300}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}*{font-family:Poppins,system-ui,Avenir,Helvetica,Arial,sans-serif;letter-spacing:2px;-webkit-tap-highlight-color:rgba(255,255,255,0)}body{margin:0;display:flex;place-items:center;align-items:center;min-width:320px;min-height:100vh;justify-content:center;flex-direction:column;height:100%;width:100%}h1{font-size:20px;text-transform:uppercase;letter-spacing:5px;margin:0}h2{font-weight:500;font-size:14px}p{margin-block-start:0em;margin-block-end:0em;font-weight:300;text-transform:none;font-size:12px}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}button{background:rgba(255,255,255,.1);color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;border-radius:10px;border:none}button.sm{padding:10px;font-size:12px}button.text:not(.sm){padding:15px}button.text.icon{padding-right:50px;position:relative}button.sm.text.icon{padding-right:40px}button.sm.text.icon:after{height:7px;width:7px;border-radius:8px;right:5px}button.icon:after{content:"";position:absolute;height:10px;width:10px;top:50%;transform:translateY(-50%);right:8px;padding:10px;border-radius:10px;background:rgba(255,255,255,.1);background-position:center;background-size:50%;background-repeat:no-repeat}button.icon:not(.text){height:37.5px;width:37.5px;position:relative;display:flex;justify-content:center;align-items:center}button.icon:not(.text):after{background-color:#fff0;right:auto}button.icon.play:after{background-image:url(/assets/icon-play-1862846b.svg);background-position:55% 50%}button.icon.sound:after{background-image:url(/assets/icon-sound-3fda4963.svg)}button.icon.user:after{background-image:url(/assets/icon-user-3cf1eaa1.svg)}button.icon.trash:after{background-image:url(/assets/icon-trash-4ed909f2.svg)}button.icon.back:after{background-image:url(/assets/icon-back-423b636d.svg);background-size:auto}#app{height:100vh;width:100vw;display:flex;flex-direction:column}#header{padding:20px 20px 0;width:100%;box-sizing:border-box;display:flex;justify-content:space-between}#header .btn-wrapper{display:flex}#header .btn-wrapper .sound{margin-right:10px}.content{width:100%;flex:1;flex-direction:column;text-align:center;padding:20px 10vw;box-sizing:border-box;display:flex;justify-content:center;gap:15px;align-items:center}.content.track{max-height:600px}.content.synth,.content.strings{justify-content:space-evenly}.content.synth .grid,.content.strings .grid{justify-content:space-between}.grid{display:flex;gap:15px;max-width:1200px;width:100%}.strings .grid{position:relative;align-items:center}.strings .grid:after{content:"";height:2px;width:100vw;background-color:#fff;position:absolute;top:calc(50% - 1px);left:-10vw;opacity:.5;z-index:1}.cell{background:var(--color-accent-light);width:12.5%;height:12vh;border-radius:10px;position:relative}.single .cell{height:40vh}.synth .cell{height:18px;width:18px;border-radius:30px;position:relative}.synth .cell:before{content:"";position:absolute;top:0;left:0;height:100%;width:0vw;opacity:0;background:var(--color-accent);border-radius:20px;transition:.4s}.strings .cell{z-index:2;height:40px;width:40px;border-radius:40px}.strings .grid .cell:nth-child(even){height:30px;width:30px}.cell:after{content:"";position:absolute;height:100%;width:100%;padding:3px;border-radius:15px;top:50%;left:50%;transform:translate(-50%,-50%);border:2px solid var(--color-accent);opacity:0;transition:.2s}.strings .cell:after{border-radius:40px}.cell.activeCell:after{opacity:1}.cell.selected{background:var(--color-accent)}.synth .cell.selected:before{width:13vw;opacity:1}#board{width:100%;height:100%;display:flex;flex-wrap:wrap}#footer{display:none;width:100%;padding:0 20px 20px;box-sizing:border-box;font-size:11px;letter-spacing:1px}.content.sequencer[data-v-290a14f8]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:0;gap:0;padding:20px 7vw}h1[data-v-290a14f8]{font-size:16px}#sequencer[data-v-290a14f8]{width:80vw;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:15px;margin:20px 0 15px}.track[data-v-290a14f8]{display:flex;flex-direction:column;justify-content:space-between;align-items:center;background:var(--color-accent);border-radius:10px;padding:7px;box-shadow:var(--color-accent) 0 0 8px;height:50vh;max-height:250px}.track.locked[data-v-290a14f8]{background:rgba(255,255,255,.2);box-shadow:none;height:45vh;width:75px}.track .icon-wrapper[data-v-290a14f8]{display:flex;flex:1;width:100%}.track .icon-wrapper img[data-v-290a14f8]{width:60px;margin:40% auto 0}.track.free .icon-wrapper img[data-v-290a14f8]{margin-top:60%}.track span[data-v-290a14f8]{font-size:12px;padding:10px 0 20px}.track.locked button[data-v-290a14f8]{background:none;font-size:0;width:0;height:0}.track.locked button[data-v-290a14f8]:after{right:0;top:-50%;left:50%;transform:translate(-50%)}.session-count-wrapper[data-v-290a14f8]{display:flex;align-items:center}.session-count-wrapper>div[data-v-290a14f8]{background:var(--color-accent-light);padding:7px;border-radius:10px;display:flex;align-items:center;margin:0 15px;height:20px}.session-count-wrapper span[data-v-290a14f8]{font-size:13px;background:var(--color-accent);border-radius:30px;height:20px;width:20px;display:flex;justify-content:center;align-items:center;text-align:center;line-height:.8;margin-right:7px}.content[data-v-7e953d21]{position:relative;height:100vh;width:100vw;z-index:1}.animation[data-v-7e953d21]{position:absolute;top:0;left:0;height:100vh;width:100vw;background:var(--color-main);display:flex;background-image:url(/assets/mashroom-bg-6d2e3283.png);background-size:cover;overflow:hidden;animation:main-7e953d21 4s forwards;z-index:1}@keyframes main-7e953d21{90%{opacity:1}95%{opacity:0}99%{opacity:0;z-index:1}to{opacity:0;z-index:-1}}.animation .logo[data-v-7e953d21],.animation .mask[data-v-7e953d21]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1)}.animation .logo[data-v-7e953d21]{width:60vw;height:auto;animation:logo-7e953d21 3s forwards}.animation .mask[data-v-7e953d21]{width:150vw;animation:mask-7e953d21 8s forwards}@keyframes logo-7e953d21{0%{width:60vw}to{width:30vw}}@keyframes mask-7e953d21{0%{width:150vw}to{width:16000vw}}.intro[data-v-7e953d21]{position:absolute;top:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;width:100vw;background:var(--color-main);padding:15vh 5vw 10vh 5vh;box-sizing:border-box}.text-wrapper[data-v-7e953d21]{padding:0 15vw;width:100%;box-sizing:border-box}.text-wrapper h1[data-v-7e953d21]{margin-bottom:25px}.text-wrapper p[data-v-7e953d21]{margin-bottom:50px}.color-container[data-v-7e953d21]{display:flex;justify-content:center;flex-wrap:wrap;gap:15px;width:100%;margin:20px 0 30px}.color-item[data-v-7e953d21]{height:20px;width:20px;border-radius:50px;position:relative}.color-item[data-v-7e953d21]:before{content:"";position:absolute;height:10px;width:10px;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50px}.color-item.selected[data-v-7e953d21]:before{border:2px solid white;height:25px;width:25px}#color-0[data-v-7e953d21]{background:#9747FF}#color-1[data-v-7e953d21]{background:#FFC700}#color-2[data-v-7e953d21]{background:#FF7B00}#color-3[data-v-7e953d21]{background:#FF4768}#color-4[data-v-7e953d21]{background:#0038FF}#color-5[data-v-7e953d21]{background:#00C7F2}button.play[data-v-0ee9e26e]{margin-right:10px}.title[data-v-9f41067a]{display:flex;align-items:center;gap:15px}