From 2718bfc87c68fbfa7c305d271272fe280d12a7cb Mon Sep 17 00:00:00 2001
From: thecozies <79979276+thecozies@users.noreply.github.com>
Date: Mon, 22 Jan 2024 10:43:21 -0600
Subject: [PATCH] config related style/layout updates

---
 assets/config_menu.rml                        | 441 +++++++++++-------
 assets/icons/Plus.svg                         |  12 +
 assets/icons/VizMap/Map.svg                   |   4 +
 assets/icons/VizMap/Shield.svg                |  19 +
 assets/icons/X.svg                            |   5 +
 assets/recomp.rcss                            |   2 +-
 assets/scss/styles/components/Button.scss     |   7 +-
 .../scss/styles/components/CenteredPage.scss  |  17 +-
 assets/scss/styles/components/Config.scss     |  18 +-
 .../scss/styles/components/ControlOption.scss |   7 +-
 assets/scss/styles/components/IconButton.scss |  21 +-
 .../scss/styles/components/InputConfig.scss   | 111 ++++-
 assets/scss/styles/components/Tabs.scss       |   2 +-
 assets/scss/styles/mixins/_typography.scss    |   8 +
 14 files changed, 493 insertions(+), 181 deletions(-)
 create mode 100644 assets/icons/Plus.svg
 create mode 100644 assets/icons/VizMap/Map.svg
 create mode 100644 assets/icons/VizMap/Shield.svg
 create mode 100644 assets/icons/X.svg
diff --git a/assets/config_menu.rml b/assets/config_menu.rml
index 2a5fab2..e73783e 100644
--- a/assets/config_menu.rml
+++ b/assets/config_menu.rml
@@ -30,179 +30,265 @@
 <body class="window">
 	<!-- <handle move_target="#document"> -->
 		<div id="window" style="display:flex; flex-flow: column; background-color:rgba(0,0,0,0)" onkeydown="config_keydown">
-			<div class="centered-page">
-				<tabset class="centered-page__modal tabs" id="config_tabset">
-					<tab class="tab" id="tab_graphics" autofocus>
-						<div>Graphics</div>
-						<div class="tab__indicator"></div>
-					</tab>
-					<panel class="config" data-model="graphics_model">
-						<form class="config__form">
-							<div class="config__wrapper">
-								<div class="config__row">
-									<div class="config-option">
-										<label class="config-option__title">Resolution</label>
-										<div class="config-option__list config-option__list">
-											<input type="radio" name="resolution" data-checked="res_option" value="Original" id="res_original" style="nav-left:none;nav-up:#tab_graphics"/>
-											<label class="config-option__tab-label" for="res_original">Original</label>
-											<input type="radio" name="resolution" data-checked="res_option" value="Original2x" id="res_2x" style="nav-up:#tab_graphics"/>
-											<label class="config-option__tab-label" for="res_2x">Original 2x</label>
-											<input type="radio" name="resolution" data-checked="res_option" value="Auto" id="res_auto" style="nav-down:#ar_expand;nav-up:#tab_graphics"/>
-											<label class="config-option__tab-label" for="res_auto">Auto</label>
+			<div class="centered-page" onclick="close_config_menu_backdrop">
+				<div class="centered-page__modal">
+					<tabset class="tabs" id="config_tabset">
+						<tab class="tab" id="tab_graphics" autofocus>
+							<div>Graphics</div>
+							<div class="tab__indicator"></div>
+						</tab>
+						<panel class="config" data-model="graphics_model">
+							<form class="config__form">
+								<div class="config__wrapper">
+									<div class="config__row">
+										<div class="config-option">
+											<label class="config-option__title">Resolution</label>
+											<div class="config-option__list config-option__list">
+												<input type="radio" name="resolution" data-checked="res_option" value="Original" id="res_original" style="nav-left:none;nav-up:#tab_graphics"/>
+												<label class="config-option__tab-label" for="res_original">Original</label>
+												<input type="radio" name="resolution" data-checked="res_option" value="Original2x" id="res_2x" style="nav-up:#tab_graphics"/>
+												<label class="config-option__tab-label" for="res_2x">Original 2x</label>
+												<input type="radio" name="resolution" data-checked="res_option" value="Auto" id="res_auto" style="nav-down:#ar_expand;nav-up:#tab_graphics"/>
+												<label class="config-option__tab-label" for="res_auto">Auto</label>
+											</div>
+										</div>
+										<div class="config-option">
+											<label class="config-option__title">Window Mode</label>
+											<div class="config-option__list config-option__list">
+												<input type="radio" name="windowmode" data-checked="wm_option" value="Windowed" id="wm_windowed" style="nav-up:#tab_graphics"/>
+												<label class="config-option__tab-label" for="wm_windowed">Windowed</label>
+												<input type="radio" name="windowmode" data-checked="wm_option" value="Fullscreen" id="wm_fullscreen" style="nav-right:none;nav-up:#tab_graphics"/>
+												<label class="config-option__tab-label" for="wm_fullscreen">Fullscreen</label>
+											</div>
 										</div>
 									</div>
-									<div class="config-option">
-										<label class="config-option__title">Window Mode</label>
-										<div class="config-option__list config-option__list">
-											<input type="radio" name="windowmode" data-checked="wm_option" value="Windowed" id="wm_windowed" style="nav-up:#tab_graphics"/>
-											<label class="config-option__tab-label" for="wm_windowed">Windowed</label>
-											<input type="radio" name="windowmode" data-checked="wm_option" value="Fullscreen" id="wm_fullscreen" style="nav-right:none;nav-up:#tab_graphics"/>
-											<label class="config-option__tab-label" for="wm_fullscreen">Fullscreen</label>
+									<div class="config__row">
+										<div class="config-option">
+											<label class="config-option__title">Aspect Ratio</label>
+											<div class="config-option__list config-option__list">
+												<input type="radio" name="aspectratio" data-checked="ar_option" value="Original" id="ar_original" style="nav-left:none"/>
+												<label class="config-option__tab-label" for="ar_original">Original</label>
+												<input type="radio" name="aspectratio" data-checked="ar_option" value="Expand" id="ar_expand" style="nav-up:#res_2x"/>
+												<label class="config-option__tab-label" for="ar_expand">Expand</label>
+											</div>
+										</div>
+										<div class="config-option">
+											<label class="config-option__title">MS Anti-Aliasing</label>
+											<div class="config-option__list config-option__list">
+												<input type="radio" name="antialiasing" data-checked="msaa_option" value="None" id="msaa_none" style="nav-down:#apply_button"/>
+												<label class="config-option__tab-label" for="msaa_none">None</label>
+												<input type="radio" name="antialiasing" data-checked="msaa_option" value="MSAA2X" id="msaa_2x" style="nav-down:#apply_button"/>
+												<label class="config-option__tab-label" for="msaa_2x">2x</label>
+												<input type="radio" name="antialiasing" data-checked="msaa_option" value="MSAA4X" id="msaa_4x" style="nav-down:#apply_button"/>
+												<label class="config-option__tab-label" for="msaa_4x">4x</label>
+												<input type="radio" name="antialiasing" data-checked="msaa_option" value="MSAA8X" id="msaa_8x" style="nav-right:none;nav-down:#apply_button"/>
+												<label class="config-option__tab-label" for="msaa_8x">8x</label>
+											</div>
+										</div>
+									</div>
+									
+									<div class="config__row">
+										<div class="config-option">
+											<label class="config-option__title">Framerate</label>
+											<div class="config-option__list config-option__list">
+												<input type="radio" name="refreshrate" data-checked="rr_option" value="Original" id="rr_original" style="nav-left:none;nav-down:#apply_button"/>
+												<label class="config-option__tab-label" for="rr_original">Original</label>
+												<input type="radio" name="refreshrate" data-checked="rr_option" value="Display" id="rr_display" style="nav-down:#apply_button"/>
+												<label class="config-option__tab-label" for="rr_display">Display</label>
+												<input type="radio" name="refreshrate" data-checked="rr_option" value="Manual" id="rr_manual" style="nav-up:#ar_expand;nav-down:#apply_button"/>
+												<label class="config-option__tab-label" for="rr_manual">Manual</label>
+											</div>
+											<div data-if="rr_option=='Manual'" class="config-option__range-wrapper config-option__list">
+												<label class="config-option__range-label">{{rr_manual_value}}</label>
+												<input id="rr_manual_input" type="range" min="20" max="360" style="flex:1;margin: 0dp;nav-up:auto;nav-down:auto;" data-value="rr_manual_value"/>
+											</div>
 										</div>
 									</div>
 								</div>
-								<div class="config__row">
-									<div class="config-option">
-										<label class="config-option__title">Aspect Ratio</label>
-										<div class="config-option__list config-option__list">
-											<input type="radio" name="aspectratio" data-checked="ar_option" value="Original" id="ar_original" style="nav-left:none"/>
-											<label class="config-option__tab-label" for="ar_original">Original</label>
-											<input type="radio" name="aspectratio" data-checked="ar_option" value="Expand" id="ar_expand" style="nav-up:#res_2x"/>
-											<label class="config-option__tab-label" for="ar_expand">Expand</label>
-										</div>
-									</div>
-									<div class="config-option">
-										<label class="config-option__title">MS Anti-Aliasing</label>
-										<div class="config-option__list config-option__list">
-											<input type="radio" name="antialiasing" data-checked="msaa_option" value="None" id="msaa_none" style="nav-down:#apply_button"/>
-											<label class="config-option__tab-label" for="msaa_none">None</label>
-											<input type="radio" name="antialiasing" data-checked="msaa_option" value="MSAA2X" id="msaa_2x" style="nav-down:#apply_button"/>
-											<label class="config-option__tab-label" for="msaa_2x">2x</label>
-											<input type="radio" name="antialiasing" data-checked="msaa_option" value="MSAA4X" id="msaa_4x" style="nav-down:#apply_button"/>
-											<label class="config-option__tab-label" for="msaa_4x">4x</label>
-											<input type="radio" name="antialiasing" data-checked="msaa_option" value="MSAA8X" id="msaa_8x" style="nav-right:none;nav-down:#apply_button"/>
-											<label class="config-option__tab-label" for="msaa_8x">8x</label>
-										</div>
+								<div class="config__footer">
+									<!-- this empty div makes sure Apply button gets right aligned -->
+									<div/>
+									<div>
+										<button
+											class="button button--secondary"
+											nav-return="rr_manual"
+											data-attrif-disabled="!options_changed"
+											onclick="apply_options"
+											id="apply_button"
+										>
+											<div class="button__label">Apply</div>
+										</button>
 									</div>
 								</div>
-								
-								<div class="config__row">
-									<div class="config-option">
-										<label class="config-option__title">Framerate</label>
-										<div class="config-option__list config-option__list">
-											<input type="radio" name="refreshrate" data-checked="rr_option" value="Original" id="rr_original" style="nav-left:none;nav-down:#apply_button"/>
-											<label class="config-option__tab-label" for="rr_original">Original</label>
-											<input type="radio" name="refreshrate" data-checked="rr_option" value="Display" id="rr_display" style="nav-down:#apply_button"/>
-											<label class="config-option__tab-label" for="rr_display">Display</label>
-											<input type="radio" name="refreshrate" data-checked="rr_option" value="Manual" id="rr_manual" style="nav-up:#ar_expand;nav-down:#apply_button"/>
-											<label class="config-option__tab-label" for="rr_manual">Manual</label>
-										</div>
-										<div data-if="rr_option=='Manual'" class="config-option__range-wrapper config-option__list">
-											<label class="config-option__range-label">{{rr_manual_value}}</label>
-											<input id="rr_manual_input" type="range" min="20" max="360" style="flex:1;margin: 0dp;nav-up:auto;nav-down:auto;" data-value="rr_manual_value"/>
-										</div>
-									</div>
-								</div>
-							</div>
-							<div class="config__footer">
-								<div>
-									<button
-										class="button button--secondary"
-										nav-return="rr_manual"
-										data-attrif-disabled="!options_changed"
-										onclick="apply_options"
-										id="apply_button"
-									>
-										<div class="button__label">Apply</div>
-									</button>
-								</div>
-							</div>
-						</form>
-					</panel>
-					<tab class="tab">
-						<div>Controls</div>
-						<div class="tab__indicator"></div>
-					</tab>
-					<panel class="config" data-model="controls_model">
-						<form class="config__form" data-attr-cur-input="cur_input_row">
-							<div class="config__wrapper input-config">
-								<div class="input-config__horizontal-split">
-									<div class="input-config__mappings" data-event-mouseout="set_input_row_focus(-1)">
-										<div class="input-config__mappings-scroll">
-											<div class="input-config__mappings-wrapper">
-												<div
-													class="control-option"
-													id="input_row"
-													data-for="input_bindings, i : inputs.array"
-													data-event-mouseover="set_input_row_focus(i)"
-												>
-													<label
-														class="control-option__label"
+							</form>
+						</panel>
+						<tab class="tab">
+							<div>Controls</div>
+							<div class="tab__indicator"></div>
+						</tab>
+						<panel class="config" data-model="controls_model">
+							<form class="config__form" data-attr-cur-input="cur_input_row">
+								<div class="config__wrapper input-config">
+									<div class="input-config__horizontal-split">
+										<div class="input-config__mappings" data-event-mouseout="set_input_row_focus(-1)">
+											<div class="input-config__mappings-scroll">
+												<div class="input-config__mappings-wrapper">
+													<div
+														class="control-option"
+														id="input_row"
+														data-for="input_bindings, i : inputs.array"
+														data-event-mouseover="set_input_row_focus(i)"
+													>
+														<label
+															class="control-option__label"
 														>{{get_input_name(i)}}</label>
-													<div class="control-option__bindings">
+														<div class="control-option__bindings">
+															<button
+																data-event-blur="set_input_row_focus(-1)"
+																data-event-focus="set_input_row_focus(i)"
+																data-for="cur_binding, j : input_bindings"
+																data-event-click="set_input_binding(i,j)"
+																class="prompt-font control-option__binding"
+															>
+																<div>{{cur_binding}}</div>
+															</button>
+														</div>
 														<button
 															data-event-blur="set_input_row_focus(-1)"
 															data-event-focus="set_input_row_focus(i)"
-															data-for="cur_binding, j : input_bindings"
-															data-event-click="set_input_binding(i,j)"
-															class="prompt-font control-option__binding"
+															data-event-click="clear_input_bindings(i)"
+															class="icon-button icon-button--danger"
 														>
-															<div>{{cur_binding}}</div>
+															<svg src="icons/Trash.svg" />
 														</button>
 													</div>
-													<button
-														data-event-blur="set_input_row_focus(-1)"
-														data-event-focus="set_input_row_focus(i)"
-														data-event-click="clear_input_bindings(i)"
-														class="icon-button icon-button--danger"
-													>
-														<svg src="icons/Trash.svg" />
-													</button>
 												</div>
 											</div>
 										</div>
-									</div>
-									<div class="input-config__visual-wrapper">
-										<div class="input-config__visual-aspect">
-											<div class="input-config__visual">
-												<h3>Insert visual here:{{active_binding_input}}:{{active_binding_slot}}</h3>
-												<h3>Current focused row: {{cur_input_row}}</h3>
-												<div
-													class="input-viz"
-													data-for="input_bindings, i : inputs.array"
-													data-attr-visual-input="get_input_enum_name(i)"
-												>
-													{{get_input_name(i)}}
-												</div>
-												<div
-													class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
-													visual-input="C_DOWN"
-												>
-													<svg src="icons/VizMap/ButtonMedium.svg" />
-													<div class="input-config__visual-mappings">
-														{{C_DOWN}}
-														<div
-															class="input-config__visual-mapping"
-															data-for="cur_binding, j : inputs[C_DOWN]"
-														>
-															<div>{{cur_binding}}</div>
-															<div>{{get_input_from_enum_name('C_DOWN')}}</div>
+										<div class="input-config__visual-wrapper">
+											<div class="input-config__visual-aspect">
+												<div class="input-config__visual">
+													<!-- stick only -->
+													<div class="input-config__visual-stick-wrapper">
+														<div class="input-config__visual-stick">
+															<div>stick!!</div>
 														</div>
 													</div>
-												</div>
-												<div
-													class="input-viz input-viz__Z"
-													visual-input="Z"
-												>
-													<svg src="icons/VizMap/Target.svg" />
-													<div class="input-config__visual-mappings">
-														{{Z}}
+													<!-- top half -->
+													<div class="input-config__visual-half">
+														<div class="input-config__visual-quarter-left">
+															<div>
+																dpad lmao
+															</div>
+														</div>
+														<div class="input-config__visual-quarter-right">
+															<div class="input-config__c-buttons">
+																<div class="input-config__c-buttons-lr">
+																	<div
+																		class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
+																		visual-input="C_LEFT"
+																	>
+																		<svg src="icons/VizMap/ButtonMedium.svg" />
+																		<div class="input-viz__mappings">
+																			<div
+																				class="input-config__visual-mapping"
+																				data-for="cur_binding, i : inputs.C_LEFT"
+																			>
+																				<div>{{cur_binding}}</div>
+																			</div>
+																		</div>
+																	</div>
+																	<div
+																		class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
+																		visual-input="C_RIGHT"
+																	>
+																		<svg src="icons/VizMap/ButtonMedium.svg" />
+																		<div class="input-viz__mappings">
+																			<div
+																				class="input-config__visual-mapping"
+																				data-for="cur_binding, i : inputs.C_RIGHT"
+																			>
+																				<div>{{cur_binding}}</div>
+																			</div>
+																		</div>
+																	</div>
+																</div>
+																<div class="input-config__c-buttons-du">
+																	<div
+																		class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
+																		visual-input="C_DOWN"
+																	>
+																		<svg src="icons/VizMap/ButtonMedium.svg" />
+																		<div class="input-viz__mappings">
+																			<div
+																				class="input-config__visual-mapping"
+																				data-for="cur_binding, i : inputs.C_DOWN"
+																			>
+																				<div>{{cur_binding}}</div>
+																			</div>
+																		</div>
+																	</div>
+																	<div
+																		class="input-viz input-viz__button input-viz__button--sm input-viz__button--C"
+																		visual-input="C_UP"
+																	>
+																		<svg src="icons/VizMap/ButtonMedium.svg" />
+																		<div class="input-viz__mappings">
+																			<div
+																				class="input-config__visual-mapping"
+																				data-for="cur_binding, i : inputs.C_UP"
+																			>
+																				<div>{{cur_binding}}</div>
+																			</div>
+																		</div>
+																	</div>
+																</div>
+															</div>
+														</div>
+													</div>
+													<!-- bottom half -->
+													<div class="input-config__visual-half input-config__visual-half--bottom">
 														<div
-															class="input-config__visual-mapping"
-															data-for="cur_binding, j : inputs[Z]"
+															class="input-viz input-viz__Z"
+															visual-input="Z"
 														>
-															<div>{{cur_binding}}</div>
-															<div>{{get_input_from_enum_name('Z')}}</div>
+															<svg src="icons/VizMap/Target.svg" />
+															<div class="input-viz__mappings">
+																<div
+																	class="input-config__visual-mapping"
+																	data-for="cur_binding, i : inputs.Z"
+																>
+																	<div>{{cur_binding}}</div>
+																</div>
+															</div>
+														</div>
+														<div
+															class="input-viz input-viz__R"
+															visual-input="R"
+														>
+															<svg src="icons/VizMap/Shield.svg" />
+															<div class="input-viz__mappings">
+																<div
+																	class="input-config__visual-mapping"
+																	data-for="cur_binding, i : inputs.R"
+																>
+																	<div>{{cur_binding}}</div>
+																</div>
+															</div>
+														</div>
+														<div
+															class="input-viz input-viz__L"
+															visual-input="L"
+														>
+															<svg src="icons/VizMap/Map.svg" />
+															<div class="input-viz__mappings">
+																<div
+																	class="input-config__visual-mapping"
+																	data-for="cur_binding, i : inputs.L"
+																>
+																	<div>{{cur_binding}}</div>
+																</div>
+															</div>
 														</div>
 													</div>
 												</div>
@@ -210,18 +296,45 @@
 										</div>
 									</div>
 								</div>
-							</div>
-							<div class="config__footer">
-							</div>
-						</form>
-					</panel>
-					<tab class="tab">
-						<div>Sound</div>
-						<div class="tab__indicator"></div>
-					</tab>
-					<panel class="config" >
-					</panel>
-				</tabset>
+								<div class="config__footer">
+									<div class="config__footer-left">
+										<button
+											class="button button--primary"
+										>
+											<div class="button__label">Controller</div>
+										</button>
+										<button
+											class="button button--secondary"
+										>
+											<div class="button__label">Keyboard</div>
+										</button>
+									</div>
+									<div>
+										<button
+											class="button button--warning"
+										>
+											<div class="button__label">Reset to defaults</div>
+										</button>
+									</div>
+								</div>
+							</form>
+						</panel>
+						<tab class="tab">
+							<div>Sound</div>
+							<div class="tab__indicator"></div>
+						</tab>
+						<panel class="config" >
+						</panel>
+					</tabset>
+					<!-- Close button absolutely positioned on top right of modal -->
+					<button
+						class="icon-button config__exit-button"
+						onclick="close_config_menu"
+						style="z-index: 10000;"
+					>
+						<svg src="icons/X.svg" />
+					</button>
+				</div>
 			</div>
 			<div style="flex:0 1 80dp;display:flex; justify-content: space-between; width:100%; max-width:800dp; align-self:center;">
 				<label style="text-align:center; font-size:24dp;"><span style="font-family:promptfont; font-size:40dp">&#x2424;&#x242B;</span><span style="font-size:24dp;">Navigate</span></label>
diff --git a/assets/icons/Plus.svg b/assets/icons/Plus.svg
new file mode 100644
index 0000000..ca00c8f
--- /dev/null
+++ b/assets/icons/Plus.svg
@@ -0,0 +1,12 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_101_783)">
+        <path d="M16 4V28" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" />
+        <path d="M4 16H28" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" />
+    </g>
+    <defs>
+        <clipPath id="clip0_101_783">
+            <rect width="32" height="32" fill="white" />
+        </clipPath>
+    </defs>
+</svg>
+    
diff --git a/assets/icons/VizMap/Map.svg b/assets/icons/VizMap/Map.svg
new file mode 100644
index 0000000..9a5fde4
--- /dev/null
+++ b/assets/icons/VizMap/Map.svg
@@ -0,0 +1,4 @@
+<svg width="136" height="136" viewBox="0 0 136 136" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="136" height="136" rx="8" fill="#ffffff" fill-opacity="0.2"/>
+    <rect x="1.5" y="1.5" width="133" height="133" rx="6.5" stroke="#ffffff" stroke-opacity="0.8" stroke-width="3"/>
+</svg>
diff --git a/assets/icons/VizMap/Shield.svg b/assets/icons/VizMap/Shield.svg
new file mode 100644
index 0000000..933bb07
--- /dev/null
+++ b/assets/icons/VizMap/Shield.svg
@@ -0,0 +1,19 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_162_1238)">
+        <mask id="path-1-inside-1_162_1238" fill="white">
+            <path
+                d="M48.011 0.0243377C43.618 3.24908 38.8843 6.57117 33.2015 9.78375C24.3182 14.7973 15.9217 18.3628 8.59609 20.9304C7.91464 27.8058 9.89816 53.4821 19.256 69.3137C28.6138 85.1454 41.671 92.5684 48.011 96V95.9757C54.3388 92.544 67.3229 85.2306 76.7416 69.2894C86.1603 53.3482 88.083 27.7815 87.4015 20.9061C80.0759 18.3384 71.6794 14.773 62.7961 9.75941C57.1133 6.54684 52.3796 3.22474 47.9866 0" />
+        </mask>
+        <path
+            d="M48.011 0.0243377C43.618 3.24908 38.8843 6.57117 33.2015 9.78375C24.3182 14.7973 15.9217 18.3628 8.59609 20.9304C7.91464 27.8058 9.89816 53.4821 19.256 69.3137C28.6138 85.1454 41.671 92.5684 48.011 96V95.9757C54.3388 92.544 67.3229 85.2306 76.7416 69.2894C86.1603 53.3482 88.083 27.7815 87.4015 20.9061C80.0759 18.3384 71.6794 14.773 62.7961 9.75941C57.1133 6.54684 52.3796 3.22474 47.9866 0"
+            fill="#3333FF" fill-opacity="0.2" />
+        <path
+            d="M33.2015 9.78375L34.676 12.3964L34.6778 12.3953L33.2015 9.78375ZM8.59609 20.9304L7.60378 18.0993L5.79931 18.7317L5.61072 20.6345L8.59609 20.9304ZM48.011 96L46.5829 98.6383L51.011 101.035V96H48.011ZM48.011 95.9757L46.5808 93.3385L45.011 94.1898V95.9757H48.011ZM87.4015 20.9061L90.3869 20.6102L90.1983 18.7074L88.3938 18.0749L87.4015 20.9061ZM62.7961 9.75941L61.3198 12.371L61.3216 12.372L62.7961 9.75941ZM46.2357 -2.39402C41.8799 0.803476 37.2563 4.04532 31.7251 7.17217L34.6778 12.3953C40.5123 9.09703 45.3562 5.69469 49.7862 2.4427L46.2357 -2.39402ZM31.727 7.17113C23.0183 12.0861 14.7865 15.5817 7.60378 18.0993L9.5884 23.7615C17.0569 21.1438 25.6181 17.5085 34.676 12.3964L31.727 7.17113ZM5.61072 20.6345C5.23291 24.4463 5.60118 32.8792 7.20409 42.2683C8.81006 51.6754 11.724 62.4668 16.6734 70.8402L21.8386 67.7872C17.4302 60.329 14.6734 50.3664 13.1185 41.2586C11.5606 32.1329 11.2778 24.2899 11.5815 21.2263L5.61072 20.6345ZM16.6734 70.8402C26.4559 87.3904 40.1088 95.1341 46.5829 98.6383L49.439 93.3617C43.2332 90.0027 30.7718 82.9004 21.8386 67.7872L16.6734 70.8402ZM51.011 96V95.9757H45.011V96H51.011ZM49.4411 98.6128C55.898 95.1112 69.4802 87.4768 79.3245 70.8154L74.1587 67.7633C65.1656 82.9843 52.7795 89.9769 46.5808 93.3385L49.4411 98.6128ZM79.3245 70.8154C84.3035 62.3884 87.2177 51.5981 88.8166 42.2013C90.4125 32.8221 90.7644 24.4186 90.3869 20.6102L84.4161 21.202C84.7201 24.2689 84.4514 32.0865 82.9016 41.1948C81.3548 50.2856 78.5984 60.2492 74.1587 67.7633L79.3245 70.8154ZM88.3938 18.0749C81.2111 15.5574 72.9792 12.0618 64.2706 7.14679L61.3216 12.372C70.3795 17.4842 78.9407 21.1195 86.4092 23.7372L88.3938 18.0749ZM64.2725 7.14783C58.7413 4.02098 54.1177 0.779138 49.7619 -2.41836L46.2114 2.41836C50.6414 5.67035 55.4853 9.07269 61.3198 12.371L64.2725 7.14783Z"
+            fill="white" fill-opacity="0.8" mask="url(#path-1-inside-1_162_1238)" />
+    </g>
+    <defs>
+        <clipPath id="clip0_162_1238">
+            <rect width="79.052" height="96" fill="white" transform="translate(8.47388)" />
+        </clipPath>
+    </defs>
+</svg>
diff --git a/assets/icons/X.svg b/assets/icons/X.svg
new file mode 100644
index 0000000..8b35dbd
--- /dev/null
+++ b/assets/icons/X.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.51465 7.51472L24.4852 24.4853" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round"/>
+    <path d="M7.51465 24.4853L24.4852 7.51471" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round"/>
+</svg>
+    
\ No newline at end of file
diff --git a/assets/recomp.rcss b/assets/recomp.rcss
index 140718e..cba0c10 100644
--- a/assets/recomp.rcss
+++ b/assets/recomp.rcss
@@ -1 +1 @@
-h1{font-size:64dp;letter-spacing:4.48dp;line-height:64dp;font-style:normal;font-weight:700}h2{font-size:48dp;letter-spacing:3.36dp;line-height:48dp;font-style:normal;font-weight:700}h3{font-size:32dp;letter-spacing:2.24dp;line-height:32dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button{font-size:32dp;letter-spacing:3.52dp;line-height:32dp;font-style:normal;font-weight:700}.label-md,.config-option__title,.tab,.control-option__label{font-size:24dp;letter-spacing:2.64dp;line-height:24dp;font-style:normal;font-weight:700}.label-sm,.subtitle-title__disclaimer,.config-option__range-label,.config-option__list .config-option__tab-label{font-size:16dp;letter-spacing:2.24dp;line-height:16dp;font-style:normal;font-weight:700;text-transform:uppercase}body{font-size:16dp;letter-spacing:0dp;line-height:16dp;font-style:normal;font-weight:400}.prompt-font{font-family:promptfont;font-style:normal;font-weight:400;font-size:40dp;line-height:40dp}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.control-option__binding:not([disabled]),.centered-page__modal{nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.control-option__binding:not([disabled]),.centered-page__modal{focus:auto;tab-index:auto}h1{font-size:64dp;letter-spacing:4.48dp;line-height:64dp;font-style:normal;font-weight:700}h2{font-size:48dp;letter-spacing:3.36dp;line-height:48dp;font-style:normal;font-weight:700}h3{font-size:32dp;letter-spacing:2.24dp;line-height:32dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button{font-size:32dp;letter-spacing:3.52dp;line-height:32dp;font-style:normal;font-weight:700}.label-md,.config-option__title,.tab,.control-option__label{font-size:24dp;letter-spacing:2.64dp;line-height:24dp;font-style:normal;font-weight:700}.label-sm,.subtitle-title__disclaimer,.config-option__range-label,.config-option__list .config-option__tab-label{font-size:16dp;letter-spacing:2.24dp;line-height:16dp;font-style:normal;font-weight:700;text-transform:uppercase}body{font-size:16dp;letter-spacing:0dp;line-height:16dp;font-style:normal;font-weight:400}.prompt-font{font-family:promptfont;font-style:normal;font-weight:400;font-size:40dp;line-height:40dp}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.control-option__binding:not([disabled]),.centered-page__modal{nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.control-option__binding:not([disabled]),.centered-page__modal{focus:auto;tab-index:auto}*{box-sizing:border-box}hr{display:block;background:#000;padding:1.5dp}body{font-family:chiaro;font-weight:normal;font-style:normal;font-size:20dp;color:#fff}div#window{position:relative;width:100%;height:100%;box-sizing:border-box;background-color:#121018;border-color:rgba(255,255,255,.2)}div#content{z-index:2;width:auto;height:100%;overflow:hidden auto;text-align:center}p{text-align:left}input.submit{margin-left:0}input.text,input.password{box-sizing:border-box;height:31dp;padding:11dp 10dp 0;cursor:text;text-align:left}textarea{padding:14dp 12dp 10dp;cursor:text;text-align:left}input.text,input.password,select,textarea{height:auto}table input.text{box-sizing:border-box;width:100%;margin:0;line-height:1;border-width:1.5dp;border-color:#000;background-color:#fff;font-size:15dp;decorator:none;height:auto}select{display:inline-block;text-align:left;box-sizing:border-box;vertical-align:center;padding:4dp;border-radius:5dp;background-color:#787878;width:100%}select selectvalue{height:auto}select:hover selectvalue{background-color:#969696}select selectbox,tbody{background-color:#787878}select selectbox option{width:auto;background-color:#787878}select selectbox option:nth-child(even),tr:nth-child(even){background-color:#646464}select selectbox option:checked{font-weight:bold;color:#fff}select selectbox option:hover{background:#969696}input.radio,input.checkbox{flex:0;tab-index:auto;focus:auto;nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto;width:0dp}scrollbarvertical,scrollbarhorizontal{margin:0;border:0}scrollbarvertical slidertrack,scrollbarhorizontal slidertrack{background:#dabaf7;opacity:.05}scrollbarvertical sliderbar,scrollbarhorizontal sliderbar{border-radius:5dp;background:#dabaf7;opacity:.1}scrollbarvertical sliderbar:hover:not(:active),scrollbarhorizontal sliderbar:hover:not(:active){opacity:.2}scrollbarvertical sliderbar:active,scrollbarhorizontal sliderbar:active{opacity:.3}scrollbarvertical sliderarrowdec,scrollbarvertical sliderarrowinc,scrollbarhorizontal sliderarrowdec,scrollbarhorizontal sliderarrowinc{width:0;height:0}scrollbarvertical{width:12dp}scrollbarvertical slidertrack{width:12dp}scrollbarvertical sliderbar{width:12dp}scrollbarhorizontal{height:12dp}scrollbarhorizontal slidertrack{height:12dp}scrollbarhorizontal sliderbar{height:12dp}.centered-page{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;padding:64dp;background-color:rgba(255,255,255,.1)}.centered-page__modal{display:flex;flex-direction:column;position:relative;margin:auto;flex:1 1 100%;max-width:1692.4444444444dp;width:100%;height:100%;background:rgba(8,7,13,.84);border-radius:16dp;border-color:rgba(0,0,0,.35);border-width:1.5dp}.centered-page__modal panels{flex:1 1 100%}.control-option{color:#ccc;display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;width:100%;height:auto;padding:8dp 16dp 8dp 20dp;border-radius:8dp;background-color:rgba(0,0,0,0)}.control-option svg{image-color:#ccc}.control-option:focus-visible:not(:disabled,[disabled]),.control-option:hover:not(:disabled,[disabled]){color:#f2f2f2;background-color:rgba(190,184,219,.1)}.control-option:focus-visible:not(:disabled,[disabled]) svg,.control-option:hover:not(:disabled,[disabled]) svg{image-color:#f2f2f2}.control-option:disabled,.control-option[disabled]{opacity:.5}.control-option .icon-button{flex:1 1 auto}.control-option__label{flex:2 1 300dp;height:auto;white-space:nowrap}.control-option__bindings{display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;flex:2 1 400dp;width:100%;height:72dp;padding:0 12dp 0 4dp}.control-option__binding{color:#ccc;display:flex;align-items:center;justify-content:center;margin:0 4dp;flex:1 1 100%;width:100%;height:72dp;padding:8dp;background-color:rgba(190,184,219,.1);border-color:rgba(190,184,219,.1);border-width:1.5dp;border-radius:8dp}.control-option__binding svg{image-color:#ccc}.control-option__binding:focus,.control-option__binding:hover{color:#f2f2f2;background-color:rgba(255,255,255,.1);border-color:#f2f2f2}.control-option__binding:focus svg,.control-option__binding:hover svg{image-color:#f2f2f2}.control-option__binding:active{color:#f5f5f5}.control-option__binding:active svg{image-color:#f5f5f5}.control-option__binding:disabled,.control-option__binding[disabled]{color:#ccc;opacity:.5}.control-option__binding:disabled svg,.control-option__binding[disabled] svg{image-color:#ccc}.tabs tabs{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.tab{display:block;position:relative;padding:20dp 24dp;background-color:rgba(0,0,0,0);margin:0;color:rgba(255,255,255,.6);transition:color .033s linear-in-out}.tab:selected{color:#f2f2f2}.tab:selected .tab__indicator{background-color:rgba(255,255,255,.6)}.tab:selected:hover{cursor:default}.tab:hover{cursor:pointer}.tab:focus{color:#f2f2f2}.tab__indicator{position:absolute;background-color:rgba(0,0,0,0);right:0;bottom:2dp;left:0;height:2dp}.config__form{border-top-color:rgba(255,255,255,.1);border-top-width:1.5dp;display:flex;flex-direction:column;justify-content:space-between;flex:1 1 100%;width:100%;height:100%;border-bottom-left-radius:16dp;border-bottom-right-radius:16dp}.config__wrapper{display:flex;flex-direction:column;border-radius:0dp;flex:1 1 100%;height:100%;padding:16dp;text-align:left;background-color:rgba(0,0,0,.35)}.config__footer{border-top-color:rgba(255,255,255,.1);border-top-width:1.5dp;display:flex;justify-content:flex-end;align-items:center;width:100%;padding:20dp 20dp;background-color:rgba(0,0,0,.35);border-bottom-left-radius:16dp;border-bottom-right-radius:16dp}.config__row{display:flex;flex-direction:row}.config-option{display:flex;flex-direction:column;flex:1;align-items:flex-start;justify-content:space-between;margin:8dp 0 16dp}.config-option__title{padding:0 12dp}.config-option__list{display:flex;padding:0;flex-direction:row;width:100%;align-items:flex-start;justify-content:flex-start}.config-option__list .config-option__tab-label{display:block;padding:12dp 0;margin:0 12dp;margin-right:16dp;color:rgba(255,255,255,.6);tab-index:none;transition:color .033s linear-in-out}.config-option__list .config-option__tab-label:hover{cursor:pointer}.config-option__list input.radio{visibility:visible;width:0;height:0}.config-option__list input.radio:checked+.config-option__tab-label{border-bottom:1dp;border-color:rgba(255,255,255,.3)}.config-option__list input.radio:checked+.config-option__tab-label:hover{cursor:default}.config-option__list input.radio:focus+.config-option__tab-label{color:#f2f2f2}.config-option__list input.range slidertrack{margin-top:7dp;height:2dp;background-color:rgba(255,255,255,.2)}.config-option__list input.range sliderbar{margin-left:-8dp;margin-right:-6dp;width:16dp;height:16dp;background-color:#ccc;border-radius:8dp;transition:background-color .033s linear-in-out}.config-option__list input.range sliderbar:hover{cursor:pointer;background-color:#f2f2f2}.config-option__list input.range sliderbar:active,.config-option__list input.range slidertrack:active+sliderbar{background-color:#17d6e8}.config-option__list input.range sliderarrowdec,.config-option__list input.range sliderarrowinc{display:none}.config-option__range-wrapper{margin-top:4dp;max-width:360dp}.config-option__range-label{flex:0 0 16dp;display:block;padding:0;margin:0 12dp;margin-right:16dp;color:#f2f2f2;tab-index:none}.input-config{padding:0}.input-config__horizontal-split{display:flex;position:relative;flex-direction:row;height:100%}.input-config__mappings{display:block;flex:1 1 auto;height:100%;min-width:640dp}.input-config__mappings-scroll{display:block;width:100%;max-height:100%;overflow-y:auto}.input-config__mappings-wrapper{padding:8dp}.input-config__visual-wrapper{display:block;width:auto;height:auto;max-width:1040.4444444444dp;max-height:780.3333333333dp;margin:auto 0;flex:1 1 100%}.input-config__visual-aspect{position:relative;width:100%;padding-bottom:75%;background-color:rgba(23,214,232,.05);margin:auto 0}.input-config__visual{display:flex;flex-direction:column;position:absolute;top:0;right:0;bottom:0;left:0}.input-viz{position:relative}[cur-input=NONE] .input-viz[visual-input]{opacity:1}.input-viz[visual-input=A]{opacity:.5}[cur-input=A] .input-viz[visual-input=A]{opacity:1}.input-viz[visual-input=B]{opacity:.5}[cur-input=B] .input-viz[visual-input=B]{opacity:1}.input-viz[visual-input=Z]{opacity:.5}[cur-input=Z] .input-viz[visual-input=Z]{opacity:1}.input-viz[visual-input=START]{opacity:.5}[cur-input=START] .input-viz[visual-input=START]{opacity:1}.input-viz[visual-input=DPAD_UP]{opacity:.5}[cur-input=DPAD_UP] .input-viz[visual-input=DPAD_UP]{opacity:1}.input-viz[visual-input=DPAD_DOWN]{opacity:.5}[cur-input=DPAD_DOWN] .input-viz[visual-input=DPAD_DOWN]{opacity:1}.input-viz[visual-input=DPAD_LEFT]{opacity:.5}[cur-input=DPAD_LEFT] .input-viz[visual-input=DPAD_LEFT]{opacity:1}.input-viz[visual-input=DPAD_RIGHT]{opacity:.5}[cur-input=DPAD_RIGHT] .input-viz[visual-input=DPAD_RIGHT]{opacity:1}.input-viz[visual-input=L]{opacity:.5}[cur-input=L] .input-viz[visual-input=L]{opacity:1}.input-viz[visual-input=R]{opacity:.5}[cur-input=R] .input-viz[visual-input=R]{opacity:1}.input-viz[visual-input=C_UP]{opacity:.5}[cur-input=C_UP] .input-viz[visual-input=C_UP]{opacity:1}.input-viz[visual-input=C_DOWN]{opacity:.5}[cur-input=C_DOWN] .input-viz[visual-input=C_DOWN]{opacity:1}.input-viz[visual-input=C_LEFT]{opacity:.5}[cur-input=C_LEFT] .input-viz[visual-input=C_LEFT]{opacity:1}.input-viz[visual-input=C_RIGHT]{opacity:.5}[cur-input=C_RIGHT] .input-viz[visual-input=C_RIGHT]{opacity:1}.input-viz[visual-input=X_AXIS_NEG]{opacity:.5}[cur-input=X_AXIS_NEG] .input-viz[visual-input=X_AXIS_NEG]{opacity:1}.input-viz[visual-input=X_AXIS_POS]{opacity:.5}[cur-input=X_AXIS_POS] .input-viz[visual-input=X_AXIS_POS]{opacity:1}.input-viz[visual-input=Y_AXIS_NEG]{opacity:.5}[cur-input=Y_AXIS_NEG] .input-viz[visual-input=Y_AXIS_NEG]{opacity:1}.input-viz[visual-input=Y_AXIS_POS]{opacity:.5}[cur-input=Y_AXIS_POS] .input-viz[visual-input=Y_AXIS_POS]{opacity:1}.input-viz__button{color:#f2f2f2}.input-viz__button svg{image-color:#f2f2f2}.input-viz__button--sm{width:64dp;height:64dp}.input-viz__button--sm svg{width:64dp;height:64dp}.input-viz__button--md{width:76dp;height:76dp}.input-viz__button--md svg{width:76dp;height:76dp}.input-viz__button--lg{width:84dp;height:84dp}.input-viz__button--lg svg{width:84dp;height:84dp}.input-viz__button--C svg{image-color:#e9cd35}.input-viz__button--A svg{image-color:#33f}.input-viz__button--B svg{image-color:#45d043}.input-viz__Z{width:136dp;height:136dp}.input-viz__Z svg{image-color:#e9cd35}.input-viz__Z svg{width:136dp;height:136dp}.button{background-color:rgba(185,125,242,.05);color:#ccc;border-color:rgba(185,125,242,.8);display:block;padding:23dp;border-radius:12dp;border-width:1.5dp;width:auto;height:auto}.button:focus{color:#f2f2f2;border-color:#b97df2;background-color:rgba(185,125,242,.3)}.button:disabled,.button[disabled]{color:rgba(255,255,255,.6)}.button:active{background-color:rgba(185,125,242,.2);color:#f5f5f5}.button--secondary{background-color:rgba(23,214,232,.05);color:#ccc;border-color:rgba(23,214,232,.8)}.button--secondary:focus{color:#f2f2f2;border-color:#17d6e8;background-color:rgba(23,214,232,.3)}.button--secondary:disabled,.button--secondary[disabled]{color:rgba(255,255,255,.6)}.button--secondary:active{background-color:rgba(23,214,232,.2);color:#f5f5f5}.button--tertiary{background-color:rgba(242,242,242,.05);color:#ccc;border-color:rgba(242,242,242,.8)}.button--tertiary:focus{color:#f2f2f2;border-color:#f2f2f2;background-color:rgba(242,242,242,.3)}.button--tertiary:disabled,.button--tertiary[disabled]{color:rgba(255,255,255,.6)}.button--tertiary:active{background-color:rgba(242,242,242,.2);color:#f5f5f5}.button--success{background-color:rgba(69,208,67,.05);color:#ccc;border-color:rgba(69,208,67,.8)}.button--success:focus{color:#f2f2f2;border-color:#45d043;background-color:rgba(69,208,67,.3)}.button--success:disabled,.button--success[disabled]{color:rgba(255,255,255,.6)}.button--success:active{background-color:rgba(69,208,67,.2);color:#f5f5f5}.button--error{background-color:rgba(248,96,57,.05);color:#ccc;border-color:rgba(248,96,57,.8)}.button--error:focus{color:#f2f2f2;border-color:#f86039;background-color:rgba(248,96,57,.3)}.button--error:disabled,.button--error[disabled]{color:rgba(255,255,255,.6)}.button--error:active{background-color:rgba(248,96,57,.2);color:#f5f5f5}.button--warning{background-color:rgba(233,205,53,.05);color:#ccc;border-color:rgba(233,205,53,.8)}.button--warning:focus{color:#f2f2f2;border-color:#e9cd35;background-color:rgba(233,205,53,.3)}.button--warning:disabled,.button--warning[disabled]{color:rgba(255,255,255,.6)}.button--warning:active{background-color:rgba(233,205,53,.2);color:#f5f5f5}.button:disabled,.button[disabled]{opacity:.5}.button__label{width:auto;height:auto}.icon-button{color:#ccc;background-color:rgba(185,125,242,.05);border-color:rgba(185,125,242,.8);display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:26.5dp;border-width:1.5dp;width:53dp;height:53dp;min-width:53dp;min-height:53dp;max-width:53dp;max-height:53dp}.icon-button svg{image-color:#ccc}.icon-button:focus,.icon-button:hover{border-color:#b97df2;background-color:rgba(185,125,242,.3)}.icon-button:active{background-color:rgba(185,125,242,.2)}.icon-button:focus,.icon-button:hover{color:#f2f2f2}.icon-button:focus svg,.icon-button:hover svg{image-color:#f2f2f2}.icon-button:active{color:#f5f5f5}.icon-button:active svg{image-color:#f5f5f5}.icon-button:disabled,.icon-button[disabled]{color:#ccc;opacity:.5}.icon-button:disabled svg,.icon-button[disabled] svg{image-color:#ccc}.icon-button svg{width:32dp;height:32dp}.icon-button--secondary{background-color:rgba(23,214,232,.05);border-color:rgba(23,214,232,.8)}.icon-button--secondary:focus,.icon-button--secondary:hover{border-color:#17d6e8;background-color:rgba(23,214,232,.3)}.icon-button--secondary:active{background-color:rgba(23,214,232,.2)}.icon-button--tertiary{background-color:rgba(242,242,242,.05);border-color:rgba(242,242,242,.8)}.icon-button--tertiary:focus,.icon-button--tertiary:hover{border-color:#f2f2f2;background-color:rgba(242,242,242,.3)}.icon-button--tertiary:active{background-color:rgba(242,242,242,.2)}.icon-button--success{background-color:rgba(69,208,67,.05);border-color:rgba(69,208,67,.8)}.icon-button--success:focus,.icon-button--success:hover{border-color:#45d043;background-color:rgba(69,208,67,.3)}.icon-button--success:active{background-color:rgba(69,208,67,.2)}.icon-button--danger{background-color:rgba(248,96,57,.05);border-color:rgba(248,96,57,.8)}.icon-button--danger:focus,.icon-button--danger:hover{border-color:#f86039;background-color:rgba(248,96,57,.3)}.icon-button--danger:active{background-color:rgba(248,96,57,.2)}.icon-button--warning{background-color:rgba(233,205,53,.05);border-color:rgba(233,205,53,.8)}.icon-button--warning:focus,.icon-button--warning:hover{border-color:#e9cd35;background-color:rgba(233,205,53,.3)}.icon-button--warning:active{background-color:rgba(233,205,53,.2)}.launcher{display:block;flex-direction:row;justify-content:space-between;position:relative;width:100%;height:100%;background-color:#08070d}.launcher__vertical-split{display:flex;position:absolute;flex-direction:column;align-items:flex-start;justify-content:space-between;top:0;right:50%;bottom:0;left:0}.launcher__vertical-split--right{align-items:flex-end;right:0;left:50%}@keyframes slide-mm-bg-over{0%{transform:translateX(100dp)}to{transform:translateX(0dp)}}.launcher__background-wrapper{display:flex;align-items:center;justify-content:flex-start;position:absolute;left:-70vw;right:-100%;top:-55vw;bottom:-50vw;transform:translateX(0dp);animation:25s cubic-out 1 slide-mm-bg-over}@keyframes fade-mm-in{0%{opacity:0}to{opacity:.1}}.launcher__background-mm{position:absolute;left:0;top:0;bottom:0;height:100%;width:auto;opacity:.1;animation:2.5s cubic-in-out 1 fade-mm-in}.launcher__title-quadrant{flex:1 1 auto;padding-top:96dp;padding-left:96dp;width:auto;height:auto}.launcher__title-quadrant--right{padding-right:96dp;padding-left:0}.launcher__content-quadrant{display:flex;position:relative;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:32dp;width:100%;height:auto;flex:1 1 100%}.menu-list-item{color:#ccc;display:flex;flex-direction:row;align-items:center;width:100%;height:auto;padding:16dp;border-radius:8dp;background-color:rgba(0,0,0,0);cursor:pointer}.menu-list-item svg{image-color:#ccc}.menu-list-item--right{align-content:flex-end;flex-direction:row-reverse}.menu-list-item--right .menu-list-item__bullet{opacity:1;margin-left:12dp}.menu-list-item--right.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item--right.menu-list-item:hover:not(:disabled,[disabled]){decorator:gradient(horizontal #7A2AC600 #DABAF714)}.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item:hover:not(:disabled,[disabled]){color:#b97df2;decorator:gradient(horizontal #7A2AC614 #DABAF700)}.menu-list-item:focus:not(:disabled,[disabled]) svg,.menu-list-item:hover:not(:disabled,[disabled]) svg{image-color:#b97df2}.menu-list-item:focus:not(:disabled,[disabled]) .menu-list-item__bullet,.menu-list-item:hover:not(:disabled,[disabled]) .menu-list-item__bullet{opacity:1}.menu-list-item:disabled,.menu-list-item[disabled]{opacity:.5;tab-index:none;cursor:default}.menu-list-item__bullet{opacity:0;margin-right:12dp}.subtitle-title{display:block;position:relative;width:auto;height:auto;flex-direction:column;align-items:flex-start;align-content:flex-start;background-color:rgba(0,0,0,0);color:#ccc;cursor:pointer;text-align:left;padding:0}.subtitle-title--right{align-content:flex-end}.subtitle-title--right,.subtitle-title--right>*{text-align:right}.subtitle-title[selected]{color:#f2f2f2;cursor:default}.subtitle-title:focus:not(:disabled,[disabled]),.subtitle-title:hover:not(:disabled,[disabled],[selected]){color:#b97df2}.subtitle-title:disabled,.subtitle-title[disabled]{opacity:.5;cursor:default;tab-index:none}.subtitle-title h3{margin-bottom:6dp}.subtitle-title h1{margin-top:6dp}.subtitle-title__disclaimer{margin-top:16dp}body{box-sizing:border-box;color:#f2f2f2;font-family:chiaro}body[disable-mouse]{pointer-events:none}.rmlui-window{opacity:1;transition:opacity .1s quadratic-in-out}.rmlui-window--hidden{opacity:0;transition:none}*,*:before,*:after{box-sizing:border-box}button{background-color:#7a2ac6}
+h1{font-size:64dp;letter-spacing:4.48dp;line-height:64dp;font-style:normal;font-weight:700}h2{font-size:48dp;letter-spacing:3.36dp;line-height:48dp;font-style:normal;font-weight:700}h3,.tab{font-size:32dp;letter-spacing:2.24dp;line-height:32dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button--large{font-size:32dp;letter-spacing:3.52dp;line-height:32dp;font-style:normal;font-weight:700}.label-md,.button,.config-option__title,.control-option__label{font-size:24dp;letter-spacing:2.64dp;line-height:24dp;font-style:normal;font-weight:700}.label-sm,.subtitle-title__disclaimer,.config-option__range-label,.config-option__list .config-option__tab-label{font-size:16dp;letter-spacing:2.24dp;line-height:16dp;font-style:normal;font-weight:700;text-transform:uppercase}body{font-size:16dp;letter-spacing:0dp;line-height:16dp;font-style:normal;font-weight:400}.prompt-font{font-family:promptfont;font-style:normal;font-weight:400;font-size:40dp;line-height:40dp}.input-viz__mappings div{font-family:promptfont;font-style:normal;font-weight:400;font-size:32dp;line-height:32dp}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.control-option__binding:not([disabled]),.centered-page__modal{nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.control-option__binding:not([disabled]),.centered-page__modal{focus:auto;tab-index:auto}h1{font-size:64dp;letter-spacing:4.48dp;line-height:64dp;font-style:normal;font-weight:700}h2{font-size:48dp;letter-spacing:3.36dp;line-height:48dp;font-style:normal;font-weight:700}h3,.tab{font-size:32dp;letter-spacing:2.24dp;line-height:32dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button--large{font-size:32dp;letter-spacing:3.52dp;line-height:32dp;font-style:normal;font-weight:700}.label-md,.button,.config-option__title,.control-option__label{font-size:24dp;letter-spacing:2.64dp;line-height:24dp;font-style:normal;font-weight:700}.label-sm,.subtitle-title__disclaimer,.config-option__range-label,.config-option__list .config-option__tab-label{font-size:16dp;letter-spacing:2.24dp;line-height:16dp;font-style:normal;font-weight:700;text-transform:uppercase}body{font-size:16dp;letter-spacing:0dp;line-height:16dp;font-style:normal;font-weight:400}.prompt-font{font-family:promptfont;font-style:normal;font-weight:400;font-size:40dp;line-height:40dp}.input-viz__mappings div{font-family:promptfont;font-style:normal;font-weight:400;font-size:32dp;line-height:32dp}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.control-option__binding:not([disabled]),.centered-page__modal{nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.control-option__binding:not([disabled]),.centered-page__modal{focus:auto;tab-index:auto}*{box-sizing:border-box}hr{display:block;background:#000;padding:1.5dp}body{font-family:chiaro;font-weight:normal;font-style:normal;font-size:20dp;color:#fff}div#window{position:relative;width:100%;height:100%;box-sizing:border-box;background-color:#121018;border-color:rgba(255,255,255,.2)}div#content{z-index:2;width:auto;height:100%;overflow:hidden auto;text-align:center}p{text-align:left}input.submit{margin-left:0}input.text,input.password{box-sizing:border-box;height:31dp;padding:11dp 10dp 0;cursor:text;text-align:left}textarea{padding:14dp 12dp 10dp;cursor:text;text-align:left}input.text,input.password,select,textarea{height:auto}table input.text{box-sizing:border-box;width:100%;margin:0;line-height:1;border-width:1.5dp;border-color:#000;background-color:#fff;font-size:15dp;decorator:none;height:auto}select{display:inline-block;text-align:left;box-sizing:border-box;vertical-align:center;padding:4dp;border-radius:5dp;background-color:#787878;width:100%}select selectvalue{height:auto}select:hover selectvalue{background-color:#969696}select selectbox,tbody{background-color:#787878}select selectbox option{width:auto;background-color:#787878}select selectbox option:nth-child(even),tr:nth-child(even){background-color:#646464}select selectbox option:checked{font-weight:bold;color:#fff}select selectbox option:hover{background:#969696}input.radio,input.checkbox{flex:0;tab-index:auto;focus:auto;nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto;width:0dp}scrollbarvertical,scrollbarhorizontal{margin:0;border:0}scrollbarvertical slidertrack,scrollbarhorizontal slidertrack{background:#dabaf7;opacity:.05}scrollbarvertical sliderbar,scrollbarhorizontal sliderbar{border-radius:5dp;background:#dabaf7;opacity:.1}scrollbarvertical sliderbar:hover:not(:active),scrollbarhorizontal sliderbar:hover:not(:active){opacity:.2}scrollbarvertical sliderbar:active,scrollbarhorizontal sliderbar:active{opacity:.3}scrollbarvertical sliderarrowdec,scrollbarvertical sliderarrowinc,scrollbarhorizontal sliderarrowdec,scrollbarhorizontal sliderarrowinc{width:0;height:0}scrollbarvertical{width:12dp}scrollbarvertical slidertrack{width:12dp}scrollbarvertical sliderbar{width:12dp}scrollbarhorizontal{height:12dp}scrollbarhorizontal slidertrack{height:12dp}scrollbarhorizontal sliderbar{height:12dp}.centered-page{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;padding:64dp;background-color:rgba(255,255,255,.1)}.centered-page__modal{display:flex;flex-direction:column;position:relative;margin:auto;flex:1 1 100%;max-width:1692.4444444444dp;width:100%;height:100%;background:rgba(8,7,13,.84);border-radius:16dp;border-color:rgba(0,0,0,.35);border-width:1.5dp}.centered-page__modal>.tabs{display:flex;flex-direction:column;position:relative;margin:auto;flex:1 1 100%;max-width:1692.4444444444dp;width:100%;height:100%}.centered-page__modal panels{flex:1 1 100%}.control-option{color:#ccc;display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;width:100%;height:auto;padding:4dp 16dp 4dp 20dp;border-radius:8dp;background-color:rgba(0,0,0,0)}.control-option svg{image-color:#ccc}.control-option:focus-visible:not(:disabled,[disabled]),.control-option:hover:not(:disabled,[disabled]){color:#f2f2f2;background-color:rgba(190,184,219,.1)}.control-option:focus-visible:not(:disabled,[disabled]) svg,.control-option:hover:not(:disabled,[disabled]) svg{image-color:#f2f2f2}.control-option:disabled,.control-option[disabled]{opacity:.5}.control-option .icon-button{flex:1 1 auto}.control-option__label{flex:2 1 300dp;height:auto;white-space:nowrap}.control-option__bindings{display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;flex:2 1 400dp;width:100%;height:56dp;padding:0 12dp 0 4dp}.control-option__binding{color:#ccc;display:flex;align-items:center;justify-content:center;margin:0 4dp;flex:1 1 100%;width:100%;height:56dp;padding:8dp;background-color:rgba(190,184,219,.1);border-color:rgba(190,184,219,.1);border-width:1.5dp;border-radius:8dp}.control-option__binding svg{image-color:#ccc}.control-option__binding:focus,.control-option__binding:hover{color:#f2f2f2;background-color:rgba(255,255,255,.1);border-color:#f2f2f2}.control-option__binding:focus svg,.control-option__binding:hover svg{image-color:#f2f2f2}.control-option__binding:active{color:#f5f5f5}.control-option__binding:active svg{image-color:#f5f5f5}.control-option__binding:disabled,.control-option__binding[disabled]{color:#ccc;opacity:.5}.control-option__binding:disabled svg,.control-option__binding[disabled] svg{image-color:#ccc}.control-option__binding:not([disabled]){cursor:pointer}.tabs tabs{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.tab{display:block;position:relative;padding:20dp 24dp;background-color:rgba(0,0,0,0);margin:0;color:rgba(255,255,255,.6);transition:color .033s linear-in-out}.tab:selected{color:#f2f2f2}.tab:selected .tab__indicator{background-color:rgba(255,255,255,.6)}.tab:selected:hover{cursor:default}.tab:hover{cursor:pointer}.tab:focus{color:#f2f2f2}.tab__indicator{position:absolute;background-color:rgba(0,0,0,0);right:0;bottom:2dp;left:0;height:2dp}.config__exit-button{position:absolute;top:8dp;right:8dp}.config__form{border-top-color:rgba(255,255,255,.1);border-top-width:1.5dp;display:flex;flex-direction:column;justify-content:space-between;flex:1 1 100%;width:100%;height:100%;border-bottom-left-radius:16dp;border-bottom-right-radius:16dp}.config__wrapper{display:flex;flex-direction:column;border-radius:0dp;flex:1 1 100%;height:100%;padding:16dp;text-align:left;background-color:rgba(0,0,0,.35)}.config__footer{border-top-color:rgba(255,255,255,.1);border-top-width:1.5dp;display:flex;justify-content:space-between;align-items:center;width:100%;padding:20dp 20dp;background-color:rgba(0,0,0,.35);border-bottom-left-radius:16dp;border-bottom-right-radius:16dp}.config__footer-left{display:flex;flex-direction:row;flex:1 1 auto}.config__footer-left>:not(:first-child){margin-left:8dp}.config__row{display:flex;flex-direction:row}.config-option{display:flex;flex-direction:column;flex:1;align-items:flex-start;justify-content:space-between;margin:8dp 0 16dp}.config-option__title{padding:0 12dp}.config-option__list{display:flex;padding:0;flex-direction:row;width:100%;align-items:flex-start;justify-content:flex-start}.config-option__list .config-option__tab-label{display:block;padding:12dp 0;margin:0 12dp;margin-right:16dp;color:rgba(255,255,255,.6);tab-index:none;transition:color .033s linear-in-out}.config-option__list .config-option__tab-label:hover{cursor:pointer}.config-option__list input.radio{visibility:visible;width:0;height:0}.config-option__list input.radio:checked+.config-option__tab-label{border-bottom:1dp;border-color:rgba(255,255,255,.3)}.config-option__list input.radio:checked+.config-option__tab-label:hover{cursor:default}.config-option__list input.radio:focus+.config-option__tab-label{color:#f2f2f2}.config-option__list input.range slidertrack{margin-top:7dp;height:2dp;background-color:rgba(255,255,255,.2)}.config-option__list input.range sliderbar{margin-left:-8dp;margin-right:-6dp;width:16dp;height:16dp;background-color:#ccc;border-radius:8dp;transition:background-color .033s linear-in-out}.config-option__list input.range sliderbar:hover{cursor:pointer;background-color:#f2f2f2}.config-option__list input.range sliderbar:active,.config-option__list input.range slidertrack:active+sliderbar{background-color:#17d6e8}.config-option__list input.range sliderarrowdec,.config-option__list input.range sliderarrowinc{display:none}.config-option__range-wrapper{margin-top:4dp;max-width:360dp}.config-option__range-label{flex:0 0 16dp;display:block;padding:0;margin:0 12dp;margin-right:16dp;color:#f2f2f2;tab-index:none}.input-config{padding:0}.input-config__horizontal-split{display:flex;position:relative;flex-direction:row;height:100%}.input-config__mappings{display:block;flex:1 1 auto;height:100%;min-width:640dp}.input-config__mappings-scroll{display:block;width:100%;max-height:100%;overflow-y:auto}.input-config__mappings-wrapper{padding:8dp}.input-config__visual-wrapper{display:block;width:auto;height:auto;max-width:1040.4444444444dp;max-height:780.3333333333dp;margin:auto 0;flex:1 1 100%}.input-config__visual-aspect{position:relative;width:100%;padding-bottom:75%;background-color:rgba(0,0,0,.35);margin:auto 0}.input-config__visual{display:flex;flex-direction:column;position:absolute;top:0;right:0;bottom:0;left:0}.input-config__visual-half{display:flex;position:relative;flex-direction:row;flex:1 1 100%;padding:6%}.input-config__visual-half--bottom{align-items:flex-end;justify-content:space-between}.input-config__visual-quarter-left{display:flex;flex:1 1 auto;width:auto;align-items:flex-start;justify-content:flex-start}.input-config__visual-quarter-right{display:flex;flex:1 1 100%;align-items:flex-start;justify-content:flex-end}.input-config__visual-stick-wrapper{display:flex;position:absolute;align-items:center;justify-content:center;top:0;right:0;bottom:0;left:0}.input-config__visual-stick{display:flex;position:relative;align-items:center;justify-content:center;width:200dp;height:200dp;border-radius:100dp;background-color:rgba(255,255,255,.05)}.input-viz{position:relative;display:flex;align-items:center;justify-content:center}.input-viz svg{position:absolute;top:0;right:0;left:0;bottom:0}[cur-input=NONE] .input-viz[visual-input]{opacity:1}.input-viz[visual-input=A]{opacity:.5}[cur-input=A] .input-viz[visual-input=A]{opacity:1}.input-viz[visual-input=B]{opacity:.5}[cur-input=B] .input-viz[visual-input=B]{opacity:1}.input-viz[visual-input=Z]{opacity:.5}[cur-input=Z] .input-viz[visual-input=Z]{opacity:1}.input-viz[visual-input=START]{opacity:.5}[cur-input=START] .input-viz[visual-input=START]{opacity:1}.input-viz[visual-input=DPAD_UP]{opacity:.5}[cur-input=DPAD_UP] .input-viz[visual-input=DPAD_UP]{opacity:1}.input-viz[visual-input=DPAD_DOWN]{opacity:.5}[cur-input=DPAD_DOWN] .input-viz[visual-input=DPAD_DOWN]{opacity:1}.input-viz[visual-input=DPAD_LEFT]{opacity:.5}[cur-input=DPAD_LEFT] .input-viz[visual-input=DPAD_LEFT]{opacity:1}.input-viz[visual-input=DPAD_RIGHT]{opacity:.5}[cur-input=DPAD_RIGHT] .input-viz[visual-input=DPAD_RIGHT]{opacity:1}.input-viz[visual-input=L]{opacity:.5}[cur-input=L] .input-viz[visual-input=L]{opacity:1}.input-viz[visual-input=R]{opacity:.5}[cur-input=R] .input-viz[visual-input=R]{opacity:1}.input-viz[visual-input=C_UP]{opacity:.5}[cur-input=C_UP] .input-viz[visual-input=C_UP]{opacity:1}.input-viz[visual-input=C_DOWN]{opacity:.5}[cur-input=C_DOWN] .input-viz[visual-input=C_DOWN]{opacity:1}.input-viz[visual-input=C_LEFT]{opacity:.5}[cur-input=C_LEFT] .input-viz[visual-input=C_LEFT]{opacity:1}.input-viz[visual-input=C_RIGHT]{opacity:.5}[cur-input=C_RIGHT] .input-viz[visual-input=C_RIGHT]{opacity:1}.input-viz[visual-input=X_AXIS_NEG]{opacity:.5}[cur-input=X_AXIS_NEG] .input-viz[visual-input=X_AXIS_NEG]{opacity:1}.input-viz[visual-input=X_AXIS_POS]{opacity:.5}[cur-input=X_AXIS_POS] .input-viz[visual-input=X_AXIS_POS]{opacity:1}.input-viz[visual-input=Y_AXIS_NEG]{opacity:.5}[cur-input=Y_AXIS_NEG] .input-viz[visual-input=Y_AXIS_NEG]{opacity:1}.input-viz[visual-input=Y_AXIS_POS]{opacity:.5}[cur-input=Y_AXIS_POS] .input-viz[visual-input=Y_AXIS_POS]{opacity:1}.input-viz__button{color:#f2f2f2}.input-viz__button svg{image-color:#f2f2f2}.input-viz__button--sm{width:64dp;height:64dp}.input-viz__button--sm svg{width:64dp;height:64dp}.input-viz__button--md{width:76dp;height:76dp}.input-viz__button--md svg{width:76dp;height:76dp}.input-viz__button--lg{width:84dp;height:84dp}.input-viz__button--lg svg{width:84dp;height:84dp}.input-viz__button--C svg{image-color:#e9cd35}.input-viz__button--A svg{image-color:#33f}.input-viz__button--B svg{image-color:#45d043}.input-viz__Z{width:136dp;height:136dp}.input-viz__Z svg{image-color:#e9cd35}.input-viz__Z svg{width:136dp;height:136dp}.input-viz__R{width:96dp;height:96dp}.input-viz__R svg{image-color:#fff}.input-viz__R svg{width:96dp;height:96dp}.input-viz__L{width:136dp;height:136dp}.input-viz__L svg{image-color:#17d6e8}.input-viz__L svg{width:136dp;height:136dp}.input-config__c-buttons{position:relative;width:208dp;height:132dp}.input-config__c-buttons-lr,.input-config__c-buttons-du{display:flex;position:absolute;top:0;right:0;left:0;bottom:0}.input-config__c-buttons-lr{flex-direction:row;align-items:flex-start;justify-content:space-between}.input-config__c-buttons-du{flex-direction:column-reverse;align-items:center;justify-content:space-between}.input-config__c-buttons .input-viz[visual-input=C_UP]{margin-top:-32dp}.button{background-color:rgba(185,125,242,.05);color:#ccc;border-color:rgba(185,125,242,.8);display:block;padding:23dp;border-radius:12dp;border-width:1.5dp;width:auto;height:auto}.button:focus{color:#f2f2f2;border-color:#b97df2;background-color:rgba(185,125,242,.3)}.button:disabled,.button[disabled]{color:rgba(255,255,255,.6)}.button:active{background-color:rgba(185,125,242,.2);color:#f5f5f5}.button--secondary{background-color:rgba(23,214,232,.05);color:#ccc;border-color:rgba(23,214,232,.8)}.button--secondary:focus{color:#f2f2f2;border-color:#17d6e8;background-color:rgba(23,214,232,.3)}.button--secondary:disabled,.button--secondary[disabled]{color:rgba(255,255,255,.6)}.button--secondary:active{background-color:rgba(23,214,232,.2);color:#f5f5f5}.button--tertiary{background-color:rgba(242,242,242,.05);color:#ccc;border-color:rgba(242,242,242,.8)}.button--tertiary:focus{color:#f2f2f2;border-color:#f2f2f2;background-color:rgba(242,242,242,.3)}.button--tertiary:disabled,.button--tertiary[disabled]{color:rgba(255,255,255,.6)}.button--tertiary:active{background-color:rgba(242,242,242,.2);color:#f5f5f5}.button--success{background-color:rgba(69,208,67,.05);color:#ccc;border-color:rgba(69,208,67,.8)}.button--success:focus{color:#f2f2f2;border-color:#45d043;background-color:rgba(69,208,67,.3)}.button--success:disabled,.button--success[disabled]{color:rgba(255,255,255,.6)}.button--success:active{background-color:rgba(69,208,67,.2);color:#f5f5f5}.button--error{background-color:rgba(248,96,57,.05);color:#ccc;border-color:rgba(248,96,57,.8)}.button--error:focus{color:#f2f2f2;border-color:#f86039;background-color:rgba(248,96,57,.3)}.button--error:disabled,.button--error[disabled]{color:rgba(255,255,255,.6)}.button--error:active{background-color:rgba(248,96,57,.2);color:#f5f5f5}.button--warning{background-color:rgba(233,205,53,.05);color:#ccc;border-color:rgba(233,205,53,.8)}.button--warning:focus{color:#f2f2f2;border-color:#e9cd35;background-color:rgba(233,205,53,.3)}.button--warning:disabled,.button--warning[disabled]{color:rgba(255,255,255,.6)}.button--warning:active{background-color:rgba(233,205,53,.2);color:#f5f5f5}.button:not([disabled]){cursor:pointer}.button:disabled,.button[disabled]{opacity:.5}.button__label{width:auto;height:auto}.icon-button{color:#ccc;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:26.5dp;border-width:1.5dp;border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0);width:53dp;height:53dp;min-width:53dp;min-height:53dp;max-width:53dp;max-height:53dp}.icon-button svg{image-color:#ccc}.icon-button:focus,.icon-button:hover{color:#f2f2f2;background-color:rgba(255,255,255,.2)}.icon-button:focus svg,.icon-button:hover svg{image-color:#f2f2f2}.icon-button:active{color:#f5f5f5;background-color:rgba(255,255,255,.1)}.icon-button:active svg{image-color:#f5f5f5}.icon-button:disabled,.icon-button[disabled]{color:#ccc;opacity:.5}.icon-button:disabled svg,.icon-button[disabled] svg{image-color:#ccc}.icon-button:not([disabled]){cursor:pointer}.icon-button svg{width:32dp;height:32dp}.icon-button--primary{background-color:rgba(185,125,242,.05);border-color:rgba(185,125,242,.8)}.icon-button--primary:focus,.icon-button--primary:hover{border-color:#b97df2;background-color:rgba(185,125,242,.3)}.icon-button--primary:active{background-color:rgba(185,125,242,.2)}.icon-button--secondary{background-color:rgba(23,214,232,.05);border-color:rgba(23,214,232,.8)}.icon-button--secondary:focus,.icon-button--secondary:hover{border-color:#17d6e8;background-color:rgba(23,214,232,.3)}.icon-button--secondary:active{background-color:rgba(23,214,232,.2)}.icon-button--tertiary{background-color:rgba(242,242,242,.05);border-color:rgba(242,242,242,.8)}.icon-button--tertiary:focus,.icon-button--tertiary:hover{border-color:#f2f2f2;background-color:rgba(242,242,242,.3)}.icon-button--tertiary:active{background-color:rgba(242,242,242,.2)}.icon-button--success{background-color:rgba(69,208,67,.05);border-color:rgba(69,208,67,.8)}.icon-button--success:focus,.icon-button--success:hover{border-color:#45d043;background-color:rgba(69,208,67,.3)}.icon-button--success:active{background-color:rgba(69,208,67,.2)}.icon-button--danger{background-color:rgba(248,96,57,.05);border-color:rgba(248,96,57,.8)}.icon-button--danger:focus,.icon-button--danger:hover{border-color:#f86039;background-color:rgba(248,96,57,.3)}.icon-button--danger:active{background-color:rgba(248,96,57,.2)}.icon-button--warning{background-color:rgba(233,205,53,.05);border-color:rgba(233,205,53,.8)}.icon-button--warning:focus,.icon-button--warning:hover{border-color:#e9cd35;background-color:rgba(233,205,53,.3)}.icon-button--warning:active{background-color:rgba(233,205,53,.2)}.launcher{display:block;flex-direction:row;justify-content:space-between;position:relative;width:100%;height:100%;background-color:#08070d}.launcher__vertical-split{display:flex;position:absolute;flex-direction:column;align-items:flex-start;justify-content:space-between;top:0;right:50%;bottom:0;left:0}.launcher__vertical-split--right{align-items:flex-end;right:0;left:50%}@keyframes slide-mm-bg-over{0%{transform:translateX(100dp)}to{transform:translateX(0dp)}}.launcher__background-wrapper{display:flex;align-items:center;justify-content:flex-start;position:absolute;left:-70vw;right:-100%;top:-55vw;bottom:-50vw;transform:translateX(0dp);animation:25s cubic-out 1 slide-mm-bg-over}@keyframes fade-mm-in{0%{opacity:0}to{opacity:.1}}.launcher__background-mm{position:absolute;left:0;top:0;bottom:0;height:100%;width:auto;opacity:.1;animation:2.5s cubic-in-out 1 fade-mm-in}.launcher__title-quadrant{flex:1 1 auto;padding-top:96dp;padding-left:96dp;width:auto;height:auto}.launcher__title-quadrant--right{padding-right:96dp;padding-left:0}.launcher__content-quadrant{display:flex;position:relative;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:32dp;width:100%;height:auto;flex:1 1 100%}.menu-list-item{color:#ccc;display:flex;flex-direction:row;align-items:center;width:100%;height:auto;padding:16dp;border-radius:8dp;background-color:rgba(0,0,0,0);cursor:pointer}.menu-list-item svg{image-color:#ccc}.menu-list-item--right{align-content:flex-end;flex-direction:row-reverse}.menu-list-item--right .menu-list-item__bullet{opacity:1;margin-left:12dp}.menu-list-item--right.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item--right.menu-list-item:hover:not(:disabled,[disabled]){decorator:gradient(horizontal #7A2AC600 #DABAF714)}.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item:hover:not(:disabled,[disabled]){color:#b97df2;decorator:gradient(horizontal #7A2AC614 #DABAF700)}.menu-list-item:focus:not(:disabled,[disabled]) svg,.menu-list-item:hover:not(:disabled,[disabled]) svg{image-color:#b97df2}.menu-list-item:focus:not(:disabled,[disabled]) .menu-list-item__bullet,.menu-list-item:hover:not(:disabled,[disabled]) .menu-list-item__bullet{opacity:1}.menu-list-item:disabled,.menu-list-item[disabled]{opacity:.5;tab-index:none;cursor:default}.menu-list-item__bullet{opacity:0;margin-right:12dp}.subtitle-title{display:block;position:relative;width:auto;height:auto;flex-direction:column;align-items:flex-start;align-content:flex-start;background-color:rgba(0,0,0,0);color:#ccc;cursor:pointer;text-align:left;padding:0}.subtitle-title--right{align-content:flex-end}.subtitle-title--right,.subtitle-title--right>*{text-align:right}.subtitle-title[selected]{color:#f2f2f2;cursor:default}.subtitle-title:focus:not(:disabled,[disabled]),.subtitle-title:hover:not(:disabled,[disabled],[selected]){color:#b97df2}.subtitle-title:disabled,.subtitle-title[disabled]{opacity:.5;cursor:default;tab-index:none}.subtitle-title h3{margin-bottom:6dp}.subtitle-title h1{margin-top:6dp}.subtitle-title__disclaimer{margin-top:16dp}body{box-sizing:border-box;color:#f2f2f2;font-family:chiaro}body[disable-mouse]{pointer-events:none}.rmlui-window{opacity:1;transition:opacity .1s quadratic-in-out}.rmlui-window--hidden{opacity:0;transition:none}*,*:before,*:after{box-sizing:border-box}button{background-color:#7a2ac6}
diff --git a/assets/scss/styles/components/Button.scss b/assets/scss/styles/components/Button.scss
index fd9c011..cae489a 100644
--- a/assets/scss/styles/components/Button.scss
+++ b/assets/scss/styles/components/Button.scss
@@ -22,7 +22,7 @@
 }
 
 .button {
-    @extend %label-lg;
+    @extend %label-md;
     @include create-button-variation($color-primary);
 
     display: block;
@@ -39,6 +39,10 @@
     //     @include create-button-variation($color-primary);
     // }
 
+    &--large {
+        @extend %label-lg;
+    }
+
     &--secondary {
         @include create-button-variation($color-secondary);
     }
@@ -61,6 +65,7 @@
 
     &:not([disabled]) {
         @extend %nav-all;
+        cursor: pointer;
     }
 
     &:disabled,&[disabled] {
diff --git a/assets/scss/styles/components/CenteredPage.scss b/assets/scss/styles/components/CenteredPage.scss
index a2561da..0c62479 100644
--- a/assets/scss/styles/components/CenteredPage.scss
+++ b/assets/scss/styles/components/CenteredPage.scss
@@ -26,8 +26,19 @@
     border-radius: $border-radius-modal;
     border-color: $color-bg-shadow;
     border-width: $border-width-thickness;
-}
 
-.centered-page__modal panels {
-    flex: 1 1 100%;
+    > .tabs {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        margin: auto;
+        flex: 1 1 100%;
+        max-width: space($base-modal-max-width);
+        width: 100%;
+        height: 100%;
+    }
+
+    panels {
+        flex: 1 1 100%;
+    }
 }
diff --git a/assets/scss/styles/components/Config.scss b/assets/scss/styles/components/Config.scss
index 281851a..7fc8b04 100644
--- a/assets/scss/styles/components/Config.scss
+++ b/assets/scss/styles/components/Config.scss
@@ -1,4 +1,10 @@
 
+.config__exit-button {
+    position: absolute;
+    top: space(8);
+    right: space(8);
+}
+
 .config__form {
     @include border-top($color-border-soft);
     display: flex;
@@ -25,7 +31,7 @@
 .config__footer {
     @include border-top($color-border-soft);
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
     align-items: center;
     width: 100%;
     padding: space(20) space(20);
@@ -34,6 +40,16 @@
     border-bottom-right-radius: $border-radius-modal;
 }
 
+.config__footer-left {
+    display: flex;
+    flex-direction: row;
+    flex: 1 1 auto;
+
+    > :not(:first-child) {
+        margin-left: space(8);
+    }
+}
+
 .config__row {
     display: flex;
     flex-direction: row;
diff --git a/assets/scss/styles/components/ControlOption.scss b/assets/scss/styles/components/ControlOption.scss
index 90358b7..5c82c05 100644
--- a/assets/scss/styles/components/ControlOption.scss
+++ b/assets/scss/styles/components/ControlOption.scss
@@ -9,7 +9,7 @@
     justify-content: space-between;
     width: 100%;
     height: auto;
-    padding: space(8) space(16) space(8) space(20);
+    padding: space(4) space(16) space(4) space(20);
     border-radius: $border-radius-sm;
     background-color: rgba(0, 0, 0, 0);
 
@@ -43,7 +43,7 @@
     justify-content: space-between;
     flex: 2 1 space(400);
     width: 100%;
-    height: space(72);
+    height: space(56);
     padding: 0 space(12) 0 space(4);
 }
 
@@ -56,7 +56,7 @@
 
     flex: 1 1 100%;
     width: 100%;
-    height: space(72);
+    height: space(56);
     padding: space(8);
     background-color: $color-bg-overlay;
     border-color: $color-bg-overlay;
@@ -80,5 +80,6 @@
 
     &:not([disabled]) {
         @extend %nav-all;
+        cursor: pointer;
     }
 }
diff --git a/assets/scss/styles/components/IconButton.scss b/assets/scss/styles/components/IconButton.scss
index f935070..1c1f1ef 100644
--- a/assets/scss/styles/components/IconButton.scss
+++ b/assets/scss/styles/components/IconButton.scss
@@ -1,5 +1,11 @@
 @use 'sass:color';
-
+/*
+    <button
+        class="icon-button icon-button--danger"
+    >
+        <svg src="icons/Trash.svg" />
+    </button>
+*/
 @mixin create-icon-button-variation($base-col) {
     background-color: rgba($base-col, 0.05);
     border-color: rgba($base-col, 0.8);
@@ -18,7 +24,6 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
 
 .icon-button {
     @include set-color($color-text-dim);
-    @include create-icon-button-variation($color-primary);
 
     display: flex;
     align-items: center;
@@ -27,6 +32,8 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
 
     border-radius: space($icon-button-size * 0.5);
     border-width: $border-width-thickness;
+    border-color: $color-transparent;
+    background-color: $color-transparent;
     width: space($icon-button-size);
     height: space($icon-button-size);
     min-width: space($icon-button-size);
@@ -36,10 +43,12 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
 
     &:focus, &:hover {
         @include set-color($color-text);
+        background-color: $color-border;
     }
 
     &:active {
         @include set-color(color.scale($color-text, $lightness: 20%));
+        background-color: $color-border-soft;
     }
 
     &:disabled,&[disabled] {
@@ -49,6 +58,7 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
 
     &:not([disabled]) {
         @extend %nav-all;
+        cursor: pointer;
     }
 
     svg {
@@ -56,10 +66,9 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
         height: space(32);
     }
 
-    // Setting it by default for convenience
-    // &--primary {
-    //     @include create-icon-button-variation($color-primary);
-    // }
+    &--primary {
+        @include create-icon-button-variation($color-primary);
+    }
 
     &--secondary {
         @include create-icon-button-variation($color-secondary);
diff --git a/assets/scss/styles/components/InputConfig.scss b/assets/scss/styles/components/InputConfig.scss
index 6480af2..455f5cb 100644
--- a/assets/scss/styles/components/InputConfig.scss
+++ b/assets/scss/styles/components/InputConfig.scss
@@ -47,7 +47,7 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
     position: relative;
     width: 100%;
     padding-bottom: 75%;
-    background-color: $color-secondary-a5;
+    background-color: $color-bg-shadow;
     margin: auto 0;
 }
 
@@ -61,8 +61,74 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
     left: 0;
 }
 
+.input-config__visual-half {
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    flex: 1 1 100%;
+    padding: 6%;
+
+    &--bottom {
+        align-items: flex-end;
+        justify-content: space-between;
+    }
+}
+
+.input-config__visual-quarter-left {
+    display: flex;
+    flex: 1 1 auto;
+    width: auto;
+    align-items: flex-start;
+    justify-content: flex-start;
+
+}
+
+.input-config__visual-quarter-right {
+    display: flex;
+    flex: 1 1 100%;
+    align-items: flex-start;
+    justify-content: flex-end;
+}
+
+.input-config__visual-stick-wrapper {
+    display: flex;
+    position: absolute;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.input-config__visual-stick {
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    width: space(200);
+    height: space(200);
+    border-radius: space(100);
+    background-color: $color-white-a5;
+}
+
 .input-viz {
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+    }
+
+    &__mappings div {
+        @extend %prompt-font-sm;
+    }
 }
 
 $all-inputs:
@@ -142,3 +208,46 @@ $all-inputs:
     @include set-svgs-color($color-warning);
     @include set-sizes(136);
 }
+
+.input-viz__R {
+    @include set-svgs-color($color-white);
+    @include set-sizes(96);
+}
+
+.input-viz__L {
+    @include set-svgs-color($color-secondary);
+    @include set-sizes(136);
+}
+
+.input-config__c-buttons {
+    position: relative;
+    width: space(76+76+56);
+    height: space(76+56);
+
+    &-lr, &-du {
+        display: flex;
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+    }
+
+    &-lr {
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: space-between;
+    }
+
+    &-du {
+        flex-direction: column-reverse;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .input-viz {
+        &[visual-input="C_UP"] {
+            margin-top: space(-32);
+        }
+    }
+}
diff --git a/assets/scss/styles/components/Tabs.scss b/assets/scss/styles/components/Tabs.scss
index 249ef4f..9474998 100644
--- a/assets/scss/styles/components/Tabs.scss
+++ b/assets/scss/styles/components/Tabs.scss
@@ -15,7 +15,7 @@
 
 .tab {
     @extend %nav-all;
-    @extend %label-md;
+    @extend %header-3;
     display: block;
     position: relative;
     padding: space(20) space(24);
diff --git a/assets/scss/styles/mixins/_typography.scss b/assets/scss/styles/mixins/_typography.scss
index 2ab6240..107c851 100644
--- a/assets/scss/styles/mixins/_typography.scss
+++ b/assets/scss/styles/mixins/_typography.scss
@@ -58,3 +58,11 @@ $font-stack: chiaro;
     font-size: space(40);
     line-height: space(40);
 }
+
+%prompt-font-sm {
+    font-family: promptfont;
+    font-style: normal;
+    font-weight: 400;
+    font-size: space(32);
+    line-height: space(32);
+}
