diff --git a/src/website/css/synthesizer_ui/voice_selector.css b/src/website/css/synthesizer_ui/voice_selector.css
index 629e6849..a5ec18f1 100644
--- a/src/website/css/synthesizer_ui/voice_selector.css
+++ b/src/website/css/synthesizer_ui/voice_selector.css
@@ -6,6 +6,8 @@
     font-weight: bold;
     min-width: 8em;
     text-align-last: center;
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 .voice_selector_light{
@@ -26,28 +28,6 @@
     color: #444;
 }
 
-.voice_selector .selector_option{
-    padding: 5px;
-    background-color: #111;
-    text-align: left;
-    text-shadow: none !important;
-}
-
-.voice_selector optgroup{
-    font-weight: bold;
-    font-style: normal;
-    background-color: #141414;
-    text-align: left;
-    text-shadow: none !important;
-}
-
-.voice_selector .selector_option:hover
-{
-    background-color: #222;
-    cursor: pointer;
-
-}
-
 .selector_options:hover{
     display: block;
 }
diff --git a/src/website/minified/style.min.css b/src/website/minified/style.min.css
index d12063cb..032799f0 100644
--- a/src/website/minified/style.min.css
+++ b/src/website/minified/style.min.css
@@ -1 +1 @@
-.settings_slider_wrapper{display:flex;align-items:center;width:100%;justify-content:center;margin-top:.5rem!important;position:relative;--track-height: .8rem;--thumb-size: 1.5rem;--active-brightness: .75;--slider-border-thickness: 1px}.settings_visual_wrapper{--visual-width: 0%;display:flex;position:relative;margin:0 1rem 1rem 0;flex-grow:1;height:var(--track-height);transition:all .1s;cursor:e-resize;background:var(--track-color);border:solid var(--slider-border-thickness) var(--track-border-color);border-radius:var(--track-height)}.settings_visual_wrapper:has(.settings_slider:active){filter:brightness(var(--active-brightness))}.settings_slider{cursor:e-resize;width:100%;opacity:0;-webkit-appearance:none;top:calc((var(--thumb-size) / 4) * -1);height:var(--thumb-size);position:relative}.settings_slider:hover{filter:brightness(1.2)}.settings_slider:focus{outline:none}.settings_slider+span{margin-bottom:1rem}.settings_slider+span{min-width:5em;text-align:center}.settings_slider_progress{width:calc(var(--visual-width) + 2 * var(--slider-border-thickness));position:absolute;background:var(--primary-color);border:solid var(--slider-border-thickness) var(--border-color);height:calc(100% + 2 * var(--slider-border-thickness));border-radius:var(--track-height);top:calc(-1 * var(--slider-border-thickness));left:calc(-1 * var(--slider-border-thickness))}.settings_slider_thumb{border:solid var(--slider-border-thickness) var(--track-border-color);background:var(--track-color);height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;position:absolute;top:-.4rem;left:calc(var(--visual-width) - var(--thumb-size) / 2)}.settings_slider_wrapper:hover .settings_slider_thumb{border-color:var(--primary-color)}.settings_slider_transition .settings_slider_thumb,.settings_slider_transition .settings_slider_progress{transition:all .2s ease}.seamless_button{font-size:larger;background:transparent;margin:auto;border:none;-webkit-user-select:none;user-select:none}.settings_button{display:flex;align-items:center;justify-content:center}.settings_button span{text-align:end;font-size:larger}.seamless_button:hover{cursor:pointer;text-shadow:0 0 5px white}.gear{transition:all .3s ease;padding:5px;align-content:center;align-items:center;justify-content:center;display:flex;height:0}.settings_button:hover .gear{transform:rotate(45deg)}.settings_groups_parent{display:flex;flex-wrap:wrap;justify-content:space-evenly}.settings_group{border-radius:var(--settings-border-radius);border:solid #333 1px;margin:1em;padding:1em;background:var(--top-buttons-color);transition:.2s}.settings_group:hover{filter:brightness(1.2);box-shadow:0 0 5px var(--top-buttons-color-end)}.settings_group label,.settings_group p{margin-top:1em;display:block}.switch_label{display:flex;justify-content:space-between;margin-top:1em}.switch_label label{margin-right:1em;font-size:large}.switch input{display:none}.switch{--track-height: 1.6rem;--track-width: 2.2rem;--thumb-size: 1.5rem;--track-radius: .3em;position:relative;display:inline-block;width:var(--track-width);height:var(--track-height)}.switch_slider{position:absolute;cursor:pointer;inset:50% 0 0;background-color:var(--track-color);border:solid var(--track-border-color) 1px;transition:.2s;border-radius:var(--track-radius);transform:translateY(-50%)}.switch_slider:before{position:absolute;content:"";height:var(--thumb-size);width:var(--thumb-size);left:calc(var(--thumb-size) / -4);top:50%;transform:translateY(-50%);background-color:var(--track-color);transition:.2s var(--bouncy-transition),border .1s;border-radius:50%;border:solid var(--track-border-color) 1px;box-shadow:0 0 .125rem #0003}.switch_slider:hover:before{border:solid var(--border-color) 1px;filter:brightness(1.2)}input:checked+.switch_slider{background-color:var(--primary-color);border:var(--border-color) 1px solid}input:checked+.switch_slider:before{transform:translate(calc(var(--track-width) - var(--thumb-size) * .66),-50%)}.switch:active .switch_slider:before{transform:translate(calc(var(--track-width) - var(--thumb-size) * 1.2),-50%)}.switch:active input:checked+.switch_slider:before{transform:translate(calc(var(--track-width) - var(--thumb-size) * .95),-50%)}.settings_menu{--settings-border-radius: 1rem;position:absolute;top:100%;right:0;min-width:30%;max-width:100%;min-height:100%;z-index:256;transform:scaleX(0);background:var(--top-color);transition:transform .2s ease;scroll-behavior:smooth;overflow-y:auto;display:none;border-radius:0 0 var(--settings-border-radius) var(--settings-border-radius)}.settings_menu_show{display:block!important;transform:scaleX(1)!important}.settings_menu *{-webkit-user-select:none;user-select:none}.settings_menu select{background:transparent;border:solid 1px transparent;font-size:larger;border-radius:var(--settings-border-radius);padding:.5rem}.settings_menu select option{background:#000;color:#fff;border:none}.settings_menu select:hover{cursor:pointer;text-shadow:0 0 5px white;border:1px solid var(--top-buttons-color-end);background:var(--top-buttons-color)}#keyboard .key{-webkit-user-select:none;user-select:none;touch-action:none;flex:1;transition:transform .1s ease,border-radius .5s ease;border-radius:0 0 var(--key-border-radius) var(--key-border-radius);position:relative;transform-origin:center top;--pressed-transform-skew: .0007;--pressed-transform: matrix3d( 1,0,0, 0,0,1, 0,var(--pressed-transform-skew),0, 0,1,0, 0,0,0, 1);cursor:default;--flat-half-width: 1.4;--flat-half-translate: 18%;--sharp-transform: scale(1, .7);--flat-between-transform: scale(1.9, 1);--flat-left-transform: scale(var(--flat-half-width), 1) translateX(calc(var(--flat-half-translate) * -1));--flat-right-transform: scale(var(--flat-half-width), 1) translateX(var(--flat-half-translate))}#keyboard.sideways .key{border-radius:var(--key-border-radius) 0 0 var(--key-border-radius)!important;transform-origin:right center!important;--pressed-transform: matrix3d( 1,0,0, calc(var(--pressed-transform-skew) * -1),0,1, 0,0,0, 0,1,0, 0,0,0 ,1) !important;--sharp-transform: scale(.7, 1) !important;--flat-between-transform: scale(1, 1.9) !important;--flat-left-transform: scale(1, var(--flat-half-width)) translateY(calc(var(--flat-half-translate) * -1)) !important;--flat-right-transform: scale(1, var(--flat-half-width)) translateY(var(--flat-half-translate)) !important}#keyboard .flat_key{background:linear-gradient(90deg,#bbb,#fff);z-index:1}#keyboard .flat_dark_key{background:linear-gradient(100deg,#111,#000)}#keyboard .sharp_key{transform:var(--sharp-transform);z-index:10;background:linear-gradient(140deg,#222,#000)}#keyboard .flat_key.between_sharps{transform:var(--flat-between-transform)}#keyboard .flat_key.left_sharp{transform:var(--flat-left-transform)}#keyboard .flat_key.right_sharp{transform:var(--flat-right-transform)}.sharp_key.pressed{transform:var(--sharp-transform) var(--pressed-transform)!important}.flat_key.between_sharps.pressed{transform:var(--flat-between-transform) var(--pressed-transform)!important}.flat_key.left_sharp.pressed{transform:var(--flat-left-transform) var(--pressed-transform)!important}.flat_key.right_sharp.pressed{transform:var(--flat-right-transform) var(--pressed-transform)!important}#keyboard{-webkit-user-select:none;user-select:none;transition:var(--music-mode-transition) transform;display:flex;flex-wrap:nowrap;align-items:stretch;--current-min-height: 7;min-height:calc(var(--current-min-height) * 1vw);background:#000;width:100%;touch-action:none;transform-origin:bottom center;--key-border-radius: .4vmin}#keyboard.mode_transform{transform:translateY(250%)}#keyboard.sideways{min-height:unset;height:100%;width:unset;min-width:calc(var(--current-min-height) * 1vh);flex-direction:column}#sequencer_controls{width:80%;position:relative;margin:auto auto 2px;--progress-bar-height: 2rem;--sequi-border-radius: var(--primary-border-radius)}#sequencer_controls #note_progress{border-radius:var(--progress-bar-height);background:linear-gradient(185deg,#306,var(--primary-color));height:100%;transition:width .1s linear;position:absolute;left:0}#sequencer_controls .note_progress_light{filter:brightness(3)}#sequencer_controls #note_time{position:relative;font-size:calc(var(--progress-bar-height) * .8);line-height:var(--progress-bar-height);text-align:center;color:var(--font-color);margin:.5rem;width:100%}#sequencer_controls #note_time:hover{cursor:pointer}#sequencer_controls .control_buttons{position:relative;display:inline-block;transition:all .1s ease}#sequencer_controls .control_buttons:active{transform:scale(var(--active-scale))}#sequencer_controls .control_buttons:hover{cursor:pointer}#sequencer_controls #note_progress_background{border-radius:var(--progress-bar-height);background:linear-gradient(90deg,#454545,#343434);height:var(--progress-bar-height);position:absolute;width:100%;overflow:hidden}#sequencer_controls .note_progress_background_light{background:linear-gradient(90deg,#ddd,#bbb)!important}#sequencer_controls .lyrics{position:fixed;top:0;right:0;width:30em;min-width:30%;max-width:100%;height:75%;z-index:256;display:flex;flex-direction:column;transform:scaleX(0);background:var(--top-color);transition:all .2s ease;visibility:hidden;border-radius:var(--sequi-border-radius)}.lyrics_title_wrapper{background:transparent;top:0;border-radius:var(--sequi-border-radius)}.lyrics_selector{width:100%;border:none;font-size:1.3rem;padding:.5em;background:transparent}.lyrics_selector option{background:#000}.lyrics_show{transform:scaleX(1)!important;visibility:visible!important}.lyrics_text{scroll-behavior:smooth;overflow-y:auto;max-height:80%;margin-left:3rem;margin-right:3rem;flex:2}.lyrics_text_gray{opacity:.5;font-style:italic;font-size:1rem;font-weight:700}.lyrics_text_highlight{font-weight:700;font-style:italic;color:var(--font-color);font-size:1rem}.lyrics details{overflow:scroll}.lyrics details summary{position:fixed;width:100%;text-align:center}.lyrics details div{margin-top:2rem;line-height:2rem}.lyrics details pre,.lyrics details i{display:inline}#player_info{width:100%;display:none;flex:1;align-items:center;justify-content:center;transform:translate(100%);transition:var(--music-mode-transition) transform}#player_info_background_image{width:100%;height:100%;position:absolute;background-position:center;background-repeat:no-repeat;background-size:cover;filter:blur(1rem);--bg-image: "undefined";background-image:var(--bg-image);z-index:-100;left:0}.player_info_note_icon img{max-width:100%;border-radius:1rem;width:20rem}.player_info_wrapper{display:flex;border-radius:1rem;align-items:center;max-width:90%;backdrop-filter:brightness(.3) blur(50px);flex-wrap:wrap;justify-content:center}.player_info_wrapper.light_mode{backdrop-filter:brightness(1.8) blur(50px)!important}.player_info_note_icon{margin:1rem}#player_info_detail{white-space:preserve}.player_info_detail_element{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between}.player_info_detail_element *{display:inline-block}.player_info_detail_element b{margin-right:1ch}.player_info_detail_element.hidden{display:none}.player_info_details_wrapper{max-width:100%;padding:1rem;display:flex;flex-direction:column}.marquee{overflow:hidden;max-width:30ch;white-space:nowrap}.marquee span{white-space:nowrap;padding-left:100%;animation:15s linear infinite marquee}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-100%)}}.player_info_wrapper *{text-align:center}.player_info_show{transform:translate(0)!important}.voice_meter{cursor:not-allowed;border-width:1px;border-style:solid;border-color:var(--border-color);min-width:7em;overflow:hidden}.voice_meter.editable{cursor:e-resize}.voice_meter .voice_meter_bar{position:relative;display:block;height:100%;margin-top:auto;background-color:var(--primary-color);border-radius:var(--notification-border-radius)}.voice_meter_light_color{filter:brightness(1.4)}.voice_meter_bar_smooth{transition:width ease-in-out .1s}.voice_meter .voice_meter_text{position:absolute;z-index:1;height:var(--voice-meter-height);line-height:var(--voice-meter-height);top:0;width:100%;text-align:center;text-shadow:1px 1px 2px #000;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.voice_meter .voice_meter_text_light{color:#000}.locked_meter{color:red}.voice_selector{border:#777 1px solid;line-height:var(--voice-meter-height);background-color:var(--synthui-background);font-size:1em;font-weight:700;min-width:8em;text-align-last:center}.voice_selector_light{border:#111 1px solid;background:linear-gradient(170deg,#bbb,#fff);color:#000}.voice_selector:hover{cursor:pointer;background:#111;color:#fff;text-shadow:0 0 5px white}.voice_selector_light:hover{background:#fff;color:#444}.voice_selector .selector_option{padding:5px;background-color:#111;text-align:left;text-shadow:none!important}.voice_selector optgroup{font-weight:700;font-style:normal;background-color:#141414;text-align:left;text-shadow:none!important}.voice_selector .selector_option:hover{background-color:#222;cursor:pointer}.selector_options:hover{display:block}.locked_selector{color:red}.voice_reset{min-width:var(--voice-meter-height);display:flex;justify-content:center;align-items:center;border:solid 1px #333;background:var(--top-color);padding:var(--primary-border-radius);border-radius:var(--primary-border-radius);margin:.1rem;transition:min-width 50ms ease;cursor:pointer}.voice_reset:active{filter:brightness(.8);transform:scale(var(--active-scale))}.voice_reset:hover svg{transform:scale(1.1) rotate(5deg)}.voice_reset_light *{color:#000}.voice_selector_wrapper{position:fixed;z-index:calc(var(--top-index) - 20);backdrop-filter:brightness(.9) blur(2px);width:100%;height:100%;margin:0;padding:0;top:0;display:flex;justify-content:center;align-items:center}.voice_selector_window{padding:1rem;border-radius:var(--primary-border-radius);background:var(--top-color);color:var(--font-color);display:flex;flex-direction:column;max-width:90%;max-height:90%}.voice_selector_search_wrapper{display:flex;margin:1rem}.voice_selector_window input{border:solid 1px #333;font-size:1rem;margin:.1rem;padding:var(--primary-border-radius);border-radius:var(--primary-border-radius);background:var(--top-color);color:var(--font-color);flex:1}.voice_selector_table_wrapper{max-height:70vh;overflow-y:scroll;overflow-x:hidden;padding:1rem}.voice_selector_table{width:100%;font-size:1.1rem;padding:.5rem;border-collapse:collapse}.voice_selector_table th{filter:none!important;text-align:start;line-height:2rem}.voice_selector_preset_name{text-align:end;display:block}.voice_selector_table tr{transition:all 50ms ease;border-radius:var(--primary-border-radius)}.voice_selector_table tr:has(td:hover){background:var(--primary-color);cursor:pointer}.voice_selector_selected{background:var(--border-color)!important}.synthui_button{background:#000;border:1px #333 solid;margin:var(--synthui-margin);border-radius:var(--synthui-border-radius);font-size:1em;min-height:var(--voice-meter-height);white-space:nowrap;color:var(--font-color);flex:1;display:flex;align-items:center;justify-content:center;transition:all .1s ease}.synthui_button:hover{cursor:pointer;background:#111;color:#fff;text-shadow:0 0 5px white}.synthui_button:active{filter:brightness(.9);transform:scale(var(--active-scale))}.synthui_button_light{border-radius:var(--synthui-border-radius);background:#fff;border:1px #ccc solid;margin:var(--synthui-margin);font-size:1em;min-height:var(--voice-meter-height);white-space:nowrap;color:#333;flex:1;text-shadow:1px 1px 2px #000;display:flex;align-items:center;justify-content:center;transition:all .1s ease}.synthui_button_light:hover{cursor:pointer;color:#666;text-shadow:0 0 5px #666}.synthui_button_light:active{filter:brightness(.9);transform:scale(var(--active-scale))}#synthetizer_controls{--voice-meter-height: 2.5em;--synthui-background: black;--synthui-border-radius: var(--primary-border-radius)}#synthetizer_controls *{user-select:none;-webkit-user-select:none;--synthui-margin: .2em}.wrapper{height:80%;padding:2%;display:flex;flex-wrap:wrap;justify-content:space-evenly}.controls_wrapper{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;margin:1em}.main_controller_element{margin-left:.5em;margin-right:.5em}.controller_element{position:relative;height:var(--voice-meter-height);flex:1;border-radius:var(--synthui-border-radius);margin:var(--synthui-margin)}.synthui_controller{left:0;display:none;position:absolute;background:var(--synthui-background);top:100%;border-radius:0 0 1em 1em;transform:scaleX(0);transition:transform .2s ease;width:100%;z-index:127;padding:.5em}.synthui_controller_light{background:linear-gradient(115deg,#c8c8c8,#fff,#c8c8c8)!important}.synthui_controller_show{transform:scaleX(1)!important}.channel_controller{display:flex;align-items:stretch;flex-wrap:wrap;transition:.2s ease}.channel_controller.no_voices{filter:brightness(.8)}.mute_button{flex:0;display:flex;justify-content:center;align-items:center;border:#777 1px solid;min-width:var(--voice-meter-height)}.mute_button_light *{color:#000}.mute_button svg{transition:transform .2s ease}.mute_button:active{filter:brightness(.8);transform:scale(var(--active-scale))}.mute_button:hover{cursor:pointer}.mute_button:hover svg{transform:scale(1.1) rotate(5deg)}.mute_button:hover path{filter:drop-shadow(0 0 1px currentColor)}.soundfont_mixer{top:100%;position:absolute;background:var(--top-color);padding:.5em;border-radius:0 0 1em 1em;width:50%;left:25%;margin:auto;min-width:fit-content}.soundfont_mixer_list{margin:1em;border-radius:.3em;min-height:4em}.soundfont_mixer .soundfont_entry{background:var(--top-buttons-color);margin:.2em;border-radius:var(--primary-border-radius);text-align:start;width:fit-content;display:flex;padding:.3em;justify-content:center}.soundfont_mixer .soundfont_entry_wrapper{display:flex;justify-content:space-between}.soundfont_mixer .soundfont_entry_button:hover{cursor:pointer}.soundfont_mixer .action_buttons_wrapper{display:flex;justify-content:space-between}.notification button,.notification_file_button{background:var(--top-color);padding:.5rem;border:solid 1px #333;margin:.5rem;cursor:pointer;border-radius:var(--notification-border-radius);font-size:var(--notification-font-size);min-width:fit-content;transition:transform .1s ease}.notification button:active,.notification_file_button:active{transform:scale(var(--active-scale))}.notification .green_button{color:green;border-color:green}.notification p{margin:1rem;font-size:var(--notification-font-size)}.notification label{font-size:var(--notification-font-size)}.notification_input_wrapper{display:flex;justify-content:space-between;align-items:center;margin:.5rem}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.notification input[type=number],.notification input[type=text]{display:block;background:var(--top-buttons-color);border:solid 1px #333;font-size:1em;padding:var(--notification-border-radius);border-radius:var(--notification-border-radius);width:5rem;-moz-appearance:textfield}.notification input[type=text]{width:auto!important}.notification_slider_wrapper{display:flex;justify-content:space-between;margin:.5rem}.notification_slider_wrapper label{margin-right:2rem}.notification_slider_wrapper .settings_visual_wrapper{margin:0!important}.notification_slider_wrapper .settings_slider_wrapper{width:auto!important}.notification .notification_progress_background{height:1rem;margin:1rem;background:var(--track-color);border:solid 1px var(--track-border-color);border-radius:1rem;box-sizing:content-box}.notification .notification_progress{height:100%;width:0;background:var(--primary-color);border:solid 1px var(--border-color);border-radius:1rem;top:-1px;left:-1px;position:relative;transition:.1s width ease;box-sizing:content-box}.notification_switch_wrapper{display:flex;justify-content:space-between;align-items:center;margin:.5rem}.notification_switch input{display:none}.notification_switch{--track-height: 1.6rem;--track-width: 2.2rem;--thumb-size: 1.5rem;--track-radius: .3em;position:relative;display:inline-block;width:var(--track-width);height:var(--track-height)}.notification_switch_slider{position:absolute;cursor:pointer;inset:50% 0 0;background-color:var(--track-color);border:solid var(--track-border-color) 1px;transition:.2s;border-radius:var(--track-radius);transform:translateY(-50%)}.notification_switch_slider:before{position:absolute;content:"";height:var(--thumb-size);width:var(--thumb-size);left:calc(var(--thumb-size) / -4);top:50%;transform:translateY(-50%);background-color:var(--track-color);transition:.2s var(--bouncy-transition),border .1s;border-radius:50%;border:solid var(--track-border-color) 1px;box-shadow:0 0 .125rem #0003}.notification_switch_slider:hover:before{border:solid var(--border-color) 1px;filter:brightness(1.2)}input:checked+.notification_switch_slider{background-color:var(--primary-color);border:var(--border-color) 1px solid}input:checked+.notification_switch_slider:before{transform:translate(calc(var(--track-width) - var(--thumb-size) * .66),-50%)}.notification_field{position:absolute;padding:0;width:100%;display:flex;margin:1rem 0 0;align-items:baseline;justify-content:center}.notification{--notification-border-radius: var(--primary-border-radius);--notification-font-size: 1.3rem;position:absolute;background:var(--top-color);color:var(--font-color);border:solid 1px #333;border-radius:var(--notification-border-radius);display:flex;justify-content:center;flex-direction:column;align-items:center;font-size:large;z-index:var(--top-index);left:50%;transform:translate(-50%,-5rem);transition:transform .5s ease,opacity .5s ease;opacity:0;animation-duration:.5s;animation-fill-mode:forwards;box-shadow:#333 0 0 10px;width:max-content;max-width:100%}.notification.drop{opacity:1;transform:translate(-50%)}.notification .top{width:100%;display:flex;justify-content:space-between;border-bottom:solid 1px #555;align-items:center}.notification h2{text-align:start;line-height:2rem;margin:1rem}.notification_content{margin:1rem;min-width:90%;display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center}.notification .close_btn{text-align:end;font-weight:bolder;font-size:2rem;margin-right:1rem}.notification .close_btn:hover{cursor:pointer}#note_canvas{width:100%;filter:saturate(1.23);flex:1;background-size:cover;min-height:0;z-index:1}#note_canvas.sideways{height:100%!important;width:unset!important;min-height:unset!important}#note_canvas.light_mode{background:linear-gradient(45deg,var(--top-buttons-color-start),var(--top-buttons-color-end))}.top_part{--top-part-border-radius: 1.5rem;position:relative;background:var(--top-color);border-radius:0 0 var(--top-part-border-radius) var(--top-part-border-radius);padding:3px;display:flex;flex-wrap:wrap;align-content:space-around;justify-content:space-around;align-items:center;z-index:50;transform-origin:top;transform:scaleY(1);transition:var(--hide-top-duration) ease}.top_part *{user-select:none;-webkit-user-select:none}.top_part_hidden{position:fixed;width:100%;transform:scaleY(0)}.top_part.settings_shown{border-radius:0 0 0 var(--top-part-border-radius)}.top_part.synthui_shown{border-radius:0}input[type=file]{display:none}#title{user-select:text;position:relative;z-index:1;margin:.2em auto;display:block;line-height:100%;font-weight:400;text-shadow:0 0 5px var(--font-color)}#progress_bar{background:#206;display:block;position:absolute;width:0;height:2.1em;border-radius:var(--primary-border-radius);margin-left:auto;margin-right:auto;margin-top:.4em;padding-top:5px;padding-bottom:5px;top:0;left:0;right:0;z-index:0;transition:width ease .5s}.midi_and_sf_controller{position:relative;display:flex;width:fit-content;margin:auto auto 5px;flex-wrap:wrap;justify-content:space-around}.midi_and_sf_controller label{padding:6px;border-radius:var(--primary-border-radius);cursor:pointer;background:var(--top-buttons-color);font-weight:bolder;margin:5px;display:flex;align-items:center;justify-content:center;transition:all .1s ease}.midi_and_sf_controller label:active{filter:brightness(.9);transform:scale(var(--active-scale))}#sf_selector option{background:#000;text-align:center}#sf_selector{display:block;border:none;font-size:1em;background:var(--top-buttons-color);text-align:center;margin:5px;padding:6px;border-radius:var(--primary-border-radius);font-weight:bolder}.show_top_button{background:var(--top-buttons-color);width:fit-content;padding:.1em 2em;border-radius:0 0 var(--primary-border-radius) var(--primary-border-radius);transition:all calc(var(--hide-top-duration) * 2) var(--bouncy-transition);transition-delay:calc(var(--hide-top-duration) / 2);transform-origin:top;margin:auto;display:none;opacity:0;position:absolute;z-index:100;left:0;right:0;cursor:pointer}.show_top_button:hover{filter:brightness(1.1);transform:scaleY(1.3)}.show_top_button.shown{opacity:1}#keyboard_canvas_wrapper{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;transition:var(--music-mode-transition) transform}#keyboard_canvas_wrapper.out_animation{transform:translate(-100%)}#keyboard_canvas_wrapper.upwards{flex-direction:column-reverse}#keyboard_canvas_wrapper.right_to_left{flex-direction:row}#keyboard_canvas_wrapper.left_to_right{flex-direction:row-reverse}*{--top-buttons-color-start: #222;--top-buttons-color-end: #333;--top-buttons-color: linear-gradient(201deg, var(--top-buttons-color-start), var(--top-buttons-color-end));--hide-top-duration: .2s;--font-color: #ccc;--top-index: 32767;--top-color-start: #101010;--top-color-end: #212121;--top-color: linear-gradient(31deg, var(--top-color-start), var(--top-color-end));--primary-border-radius: .5rem;--active-scale: .9;--bouncy-transition: cubic-bezier(.68,-.55,.27,1.55);--music-mode-transition: .5s ease;font-family:system-ui,Noto Sans,Open Sans,sans-serif;color:var(--font-color);text-align:center;margin:0;box-sizing:border-box}pre{font-family:monospace!important}html,body{height:100lvh;width:100%;background:#000;overflow-x:clip;scrollbar-width:thin}body.load{transition:background .2s}body.no_scroll,html.no_scroll{max-height:100%!important;height:100%!important;overflow:hidden!important}.spessasynth_main{display:flex;flex-direction:column;height:100%;--primary-color: #510087;--border-color: #6e00b7;--track-color: #333;--track-border-color: #444;--shadow-color: #000}.spessasynth_main.light_mode{--primary-color: #a93bff;--border-color: #510087;--track-color: #ccc;--track-border-color: #444;--shadow-color: #fff}a{text-decoration:none;color:#546fff}::-webkit-scrollbar{background-color:#000;width:.3em}::-webkit-scrollbar-thumb{background-color:#777;border-radius:50px}.bottom_part{margin-top:5px}button{-webkit-user-select:none;user-select:none}.hidden{display:none!important}.secret_video{position:absolute;width:100%;left:0;z-index:0}.drop_prompt{flex-direction:column;display:flex;justify-content:center;align-items:center;position:fixed;width:100%;height:100%;z-index:var(--top-index);background:#0009}.loading{flex-direction:column;display:flex;justify-content:center;align-items:center;position:fixed;width:100%;height:100%;z-index:var(--top-index);left:0;background:var(--top-color);transition:all 1s var(--bouncy-transition);cursor:wait}.loading .loading_icon{max-width:100%;max-height:100%;margin:1em;animation:spin 1s ease-in-out infinite}.loading.done{transform:translateY(-100%)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
+.settings_slider_wrapper{display:flex;align-items:center;width:100%;justify-content:center;margin-top:.5rem!important;position:relative;--track-height: .8rem;--thumb-size: 1.5rem;--active-brightness: .75;--slider-border-thickness: 1px}.settings_visual_wrapper{--visual-width: 0%;display:flex;position:relative;margin:0 1rem 1rem 0;flex-grow:1;height:var(--track-height);transition:all .1s;cursor:e-resize;background:var(--track-color);border:solid var(--slider-border-thickness) var(--track-border-color);border-radius:var(--track-height)}.settings_visual_wrapper:has(.settings_slider:active){filter:brightness(var(--active-brightness))}.settings_slider{cursor:e-resize;width:100%;opacity:0;-webkit-appearance:none;top:calc((var(--thumb-size) / 4) * -1);height:var(--thumb-size);position:relative}.settings_slider:hover{filter:brightness(1.2)}.settings_slider:focus{outline:none}.settings_slider+span{margin-bottom:1rem}.settings_slider+span{min-width:5em;text-align:center}.settings_slider_progress{width:calc(var(--visual-width) + 2 * var(--slider-border-thickness));position:absolute;background:var(--primary-color);border:solid var(--slider-border-thickness) var(--border-color);height:calc(100% + 2 * var(--slider-border-thickness));border-radius:var(--track-height);top:calc(-1 * var(--slider-border-thickness));left:calc(-1 * var(--slider-border-thickness))}.settings_slider_thumb{border:solid var(--slider-border-thickness) var(--track-border-color);background:var(--track-color);height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;position:absolute;top:-.4rem;left:calc(var(--visual-width) - var(--thumb-size) / 2)}.settings_slider_wrapper:hover .settings_slider_thumb{border-color:var(--primary-color)}.settings_slider_transition .settings_slider_thumb,.settings_slider_transition .settings_slider_progress{transition:all .2s ease}.seamless_button{font-size:larger;background:transparent;margin:auto;border:none;-webkit-user-select:none;user-select:none}.settings_button{display:flex;align-items:center;justify-content:center}.settings_button span{text-align:end;font-size:larger}.seamless_button:hover{cursor:pointer;text-shadow:0 0 5px white}.gear{transition:all .3s ease;padding:5px;align-content:center;align-items:center;justify-content:center;display:flex;height:0}.settings_button:hover .gear{transform:rotate(45deg)}.settings_groups_parent{display:flex;flex-wrap:wrap;justify-content:space-evenly}.settings_group{border-radius:var(--settings-border-radius);border:solid #333 1px;margin:1em;padding:1em;background:var(--top-buttons-color);transition:.2s}.settings_group:hover{filter:brightness(1.2);box-shadow:0 0 5px var(--top-buttons-color-end)}.settings_group label,.settings_group p{margin-top:1em;display:block}.switch_label{display:flex;justify-content:space-between;margin-top:1em}.switch_label label{margin-right:1em;font-size:large}.switch input{display:none}.switch{--track-height: 1.6rem;--track-width: 2.2rem;--thumb-size: 1.5rem;--track-radius: .3em;position:relative;display:inline-block;width:var(--track-width);height:var(--track-height)}.switch_slider{position:absolute;cursor:pointer;inset:50% 0 0;background-color:var(--track-color);border:solid var(--track-border-color) 1px;transition:.2s;border-radius:var(--track-radius);transform:translateY(-50%)}.switch_slider:before{position:absolute;content:"";height:var(--thumb-size);width:var(--thumb-size);left:calc(var(--thumb-size) / -4);top:50%;transform:translateY(-50%);background-color:var(--track-color);transition:.2s var(--bouncy-transition),border .1s;border-radius:50%;border:solid var(--track-border-color) 1px;box-shadow:0 0 .125rem #0003}.switch_slider:hover:before{border:solid var(--border-color) 1px;filter:brightness(1.2)}input:checked+.switch_slider{background-color:var(--primary-color);border:var(--border-color) 1px solid}input:checked+.switch_slider:before{transform:translate(calc(var(--track-width) - var(--thumb-size) * .66),-50%)}.switch:active .switch_slider:before{transform:translate(calc(var(--track-width) - var(--thumb-size) * 1.2),-50%)}.switch:active input:checked+.switch_slider:before{transform:translate(calc(var(--track-width) - var(--thumb-size) * .95),-50%)}.settings_menu{--settings-border-radius: 1rem;position:absolute;top:100%;right:0;min-width:30%;max-width:100%;min-height:100%;z-index:256;transform:scaleX(0);background:var(--top-color);transition:transform .2s ease;scroll-behavior:smooth;overflow-y:auto;display:none;border-radius:0 0 var(--settings-border-radius) var(--settings-border-radius)}.settings_menu_show{display:block!important;transform:scaleX(1)!important}.settings_menu *{-webkit-user-select:none;user-select:none}.settings_menu select{background:transparent;border:solid 1px transparent;font-size:larger;border-radius:var(--settings-border-radius);padding:.5rem}.settings_menu select option{background:#000;color:#fff;border:none}.settings_menu select:hover{cursor:pointer;text-shadow:0 0 5px white;border:1px solid var(--top-buttons-color-end);background:var(--top-buttons-color)}#keyboard .key{-webkit-user-select:none;user-select:none;touch-action:none;flex:1;transition:transform .1s ease,border-radius .5s ease;border-radius:0 0 var(--key-border-radius) var(--key-border-radius);position:relative;transform-origin:center top;--pressed-transform-skew: .0007;--pressed-transform: matrix3d( 1,0,0, 0,0,1, 0,var(--pressed-transform-skew),0, 0,1,0, 0,0,0, 1);cursor:default;--flat-half-width: 1.4;--flat-half-translate: 18%;--sharp-transform: scale(1, .7);--flat-between-transform: scale(1.9, 1);--flat-left-transform: scale(var(--flat-half-width), 1) translateX(calc(var(--flat-half-translate) * -1));--flat-right-transform: scale(var(--flat-half-width), 1) translateX(var(--flat-half-translate))}#keyboard.sideways .key{border-radius:var(--key-border-radius) 0 0 var(--key-border-radius)!important;transform-origin:right center!important;--pressed-transform: matrix3d( 1,0,0, calc(var(--pressed-transform-skew) * -1),0,1, 0,0,0, 0,1,0, 0,0,0 ,1) !important;--sharp-transform: scale(.7, 1) !important;--flat-between-transform: scale(1, 1.9) !important;--flat-left-transform: scale(1, var(--flat-half-width)) translateY(calc(var(--flat-half-translate) * -1)) !important;--flat-right-transform: scale(1, var(--flat-half-width)) translateY(var(--flat-half-translate)) !important}#keyboard .flat_key{background:linear-gradient(90deg,#bbb,#fff);z-index:1}#keyboard .flat_dark_key{background:linear-gradient(100deg,#111,#000)}#keyboard .sharp_key{transform:var(--sharp-transform);z-index:10;background:linear-gradient(140deg,#222,#000)}#keyboard .flat_key.between_sharps{transform:var(--flat-between-transform)}#keyboard .flat_key.left_sharp{transform:var(--flat-left-transform)}#keyboard .flat_key.right_sharp{transform:var(--flat-right-transform)}.sharp_key.pressed{transform:var(--sharp-transform) var(--pressed-transform)!important}.flat_key.between_sharps.pressed{transform:var(--flat-between-transform) var(--pressed-transform)!important}.flat_key.left_sharp.pressed{transform:var(--flat-left-transform) var(--pressed-transform)!important}.flat_key.right_sharp.pressed{transform:var(--flat-right-transform) var(--pressed-transform)!important}#keyboard{-webkit-user-select:none;user-select:none;transition:var(--music-mode-transition) transform;display:flex;flex-wrap:nowrap;align-items:stretch;--current-min-height: 7;min-height:calc(var(--current-min-height) * 1vw);background:#000;width:100%;touch-action:none;transform-origin:bottom center;--key-border-radius: .4vmin}#keyboard.mode_transform{transform:translateY(250%)}#keyboard.sideways{min-height:unset;height:100%;width:unset;min-width:calc(var(--current-min-height) * 1vh);flex-direction:column}#sequencer_controls{width:80%;position:relative;margin:auto auto 2px;--progress-bar-height: 2rem;--sequi-border-radius: var(--primary-border-radius)}#sequencer_controls #note_progress{border-radius:var(--progress-bar-height);background:linear-gradient(185deg,#306,var(--primary-color));height:100%;transition:width .1s linear;position:absolute;left:0}#sequencer_controls .note_progress_light{filter:brightness(3)}#sequencer_controls #note_time{position:relative;font-size:calc(var(--progress-bar-height) * .8);line-height:var(--progress-bar-height);text-align:center;color:var(--font-color);margin:.5rem;width:100%}#sequencer_controls #note_time:hover{cursor:pointer}#sequencer_controls .control_buttons{position:relative;display:inline-block;transition:all .1s ease}#sequencer_controls .control_buttons:active{transform:scale(var(--active-scale))}#sequencer_controls .control_buttons:hover{cursor:pointer}#sequencer_controls #note_progress_background{border-radius:var(--progress-bar-height);background:linear-gradient(90deg,#454545,#343434);height:var(--progress-bar-height);position:absolute;width:100%;overflow:hidden}#sequencer_controls .note_progress_background_light{background:linear-gradient(90deg,#ddd,#bbb)!important}#sequencer_controls .lyrics{position:fixed;top:0;right:0;width:30em;min-width:30%;max-width:100%;height:75%;z-index:256;display:flex;flex-direction:column;transform:scaleX(0);background:var(--top-color);transition:all .2s ease;visibility:hidden;border-radius:var(--sequi-border-radius)}.lyrics_title_wrapper{background:transparent;top:0;border-radius:var(--sequi-border-radius)}.lyrics_selector{width:100%;border:none;font-size:1.3rem;padding:.5em;background:transparent}.lyrics_selector option{background:#000}.lyrics_show{transform:scaleX(1)!important;visibility:visible!important}.lyrics_text{scroll-behavior:smooth;overflow-y:auto;max-height:80%;margin-left:3rem;margin-right:3rem;flex:2}.lyrics_text_gray{opacity:.5;font-style:italic;font-size:1rem;font-weight:700}.lyrics_text_highlight{font-weight:700;font-style:italic;color:var(--font-color);font-size:1rem}.lyrics details{overflow:scroll}.lyrics details summary{position:fixed;width:100%;text-align:center}.lyrics details div{margin-top:2rem;line-height:2rem}.lyrics details pre,.lyrics details i{display:inline}#player_info{width:100%;display:none;flex:1;align-items:center;justify-content:center;transform:translate(100%);transition:var(--music-mode-transition) transform}#player_info_background_image{width:100%;height:100%;position:absolute;background-position:center;background-repeat:no-repeat;background-size:cover;filter:blur(1rem);--bg-image: "undefined";background-image:var(--bg-image);z-index:-100;left:0}.player_info_note_icon img{max-width:100%;border-radius:1rem;width:20rem}.player_info_wrapper{display:flex;border-radius:1rem;align-items:center;max-width:90%;backdrop-filter:brightness(.3) blur(50px);flex-wrap:wrap;justify-content:center}.player_info_wrapper.light_mode{backdrop-filter:brightness(1.8) blur(50px)!important}.player_info_note_icon{margin:1rem}#player_info_detail{white-space:preserve}.player_info_detail_element{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between}.player_info_detail_element *{display:inline-block}.player_info_detail_element b{margin-right:1ch}.player_info_detail_element.hidden{display:none}.player_info_details_wrapper{max-width:100%;padding:1rem;display:flex;flex-direction:column}.marquee{overflow:hidden;max-width:30ch;white-space:nowrap}.marquee span{white-space:nowrap;padding-left:100%;animation:15s linear infinite marquee}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-100%)}}.player_info_wrapper *{text-align:center}.player_info_show{transform:translate(0)!important}.voice_meter{cursor:not-allowed;border-width:1px;border-style:solid;border-color:var(--border-color);min-width:7em;overflow:hidden}.voice_meter.editable{cursor:e-resize}.voice_meter .voice_meter_bar{position:relative;display:block;height:100%;margin-top:auto;background-color:var(--primary-color);border-radius:var(--notification-border-radius)}.voice_meter_light_color{filter:brightness(1.4)}.voice_meter_bar_smooth{transition:width ease-in-out .1s}.voice_meter .voice_meter_text{position:absolute;z-index:1;height:var(--voice-meter-height);line-height:var(--voice-meter-height);top:0;width:100%;text-align:center;text-shadow:1px 1px 2px #000;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.voice_meter .voice_meter_text_light{color:#000}.locked_meter{color:red}.voice_selector{border:#777 1px solid;line-height:var(--voice-meter-height);background-color:var(--synthui-background);font-size:1em;font-weight:700;min-width:8em;text-align-last:center;white-space:nowrap;overflow:hidden}.voice_selector_light{border:#111 1px solid;background:linear-gradient(170deg,#bbb,#fff);color:#000}.voice_selector:hover{cursor:pointer;background:#111;color:#fff;text-shadow:0 0 5px white}.voice_selector_light:hover{background:#fff;color:#444}.selector_options:hover{display:block}.locked_selector{color:red}.voice_reset{min-width:var(--voice-meter-height);display:flex;justify-content:center;align-items:center;border:solid 1px #333;background:var(--top-color);padding:var(--primary-border-radius);border-radius:var(--primary-border-radius);margin:.1rem;transition:min-width 50ms ease;cursor:pointer}.voice_reset:active{filter:brightness(.8);transform:scale(var(--active-scale))}.voice_reset:hover svg{transform:scale(1.1) rotate(5deg)}.voice_reset_light *{color:#000}.voice_selector_wrapper{position:fixed;z-index:calc(var(--top-index) - 20);backdrop-filter:brightness(.9) blur(2px);width:100%;height:100%;margin:0;padding:0;top:0;display:flex;justify-content:center;align-items:center}.voice_selector_window{padding:1rem;border-radius:var(--primary-border-radius);background:var(--top-color);color:var(--font-color);display:flex;flex-direction:column;max-width:90%;max-height:90%}.voice_selector_search_wrapper{display:flex;margin:1rem}.voice_selector_window input{border:solid 1px #333;font-size:1rem;margin:.1rem;padding:var(--primary-border-radius);border-radius:var(--primary-border-radius);background:var(--top-color);color:var(--font-color);flex:1}.voice_selector_table_wrapper{max-height:70vh;overflow-y:scroll;overflow-x:hidden;padding:1rem}.voice_selector_table{width:100%;font-size:1.1rem;padding:.5rem;border-collapse:collapse}.voice_selector_table th{filter:none!important;text-align:start;line-height:2rem}.voice_selector_preset_name{text-align:end;display:block}.voice_selector_table tr{transition:all 50ms ease;border-radius:var(--primary-border-radius)}.voice_selector_table tr:has(td:hover){background:var(--primary-color);cursor:pointer}.voice_selector_selected{background:var(--border-color)!important}.synthui_button{background:#000;border:1px #333 solid;margin:var(--synthui-margin);border-radius:var(--synthui-border-radius);font-size:1em;min-height:var(--voice-meter-height);white-space:nowrap;color:var(--font-color);flex:1;display:flex;align-items:center;justify-content:center;transition:all .1s ease}.synthui_button:hover{cursor:pointer;background:#111;color:#fff;text-shadow:0 0 5px white}.synthui_button:active{filter:brightness(.9);transform:scale(var(--active-scale))}.synthui_button_light{border-radius:var(--synthui-border-radius);background:#fff;border:1px #ccc solid;margin:var(--synthui-margin);font-size:1em;min-height:var(--voice-meter-height);white-space:nowrap;color:#333;flex:1;text-shadow:1px 1px 2px #000;display:flex;align-items:center;justify-content:center;transition:all .1s ease}.synthui_button_light:hover{cursor:pointer;color:#666;text-shadow:0 0 5px #666}.synthui_button_light:active{filter:brightness(.9);transform:scale(var(--active-scale))}#synthetizer_controls{--voice-meter-height: 2.5em;--synthui-background: black;--synthui-border-radius: var(--primary-border-radius)}#synthetizer_controls *{user-select:none;-webkit-user-select:none;--synthui-margin: .2em}.wrapper{height:80%;padding:2%;display:flex;flex-wrap:wrap;justify-content:space-evenly}.controls_wrapper{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;margin:1em}.main_controller_element{margin-left:.5em;margin-right:.5em}.controller_element{position:relative;height:var(--voice-meter-height);flex:1;border-radius:var(--synthui-border-radius);margin:var(--synthui-margin)}.synthui_controller{left:0;display:none;position:absolute;background:var(--synthui-background);top:100%;border-radius:0 0 1em 1em;transform:scaleX(0);transition:transform .2s ease;width:100%;z-index:127;padding:.5em}.synthui_controller_light{background:linear-gradient(115deg,#c8c8c8,#fff,#c8c8c8)!important}.synthui_controller_show{transform:scaleX(1)!important}.channel_controller{display:flex;align-items:stretch;flex-wrap:wrap;transition:.2s ease}.channel_controller.no_voices{filter:brightness(.8)}.mute_button{flex:0;display:flex;justify-content:center;align-items:center;border:#777 1px solid;min-width:var(--voice-meter-height)}.mute_button_light *{color:#000}.mute_button svg{transition:transform .2s ease}.mute_button:active{filter:brightness(.8);transform:scale(var(--active-scale))}.mute_button:hover{cursor:pointer}.mute_button:hover svg{transform:scale(1.1) rotate(5deg)}.mute_button:hover path{filter:drop-shadow(0 0 1px currentColor)}.soundfont_mixer{top:100%;position:absolute;background:var(--top-color);padding:.5em;border-radius:0 0 1em 1em;width:50%;left:25%;margin:auto;min-width:fit-content}.soundfont_mixer_list{margin:1em;border-radius:.3em;min-height:4em}.soundfont_mixer .soundfont_entry{background:var(--top-buttons-color);margin:.2em;border-radius:var(--primary-border-radius);text-align:start;width:fit-content;display:flex;padding:.3em;justify-content:center}.soundfont_mixer .soundfont_entry_wrapper{display:flex;justify-content:space-between}.soundfont_mixer .soundfont_entry_button:hover{cursor:pointer}.soundfont_mixer .action_buttons_wrapper{display:flex;justify-content:space-between}.notification button,.notification_file_button{background:var(--top-color);padding:.5rem;border:solid 1px #333;margin:.5rem;cursor:pointer;border-radius:var(--notification-border-radius);font-size:var(--notification-font-size);min-width:fit-content;transition:transform .1s ease}.notification button:active,.notification_file_button:active{transform:scale(var(--active-scale))}.notification .green_button{color:green;border-color:green}.notification p{margin:1rem;font-size:var(--notification-font-size)}.notification label{font-size:var(--notification-font-size)}.notification_input_wrapper{display:flex;justify-content:space-between;align-items:center;margin:.5rem}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.notification input[type=number],.notification input[type=text]{display:block;background:var(--top-buttons-color);border:solid 1px #333;font-size:1em;padding:var(--notification-border-radius);border-radius:var(--notification-border-radius);width:5rem;-moz-appearance:textfield}.notification input[type=text]{width:auto!important}.notification_slider_wrapper{display:flex;justify-content:space-between;margin:.5rem}.notification_slider_wrapper label{margin-right:2rem}.notification_slider_wrapper .settings_visual_wrapper{margin:0!important}.notification_slider_wrapper .settings_slider_wrapper{width:auto!important}.notification .notification_progress_background{height:1rem;margin:1rem;background:var(--track-color);border:solid 1px var(--track-border-color);border-radius:1rem;box-sizing:content-box}.notification .notification_progress{height:100%;width:0;background:var(--primary-color);border:solid 1px var(--border-color);border-radius:1rem;top:-1px;left:-1px;position:relative;transition:.1s width ease;box-sizing:content-box}.notification_switch_wrapper{display:flex;justify-content:space-between;align-items:center;margin:.5rem}.notification_switch input{display:none}.notification_switch{--track-height: 1.6rem;--track-width: 2.2rem;--thumb-size: 1.5rem;--track-radius: .3em;position:relative;display:inline-block;width:var(--track-width);height:var(--track-height)}.notification_switch_slider{position:absolute;cursor:pointer;inset:50% 0 0;background-color:var(--track-color);border:solid var(--track-border-color) 1px;transition:.2s;border-radius:var(--track-radius);transform:translateY(-50%)}.notification_switch_slider:before{position:absolute;content:"";height:var(--thumb-size);width:var(--thumb-size);left:calc(var(--thumb-size) / -4);top:50%;transform:translateY(-50%);background-color:var(--track-color);transition:.2s var(--bouncy-transition),border .1s;border-radius:50%;border:solid var(--track-border-color) 1px;box-shadow:0 0 .125rem #0003}.notification_switch_slider:hover:before{border:solid var(--border-color) 1px;filter:brightness(1.2)}input:checked+.notification_switch_slider{background-color:var(--primary-color);border:var(--border-color) 1px solid}input:checked+.notification_switch_slider:before{transform:translate(calc(var(--track-width) - var(--thumb-size) * .66),-50%)}.notification_field{position:absolute;padding:0;width:100%;display:flex;margin:1rem 0 0;align-items:baseline;justify-content:center}.notification{--notification-border-radius: var(--primary-border-radius);--notification-font-size: 1.3rem;position:absolute;background:var(--top-color);color:var(--font-color);border:solid 1px #333;border-radius:var(--notification-border-radius);display:flex;justify-content:center;flex-direction:column;align-items:center;font-size:large;z-index:var(--top-index);left:50%;transform:translate(-50%,-5rem);transition:transform .5s ease,opacity .5s ease;opacity:0;animation-duration:.5s;animation-fill-mode:forwards;box-shadow:#333 0 0 10px;width:max-content;max-width:100%}.notification.drop{opacity:1;transform:translate(-50%)}.notification .top{width:100%;display:flex;justify-content:space-between;border-bottom:solid 1px #555;align-items:center}.notification h2{text-align:start;line-height:2rem;margin:1rem}.notification_content{margin:1rem;min-width:90%;display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center}.notification .close_btn{text-align:end;font-weight:bolder;font-size:2rem;margin-right:1rem}.notification .close_btn:hover{cursor:pointer}#note_canvas{width:100%;filter:saturate(1.23);flex:1;background-size:cover;min-height:0;z-index:1}#note_canvas.sideways{height:100%!important;width:unset!important;min-height:unset!important}#note_canvas.light_mode{background:linear-gradient(45deg,var(--top-buttons-color-start),var(--top-buttons-color-end))}.top_part{--top-part-border-radius: 1.5rem;position:relative;background:var(--top-color);border-radius:0 0 var(--top-part-border-radius) var(--top-part-border-radius);padding:3px;display:flex;flex-wrap:wrap;align-content:space-around;justify-content:space-around;align-items:center;z-index:50;transform-origin:top;transform:scaleY(1);transition:var(--hide-top-duration) ease}.top_part *{user-select:none;-webkit-user-select:none}.top_part_hidden{position:fixed;width:100%;transform:scaleY(0)}.top_part.settings_shown{border-radius:0 0 0 var(--top-part-border-radius)}.top_part.synthui_shown{border-radius:0}input[type=file]{display:none}#title{user-select:text;position:relative;z-index:1;margin:.2em auto;display:block;line-height:100%;font-weight:400;text-shadow:0 0 5px var(--font-color)}#progress_bar{background:#206;display:block;position:absolute;width:0;height:2.1em;border-radius:var(--primary-border-radius);margin-left:auto;margin-right:auto;margin-top:.4em;padding-top:5px;padding-bottom:5px;top:0;left:0;right:0;z-index:0;transition:width ease .5s}.midi_and_sf_controller{position:relative;display:flex;width:fit-content;margin:auto auto 5px;flex-wrap:wrap;justify-content:space-around}.midi_and_sf_controller label{padding:6px;border-radius:var(--primary-border-radius);cursor:pointer;background:var(--top-buttons-color);font-weight:bolder;margin:5px;display:flex;align-items:center;justify-content:center;transition:all .1s ease}.midi_and_sf_controller label:active{filter:brightness(.9);transform:scale(var(--active-scale))}#sf_selector option{background:#000;text-align:center}#sf_selector{display:block;border:none;font-size:1em;background:var(--top-buttons-color);text-align:center;margin:5px;padding:6px;border-radius:var(--primary-border-radius);font-weight:bolder}.show_top_button{background:var(--top-buttons-color);width:fit-content;padding:.1em 2em;border-radius:0 0 var(--primary-border-radius) var(--primary-border-radius);transition:all calc(var(--hide-top-duration) * 2) var(--bouncy-transition);transition-delay:calc(var(--hide-top-duration) / 2);transform-origin:top;margin:auto;display:none;opacity:0;position:absolute;z-index:100;left:0;right:0;cursor:pointer}.show_top_button:hover{filter:brightness(1.1);transform:scaleY(1.3)}.show_top_button.shown{opacity:1}#keyboard_canvas_wrapper{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;transition:var(--music-mode-transition) transform}#keyboard_canvas_wrapper.out_animation{transform:translate(-100%)}#keyboard_canvas_wrapper.upwards{flex-direction:column-reverse}#keyboard_canvas_wrapper.right_to_left{flex-direction:row}#keyboard_canvas_wrapper.left_to_right{flex-direction:row-reverse}*{--top-buttons-color-start: #222;--top-buttons-color-end: #333;--top-buttons-color: linear-gradient(201deg, var(--top-buttons-color-start), var(--top-buttons-color-end));--hide-top-duration: .2s;--font-color: #ccc;--top-index: 32767;--top-color-start: #101010;--top-color-end: #212121;--top-color: linear-gradient(31deg, var(--top-color-start), var(--top-color-end));--primary-border-radius: .5rem;--active-scale: .9;--bouncy-transition: cubic-bezier(.68,-.55,.27,1.55);--music-mode-transition: .5s ease;font-family:system-ui,Noto Sans,Open Sans,sans-serif;color:var(--font-color);text-align:center;margin:0;box-sizing:border-box}pre{font-family:monospace!important}html,body{height:100lvh;width:100%;background:#000;overflow-x:clip;scrollbar-width:thin}body.load{transition:background .2s}body.no_scroll,html.no_scroll{max-height:100%!important;height:100%!important;overflow:hidden!important}.spessasynth_main{display:flex;flex-direction:column;height:100%;--primary-color: #510087;--border-color: #6e00b7;--track-color: #333;--track-border-color: #444;--shadow-color: #000}.spessasynth_main.light_mode{--primary-color: #a93bff;--border-color: #510087;--track-color: #ccc;--track-border-color: #444;--shadow-color: #fff}a{text-decoration:none;color:#546fff}::-webkit-scrollbar{background-color:#000;width:.3em}::-webkit-scrollbar-thumb{background-color:#777;border-radius:50px}.bottom_part{margin-top:5px}button{-webkit-user-select:none;user-select:none}.hidden{display:none!important}.secret_video{position:absolute;width:100%;left:0;z-index:0}.drop_prompt{flex-direction:column;display:flex;justify-content:center;align-items:center;position:fixed;width:100%;height:100%;z-index:var(--top-index);background:#0009}.loading{flex-direction:column;display:flex;justify-content:center;align-items:center;position:fixed;width:100%;height:100%;z-index:var(--top-index);left:0;background:var(--top-color);transition:all 1s var(--bouncy-transition);cursor:wait}.loading .loading_icon{max-width:100%;max-height:100%;margin:1em;animation:spin 1s ease-in-out infinite}.loading.done{transform:translateY(-100%)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}