@import"https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap";:root{--disabledBG: #888888;--hoverBG: #D6D6D6;--defaultBG: #1D1D1B;--accent: #FF4C15}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--defaultBG);font-family:Azeret Mono,sans-serif;overflow:hidden;accent-color:var(--accent)}#content{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr min-content;gap:20px 20px;grid-template-areas:"logo logo scene debug debug degug" "modules modules modules preview preview preview" "modules modules modules preview preview preview" "modules modules modules preview preview preview" "modules modules modules controls controls controls";min-width:0;position:absolute;width:100%;height:100%;padding:20px}h1{font-weight:700}p{font-weight:100;font-size:1rem}p>a{color:var(--accent)}.debug{grid-area:debug;display:none}.debug input[type=number]{color:#000}.debug h1{color:#fff}#logo{grid-area:logo;-webkit-user-select:none;user-select:none}#logo p{color:#fff;font-size:1.2rem}#logo img{width:70%}input{color:#000}ul input{color:#fff;margin-left:.5vw}input[type=color]{margin-left:.5rem;border:none}input[type=color]:hover{cursor:pointer}input[type=color]:disabled{opacity:.5;cursor:revert}.canvasContainer{grid-area:preview;position:relative}canvas{position:absolute}.canvasContainerFS{width:100vw;height:100vh}.modulContainer{background-color:var(--hoverBG);padding:1rem;display:flex;flex-direction:row;justify-content:flex-start;width:45vw;border-radius:1rem;margin-bottom:20px}.modulContainer input{background-color:var(--defaultBG);color:#fff;width:100%}.modulContainer input[type=color]{width:revert}.bar{position:relative;width:1.5vw;height:.7vh;background-color:var(--defaultBG);opacity:30%;margin:.1rem}.iconContainer{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;width:2vw}.modulIcon{display:flex;align-items:center;justify-content:center;width:15%;cursor:grab}.modulOptions{width:64%}.modulSettings{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,1fr);grid-auto-rows:minmax(1rem,auto);width:26vw;gap:5px 40px;margin-top:1rem}.option{display:flex;justify-content:space-between;font-family:inherit;align-items:center}.option>select{margin-left:.5vw}.delIcon{display:flex;justify-content:space-between;align-items:center;width:17%;margin-left:1.5rem;margin-right:1.5rem}select{background-color:var(--defaultBG);color:#fff;font-family:inherit;padding:.2rem;font-size:.8rem;border:0;width:100%;cursor:pointer}select:disabled{cursor:revert}ul label{color:#000;font-weight:400;text-align:right;white-space:nowrap}.colorContainer{display:flex;flex-wrap:nowrap;align-items:center}.debug label,.debug input{color:#fff}#modules{height:100%;width:fit-content;display:flex;flex-wrap:wrap;overflow-x:hidden;overflow-y:scroll;align-content:baseline;grid-area:modules;position:relative}.dragging{opacity:.7;transform:rotate(-2deg)}.fsBG{position:absolute;width:100vw;height:100vh;background-color:#000;padding:0;margin:0}[alt=Fullscreen]{fill:#fff;position:absolute;width:2rem;height:2rem;bottom:4rem;right:4rem}.canvasContainer>[alt=Fullscreen]{bottom:1rem;right:1rem}[alt=Fullscreen]:hover{cursor:pointer;transform:scale(1.1);transition:transform .1s}.canvasContainer>svg{display:inline;z-index:100}.fsControls{position:absolute;bottom:0;width:100%;height:auto;background:linear-gradient(180deg,#2a7b9b00,#000);z-index:100;display:none;padding:2rem}.fsControls>button{margin:1rem}.play{width:5rem;height:5rem;border-radius:50%;background-color:var(--accent);border:0;display:flex;justify-content:center;align-items:center;cursor:pointer;grid-area:play}[alt=Play]{fill:#fff;position:relative;height:30%;filter:drop-shadow(3px 4px 2px rgba(0,0,0,.25))}.play:hover{background-color:var(--hoverBG);transition:background-color .1s}.play:hover [alt=Play]{fill:var(--accent);transition:fill .1s}.play:disabled{background-color:var(--disabledBG);transition:background-color .1s;cursor:revert}.play:disabled [alt=Play]{fill:var(--hoverBG);transition:fill .1s}.pause{width:5rem;height:5rem;border-radius:50%;background-color:var(--accent);border:0;display:flex;justify-content:center;align-items:center;grid-area:pause}[alt=Pause]{fill:#fff;position:relative;height:30%;filter:drop-shadow(3px 4px 2px rgba(0,0,0,.25))}.pause:hover{background-color:var(--hoverBG);transition:background-color .1s;cursor:pointer}.pause:hover [alt=Pause]{fill:var(--accent);transition:fill .1s}.pause:disabled{background-color:var(--disabledBG);transition:background-color .1s;cursor:revert}.pause:disabled [alt=Pause]{fill:var(--hoverBG);height:30%;filter:drop-shadow(3px 4px 2px rgba(0,0,0,.25))}[name=volume]{-webkit-appearance:none;background:var(--disabledBG);height:5px;border-radius:50px;background-image:linear-gradient(var(--accent),var(--accent));background-size:100% 100%;background-repeat:no-repeat;grid-area:volume}.disappear{opacity:0;transition:opacity .3s}.controls{grid-area:controls;border:2px solid white;border-radius:1rem;display:flex;justify-content:space-around;align-items:center;color:#fff}#input{display:none}label[for=input]{border:1px solid var(--accent);padding:6px 12px;cursor:pointer;color:#fff;grid-area:input;width:75%}[alt="Remove Module"]{position:relative;width:35%;fill:var(--defaultBG);opacity:30%;cursor:pointer;margin-left:2rem}[alt="Remove Module"]:hover{opacity:100%;transition:opacity .2s}[alt="Remove Module"]:hover>path:nth-child(2){transform-origin:right 90%;transform:rotate(9deg);transition:transform .2s}.disableToggle{display:none}.disableToggleLabel{width:3rem;height:1.5rem;background-color:var(--defaultBG);border-radius:1rem;align-content:center;transition:background-color .2s;cursor:pointer;position:relative}.disableToggleLabel:before{display:block;width:1.2rem;height:1.2rem;margin-left:.1rem;border-radius:50%;background-color:#fff;content:"";transition:margin-left .2s ease-in-out;box-shadow:0 0 5px #aaa}.disableToggleLabel:has(input:checked){background-color:var(--accent);transition:background-color .2s}.disableToggleLabel:has(input:checked):before{margin-left:1.65rem;transition:margin-left .2s ease-in-out}.disabled{background-color:var(--disabledBG)}.canvasDisabled{display:none}.disabled label,.disabled h1{opacity:.5}select:disabled{opacity:.5}input:disabled{opacity:.5}option:checked{background-color:#fff;color:#000}#factor{display:block}#tutorial{position:absolute;width:100%;height:100%;padding:20px;border:white dashed;margin:0;top:0;left:0;background-color:#1d1d1b80;backdrop-filter:blur(1rem);-webkit-backdrop-filter:blur(1rem);z-index:101;display:none;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr 1fr;gap:20px 20px}#tutorial p{font-size:1.5vw;margin-top:1rem}#tutorial h1{display:block;font-size:3vw}.tutPanel{display:none;align-items:center;flex-wrap:wrap;color:#fff;width:fit-content}#tutorial>.tutFirstPanel,.tutEighthPanel{width:50%;grid-column:3 / span 4;grid-row:2 / span 2}#tutorial>.tutSecondPanel,.tutFourthPanel,.tutFifthPanel,.tutSixthPanel,.tutSeventhPanel{grid-column:4 / span 4;grid-row:2 / span 2}#tutorial>.tutThirdPanel{width:50%;grid-column:2 / span 4;grid-row:2 / span 2}.buttonContainer{width:100%;margin-top:2rem}.continue{border-style:none;background-color:var(--accent);color:#fff;border-radius:1rem;width:fit-content;padding:1rem;font-family:inherit;font-size:1rem;cursor:pointer;margin:1rem .5rem 1rem 0}.continue:hover{background-color:var(--hoverBG);color:var(--accent);transition:.1s}.skip{border-style:none;border-radius:1rem;background-color:var(--defaultBG);color:#fff;width:fit-content;padding:1rem;font-family:inherit;font-size:1rem;cursor:pointer}.skip:hover{background-color:var(--hoverBG);color:var(--defaultBG);transition:.1s}.tutFocus{position:relative;z-index:102}.highlight{color:var(--accent)}.audioControls{display:grid;grid-template-columns:min-content min-content min-content min-content;grid-template-rows:min-content min-content;gap:20px 20px;grid-template-areas:"play pause volume volume" "back forward value value";justify-items:center;align-items:center;padding:1rem}.micControls{color:#fff;display:flex;justify-content:space-around;align-items:center;padding:1rem;width:-moz-available;width:-webkit-fill-available}#micInToggle{display:none}[alt=MicIcon]{fill:#fff;width:3rem;height:3rem;cursor:pointer}[alt=MicIcon]:hover g:nth-child(3)>path{d:path("M329.7,10.9c-1.4,0-2.8-0.5-3.9-1.6c-2.1-2.1-2.1-5.6,0-7.7l0,0c2.1-2.1,5.6-2.1,7.7,0c2.1,2.1,2.1,5.6,0,7.7l0,0C332.5,10.4,331.1,10.9,329.7,10.9z");opacity:0;transition:d .2s,opacity .5s}.micActive{fill:var(--accent)}.micPending{d:path("M329.7,10.9c-1.4,0-2.8-0.5-3.9-1.6c-2.1-2.1-2.1-5.6,0-7.7l0,0c2.1-2.1,5.6-2.1,7.7,0c2.1,2.1,2.1,5.6,0,7.7l0,0C332.5,10.4,331.1,10.9,329.7,10.9z");opacity:0}.micControls label{display:block;height:100%;width:fit-content}.dropzone{position:absolute;width:100%;height:100%;padding:20px;border:white dashed;margin:0;top:0;left:0;background-color:#1d1d1b80;backdrop-filter:blur(1rem);-webkit-backdrop-filter:blur(1rem);z-index:200;display:none;color:#fff;align-items:center;justify-content:center;flex-wrap:wrap}.dropzone h1{font-size:3vw}.dropzone>div>div{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;width:100%;margin:2rem}[alt=uploadIcon]{width:10%;fill:var(--accent)}[alt=Rewind],[alt=Skip]{fill:#fff;width:50%;cursor:pointer}[alt=Rewind]{grid-area:back}[alt=Skip]{grid-area:forward}[alt=Rewind]:hover,[alt=Skip]:hover{fill:var(--accent);transition:fill .2s}[alt=Rewind]:disabled,[alt=Skip]:disabled{fill:var(--disabledBG)}.audioControls>div{grid-area:value}#saveScenes{display:grid;grid-template-rows:min-content min-content;grid-template-columns:max-content 1fr;grid-template-areas:"label button" "select button";height:100%;justify-content:space-evenly;grid-area:scene;color:#fff;gap:0 20px;align-content:end;align-items:center}#saveScenes>button{width:fit-content;color:#fff;accent-color:var(--accent);background:var(--accent);border:none;padding:1rem;font-family:Azeret Mono,sans-serif;border-radius:1rem;cursor:pointer;grid-area:button}#saveScenes>button:hover{color:var(--accent);background:var(--hoverBG);transition:.1s}#saveScenes select{width:100%;grid-area:select}#saveScenes label{grid-area:label}@media screen and (max-width: 1600px){.modulSettings{display:block}.option{margin-top:1rem}.delIcon{height:100%;width:50%;flex-wrap:wrap;justify-content:space-evenly;align-items:center;margin-right:0;margin-left:2%;padding:1%}.delIcon>svg{margin-left:1rem;margin-right:1rem}.controls{width:100%}.modulIcon{width:50%;height:100%}.iconContainer{width:40%}}@media screen and (max-width: 1400px){.micControls{flex-wrap:wrap}[for=input]{margin-top:1rem}}@media screen and (max-width: 1200px){.controls{flex-wrap:wrap}.divide{display:none}.audioControls{width:auto;grid-template-rows:auto auto;grid-template-columns:auto auto auto auto}.micControls{border-top:solid white}}