body,html{--mdc-theme-primary:#6796d8;--mdc-theme-on-primary:#fff;height:100%;margin:20px;font-family:helvetica,arial,sans-serif}.app-container{background-color:var(--db-canvas,#fae);border-radius:50px;flex-direction:column;justify-content:space-between;align-items:center;gap:20px;padding:20px;display:inline-block;position:relative}.stable-container{position:relative}.top-controls{justify-content:space-around;align-items:center;gap:25px;display:flex}.bottom-controls{justify-content:space-around;align-items:center;gap:25px;margin-top:15px;margin-bottom:15px;display:flex}.knob1-container,.knob2-container,.knob3-container,.knob4-container{flex-direction:column;align-items:center;gap:5px;display:flex}.metro-feedback-container,.playback-container{flex-direction:column;align-items:center;gap:15px;display:flex}.piano-roll{background-color:#fff;justify-content:center;align-items:center;width:100%;height:300px;display:flex}#pianoRollContainer{border:1px solid #ccc;width:600px;height:300px}.knob{background-color:#eeeeeefe;border-radius:50%;width:50px;height:50px}.knob-value,.recIndicator{color:#817f7fe3;margin-top:5px;font-family:Roboto,monospace;font-size:14px;font-weight:400}.control-btn img{width:40px;height:40px;display:inline-block;position:relative}.light-base{vertical-align:middle;border-radius:50%;width:20px;height:20px;transition:background-color 10ms;display:inline-block}.light-off{background-color:#f987dccb}.light-on{background-color:#ff00bf}.recording{color:red}:root{--switch-scale:.5}.switch{width:calc(60px*var(--switch-scale));height:calc(34px*var(--switch-scale));margin-bottom:17px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:#ccc;transition:all .4s;position:absolute;inset:0}.slider:before{content:"";height:calc(26px*var(--switch-scale));width:calc(26px*var(--switch-scale));left:calc(4px*var(--switch-scale));bottom:calc(4px*var(--switch-scale));background-color:#fff;transition:all .4s;position:absolute}input:checked+.slider{background-color:#21d227}input:focus+.slider{box-shadow:0 0 1px #21d227}input:checked+.slider:before{-webkit-transform:translateX(calc(26px*var(--switch-scale)));-ms-transform:translateX(calc(26px*var(--switch-scale)));transform:translateX(calc(26px*var(--switch-scale)))}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.arrayList-container,.reset-button{width:fit-content;max-height:150px;margin-bottom:1px;display:none;overflow-y:scroll}.midiOutputList{color:#817f7f;font-family:Roboto,monospace;font-size:14px;font-weight:400;display:none}#notificationContainer{z-index:1000;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.error_notification{color:#fff;background-color:#e736f4bd;border-radius:15px;max-width:270px;max-height:200px;margin-bottom:20px;padding:14px;font-family:Roboto,monospace}#helpToggle{width:1.1em;height:1.1em}#helpToggleText{color:#5d5d5de1;align-items:bottom;cursor:pointer;font-family:Roboto,monospace;font-size:21px;top:20px;right:20px}.notification{color:#fff;z-index:100;background-color:#e736f4bd;border:1px solid #ccc;border-radius:5px;width:250px;padding:10px;font-family:Roboto,monospace;display:none;position:absolute;box-shadow:0 2px 4px #0003}.notification_tapping{color:#fff;text-align:center;z-index:100;background-color:#4caf50;border-radius:5px;padding:10px 20px;font-family:Roboto,monospace;display:none;position:absolute;bottom:200px;left:50%;transform:translate(-50%)}.help-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.help-content{color:#fff;background:#e736f48a;border-radius:15px;width:300px;max-height:80%;padding:20px;font-family:Roboto,monospace;position:absolute;overflow:auto;box-shadow:0 2px 4px #0003}.help-nav{background:#e497eaae;border-radius:15px;justify-content:center;gap:5px;padding:10px 0;display:flex;position:sticky;bottom:0}.help-button{font-family:Roboto,monospace}.help-dots-container{justify-content:center;padding:10px;display:flex}.help-dot{cursor:pointer;background-color:#bbb;border-radius:50%;width:10px;height:10px;margin:0 5px;display:inline-block}.help-dot.active{background-color:#717171}#invisibleAnchor{display:none}#invisibleAnchor_pRoll{visibility:hidden;width:0;height:0}@keyframes blink{0%,to{background-color:#0000}50%{background-color:#ff0}}.light-base.blink{animation:.2s linear blink}.theme-switch-container{position:absolute;top:10px;right:10px}.theme-switch{width:calc(60px*var(--switch-scale));height:calc(34px*var(--switch-scale));display:inline-block;position:absolute;top:30px;right:-50px}.theme-switch input{opacity:0;width:0;height:0}#themeToggleText{color:#5d5d5de1;align-items:bottom;cursor:pointer;font-family:Roboto,monospace;font-size:17px;display:inline-block;position:absolute;top:-1px;right:-55px}.themeSlider{cursor:pointer;background-color:#ccc;transition:all .4s;position:absolute;inset:0}.themeSlider:before{content:"";height:calc(26px*var(--switch-scale));width:calc(26px*var(--switch-scale));left:calc(4px*var(--switch-scale));bottom:calc(4px*var(--switch-scale));background-color:#fff;transition:all .4s;position:absolute}input:checked+.themeSlider{background-color:#00000024}input:checked+.themeSlider:before{-webkit-transform:translateX(calc(26px*var(--switch-scale)));-ms-transform:translateX(calc(26px*var(--switch-scale)));transform:translateX(calc(26px*var(--switch-scale)))}.themeSlider.round{border-radius:34px}.themeSlider.round:before{border-radius:50%}.dark-theme{--background-color:#333;--text-color:#fff;--db-canvas:#b39ddb}body{background-color:var(--background-color,#fff);color:var(--text-color,#000);transition:background-color .3s,color .3s}.visual-feedback{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.parenthesis-shape{opacity:0;border:5px solid #2c6afd;width:40px;height:150px;transition:all .5s;position:absolute}#parenthesisShapeLeft{border-right:none;border-radius:75px 0 0 75px;top:50%;left:20px;transform:translateY(-50%)}#parenthesisShapeRight{border-left:none;border-radius:0 75px 75px 0;top:50%;right:20px;transform:translateY(-50%)}#session-control-container{justify-content:left;align-items:center;gap:10px;margin:20px;display:flex}#sessionName,#sessionProgress{font-size:16px;font-weight:700}.left-buttons{flex-direction:column;align-items:center;gap:10px;display:flex}button{cursor:pointer;padding:10px;font-size:14px}.button-3{appearance:none;box-sizing:border-box;color:#fff;cursor:pointer;text-align:center;-webkit-user-select:none;user-select:none;touch-action:manipulation;vertical-align:middle;white-space:nowrap;background-color:#2ea44f;border:1px solid #1b1f2326;border-radius:7px;padding:6px 16px;font-family:-apple-system,system-ui,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;font-size:14px;font-weight:600;line-height:20px;text-decoration:none;display:inline-block;position:relative;box-shadow:0 1px #1b1f231a}.button-3:focus:not(:focus-visible):not(.focus-visible){box-shadow:none;outline:none}.button-3:hover{background-color:#2c974b}.button-3:focus{outline:none;box-shadow:0 0 0 3px #2ea44f66}.button-3:disabled{color:#fffc;cursor:default;background-color:#94d3a2;border-color:#1b1f231a}.button-3:active{background-color:#298e46;box-shadow:inset 0 1px #14462033}.button-46{box-sizing:border-box;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;background-color:#f0f0f042;border:1px solid #dfdfdf;border-radius:16px;justify-content:center;align-items:center;width:100%;max-width:100%;padding:14px 22px;font-family:Inter,sans-serif;font-size:18px;line-height:28px;text-decoration:none;transition:all .2s;display:flex}.button-46:active,.button-46:hover{outline:0}.button-46:hover{background-color:#fff;border-color:#00000030}@media (width>=768px){.button-46{min-width:200px;padding:14px 16px;font-size:20px}}#testBtn{justify-content:center;align-items:right;border-radius:50px;padding:6px 16px;font-size:14px;font-weight:600;line-height:20px;left:95px}#cleanCanvasBtn{justify-content:center;align-items:right;border-radius:50px;padding:6px 16px;font-size:12px;font-weight:600;line-height:20px;left:95px}#conductorIDDisplay,#participantIDDisplay{font-size:13px;font-weight:700}.popup{z-index:1;background-color:#00000080;width:100%;height:100%;display:block;position:fixed;top:0;left:0}.popup-content{text-align:center;background-color:#fff;border:1px solid #888;width:80%;max-width:600px;max-height:80%;margin:15% auto;padding:20px;overflow-y:auto}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;cursor:pointer;text-decoration:none}.hiddenCanvasContainer{border:2px solid #ccc0;margin-top:10px;padding:10px;display:none}#toggleCanvas{margin:10px}#toggleCanvasTop{margin-top:30px;margin-bottom:25px}.overlay{color:#fff;text-align:center;z-index:1000;opacity:0;pointer-events:none;background:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.5em;transition:opacity .3s;display:flex;position:fixed;top:0;left:0}.overlay.show{opacity:1;pointer-events:all}.hiddenPass{display:none}#overlayPass{z-index:1;background-color:#000000e6;width:100%;height:100%;display:block;position:fixed;top:0;left:0}#contentPass{z-index:2;color:#fff;position:relative}#draggableContainer{pointer-events:none;z-index:100;cursor:default;width:640px;height:480px;position:absolute;top:760px;left:50px}#dragHandle{cursor:grab;pointer-events:auto;z-index:110;background:#e736f473;width:5%;height:30px;position:absolute;top:0;left:0}#webcam,#output_canvas{pointer-events:none;width:100%;position:absolute;top:0;left:0}
/*# sourceMappingURL=index.9b06fba8.css.map */