From 8dcca10fed5b6367dd319df36d60d39a819c917b Mon Sep 17 00:00:00 2001
From: thecozies <79979276+thecozies@users.noreply.github.com>
Date: Tue, 27 Feb 2024 09:13:16 -0600
Subject: [PATCH] split config pages to separated templates

---
 assets/config_menu.rml                       | 343 +------------------
 assets/config_menu/controls.rml              | 253 ++++++++++++++
 assets/config_menu/debug.rml                 |  54 +++
 assets/config_menu/graphics.rml              |  90 +++++
 assets/config_menu/sound.rml                 |  12 +
 assets/icons/Arrow.svg                       |   5 +
 assets/recomp.rcss                           |   2 +-
 assets/scss/styles/global.scss               |   1 +
 assets/scss/styles/globals/_old.scss         | 149 ++++----
 assets/scss/styles/pages/_pages.scss         |   1 +
 assets/scss/styles/pages/config/_config.scss |   1 +
 assets/scss/styles/pages/config/debug.scss   | 140 ++++++++
 12 files changed, 653 insertions(+), 398 deletions(-)
 create mode 100644 assets/config_menu/controls.rml
 create mode 100644 assets/config_menu/debug.rml
 create mode 100644 assets/config_menu/graphics.rml
 create mode 100644 assets/config_menu/sound.rml
 create mode 100644 assets/icons/Arrow.svg
 create mode 100644 assets/scss/styles/pages/_pages.scss
 create mode 100644 assets/scss/styles/pages/config/_config.scss
 create mode 100644 assets/scss/styles/pages/config/debug.scss
diff --git a/assets/config_menu.rml b/assets/config_menu.rml
index 1c45eb1..6387f7b 100644
--- a/assets/config_menu.rml
+++ b/assets/config_menu.rml
@@ -26,6 +26,10 @@
 			nav-down:#res_auto;
 		}
 	</style>
+	<link type="text/template" href="config_menu/graphics.rml" />
+	<link type="text/template" href="config_menu/controls.rml" />
+	<link type="text/template" href="config_menu/sound.rml" />
+	<link type="text/template" href="config_menu/debug.rml" />
 </head>
 <body class="window">
 	<!-- <handle move_target="#document"> -->
@@ -38,347 +42,28 @@
 							<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__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__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>
-							</form>
+							<template src="config-menu__graphics" />
 						</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" data-attr-cur-binding-slot="active_binding_slot">
-								<div class="config__header">
-									<div class="config__header-left">
-										<button
-											class="toggle"
-											data-class-toggle--checked="input_device_is_keyboard"
-											onclick="toggle_input_device"
-										>
-											<div class="toggle__border" />
-											<div class="toggle__floater" />
-											<div class="toggle__icons">
-												<div class="toggle__icon toggle__icon--left"><div>␼</div></div>
-												<div class="toggle__icon toggle__icon--right"><div>␽</div></div>
-											</div>
-										</button>
-									</div>
-									<div>
-										<button
-											class="button button--warning"
-										>
-											<div class="button__label">Reset to defaults</div>
-										</button>
-									</div>
-								</div>
-								<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)"
-														data-class-control-option--active="get_input_enum_name(i)==cur_input_row"
-													>
-														<label
-															class="control-option__label"
-														>{{get_input_name(i)}}</label>
-														<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"
-																data-attr-bind-slot="j"
-															>
-																<div class="control-option__binding-recording">
-																	<div class="control-option__binding-circle" />
-																	<div class="control-option__binding-edge">
-																		<svg class="control-option__binding-edge-svg" src="icons/RecordBorder.svg" />
-																	</div>
-																</div>
-																<div class="control-option__binding-icon">{{cur_binding}}</div>
-															</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">
-													<!-- stick only -->
-													<div class="input-config__visual-stick-wrapper">
-														<div class="input-config__visual-stick">
-															<div>stick!!</div>
-														</div>
-													</div>
-													<!-- top half -->
-													<div class="input-config__visual-half">
-														<div class="input-config__visual-quarter-left">
-															<div
-																class="input-viz input-viz__dpad"
-																visual-input="DPAD_UP DPAD_DOWN DPAD_LEFT DPAD_RIGHT"
-															>
-																<svg src="icons/VizMap/DPad.svg" />
-																<div class="input-viz__dpad-split input-viz__dpad-split--vertical">
-																	<div class="input-viz input-viz__mappings" visual-input="DPAD_UP">
-																		<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--up" src="icons/VizMap/DPadArrow.svg" />
-																		<div
-																			class="input-config__visual-mapping"
-																			data-for="cur_binding, i : inputs.DPAD_UP"
-																		>
-																			<div>{{cur_binding}}</div>
-																		</div>
-																	</div>
-																	<div class="input-viz__dpad-divider" />
-																	<div class="input-viz input-viz__mappings" visual-input="DPAD_DOWN">
-																		<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--down" src="icons/VizMap/DPadArrow.svg" />
-																		<div
-																			class="input-config__visual-mapping"
-																			data-for="cur_binding, i : inputs.DPAD_DOWN"
-																		>
-																			<div>{{cur_binding}}</div>
-																		</div>
-																	</div>
-																</div>
-																<div class="input-viz__dpad-split input-viz__dpad-split--horizontal">
-																	<div class="input-viz input-viz__mappings" visual-input="DPAD_LEFT">
-																		<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--left" src="icons/VizMap/DPadArrow.svg" />
-																		<div
-																			class="input-config__visual-mapping"
-																			data-for="cur_binding, i : inputs.DPAD_LEFT"
-																		>
-																			<div>{{cur_binding}}</div>
-																		</div>
-																	</div>
-																	<div class="input-viz__dpad-divider" />
-																	<div class="input-viz input-viz__mappings" visual-input="DPAD_RIGHT">
-																		<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--right" src="icons/VizMap/DPadArrow.svg" />
-																		<div
-																			class="input-config__visual-mapping"
-																			data-for="cur_binding, i : inputs.DPAD_RIGHT"
-																		>
-																			<div>{{cur_binding}}</div>
-																		</div>
-																	</div>
-																</div>
-															</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-viz input-viz__Z"
-															visual-input="Z"
-														>
-															<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>
-											</div>
-										</div>
-									</div>
-								</div>
-							</form>
+							<template src="config-menu__controls" />
 						</panel>
 						<tab class="tab">
 							<div>Sound</div>
 							<div class="tab__indicator"></div>
 						</tab>
 						<panel class="config" >
+							<template src="config-menu__sound" />
+						</panel>
+						<tab class="tab">
+							<div>Debug</div>
+							<div class="tab__indicator"></div>
+						</tab>
+						<panel class="config" >
+							<template src="config-menu__debug" />
 						</panel>
 					</tabset>
 					<!-- Close button absolutely positioned on top right of modal -->
diff --git a/assets/config_menu/controls.rml b/assets/config_menu/controls.rml
new file mode 100644
index 0000000..d4c8a92
--- /dev/null
+++ b/assets/config_menu/controls.rml
@@ -0,0 +1,253 @@
+<template name="config-menu__controls">
+    <head>
+    </head>
+    <body>
+        <form class="config__form" data-attr-cur-input="cur_input_row" data-attr-cur-binding-slot="active_binding_slot">
+            <div class="config__header">
+                <div class="config__header-left">
+                    <button
+                        class="toggle"
+                        data-class-toggle--checked="input_device_is_keyboard"
+                        onclick="toggle_input_device"
+                    >
+                        <div class="toggle__border" />
+                        <div class="toggle__floater" />
+                        <div class="toggle__icons">
+                            <div class="toggle__icon toggle__icon--left"><div>␼</div></div>
+                            <div class="toggle__icon toggle__icon--right"><div>␽</div></div>
+                        </div>
+                    </button>
+                </div>
+                <div>
+                    <button
+                        class="button button--warning"
+                    >
+                        <div class="button__label">Reset to defaults</div>
+                    </button>
+                </div>
+            </div>
+            <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)"
+                                    data-class-control-option--active="get_input_enum_name(i)==cur_input_row"
+                                >
+                                    <label
+                                        class="control-option__label"
+                                    >{{get_input_name(i)}}</label>
+                                    <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"
+                                            data-attr-bind-slot="j"
+                                        >
+                                            <div class="control-option__binding-recording">
+                                                <div class="control-option__binding-circle" />
+                                                <div class="control-option__binding-edge">
+                                                    <svg class="control-option__binding-edge-svg" src="icons/RecordBorder.svg" />
+                                                </div>
+                                            </div>
+                                            <div class="control-option__binding-icon">{{cur_binding}}</div>
+                                        </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">
+                                <!-- stick only -->
+                                <div class="input-config__visual-stick-wrapper">
+                                    <div class="input-config__visual-stick">
+                                        <div>stick!!</div>
+                                    </div>
+                                </div>
+                                <!-- top half -->
+                                <div class="input-config__visual-half">
+                                    <div class="input-config__visual-quarter-left">
+                                        <div
+                                            class="input-viz input-viz__dpad"
+                                            visual-input="DPAD_UP DPAD_DOWN DPAD_LEFT DPAD_RIGHT"
+                                        >
+                                            <svg src="icons/VizMap/DPad.svg" />
+                                            <div class="input-viz__dpad-split input-viz__dpad-split--vertical">
+                                                <div class="input-viz input-viz__mappings" visual-input="DPAD_UP">
+                                                    <svg class="input-viz__dpad-arrow input-viz__dpad-arrow--up" src="icons/VizMap/DPadArrow.svg" />
+                                                    <div
+                                                        class="input-config__visual-mapping"
+                                                        data-for="cur_binding, i : inputs.DPAD_UP"
+                                                    >
+                                                        <div>{{cur_binding}}</div>
+                                                    </div>
+                                                </div>
+                                                <div class="input-viz__dpad-divider" />
+                                                <div class="input-viz input-viz__mappings" visual-input="DPAD_DOWN">
+                                                    <svg class="input-viz__dpad-arrow input-viz__dpad-arrow--down" src="icons/VizMap/DPadArrow.svg" />
+                                                    <div
+                                                        class="input-config__visual-mapping"
+                                                        data-for="cur_binding, i : inputs.DPAD_DOWN"
+                                                    >
+                                                        <div>{{cur_binding}}</div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="input-viz__dpad-split input-viz__dpad-split--horizontal">
+                                                <div class="input-viz input-viz__mappings" visual-input="DPAD_LEFT">
+                                                    <svg class="input-viz__dpad-arrow input-viz__dpad-arrow--left" src="icons/VizMap/DPadArrow.svg" />
+                                                    <div
+                                                        class="input-config__visual-mapping"
+                                                        data-for="cur_binding, i : inputs.DPAD_LEFT"
+                                                    >
+                                                        <div>{{cur_binding}}</div>
+                                                    </div>
+                                                </div>
+                                                <div class="input-viz__dpad-divider" />
+                                                <div class="input-viz input-viz__mappings" visual-input="DPAD_RIGHT">
+                                                    <svg class="input-viz__dpad-arrow input-viz__dpad-arrow--right" src="icons/VizMap/DPadArrow.svg" />
+                                                    <div
+                                                        class="input-config__visual-mapping"
+                                                        data-for="cur_binding, i : inputs.DPAD_RIGHT"
+                                                    >
+                                                        <div>{{cur_binding}}</div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </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-viz input-viz__Z"
+                                        visual-input="Z"
+                                    >
+                                        <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>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </body>
+</template>
+    
\ No newline at end of file
diff --git a/assets/config_menu/debug.rml b/assets/config_menu/debug.rml
new file mode 100644
index 0000000..801bf2c
--- /dev/null
+++ b/assets/config_menu/debug.rml
@@ -0,0 +1,54 @@
+<template name="config-menu__debug">
+    <head>
+    </head>
+    <body>
+        <form class="config__form">
+            <div class="config__wrapper">
+                <div class="config-debug">
+                    <div class="config-debug__scroll">
+                        <div class="config-debug-option">
+                            <label
+                                class="config-debug-option__label"
+                            >Warp</label>
+                            <div class="config-debug__option-controls">
+                                <label class="config-debug__select-wrapper">
+                                    <div class="config-debug__select-label"><div>Region</div></div>
+                                    <select>
+                                        <option selected>First</option>
+                                        <option>Second</option>
+                                        <option>Third</option>
+                                        <option>Fourth</option>
+                                    </select>
+                                </label>
+                                <label class="config-debug__select-wrapper">
+                                    <div class="config-debug__select-label"><div>Scene</div></div>
+                                    <select>
+                                        <option selected>First</option>
+                                        <option>Second</option>
+                                        <option>Third</option>
+                                        <option>Fourth</option>
+                                    </select>
+                                </label>
+                                <label class="config-debug__select-wrapper">
+                                    <div class="config-debug__select-label"><div>Entrance</div></div>
+                                    <select>
+                                        <option>First</option>
+                                        <option>Second</option>
+                                        <option>Third</option>
+                                        <option>Fourth</option>
+                                    </select>
+                                </label>
+                            </div>
+                            <button
+                                class="icon-button icon-button--success"
+                            >
+                                <svg src="icons/Arrow.svg" />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </body>
+</template>
+    
\ No newline at end of file
diff --git a/assets/config_menu/graphics.rml b/assets/config_menu/graphics.rml
new file mode 100644
index 0000000..9057c30
--- /dev/null
+++ b/assets/config_menu/graphics.rml
@@ -0,0 +1,90 @@
+<template name="config-menu__graphics">
+    <head>
+    </head>
+    <body>
+        <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__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__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>
+        </form>
+    </body>
+</template>
+    
\ No newline at end of file
diff --git a/assets/config_menu/sound.rml b/assets/config_menu/sound.rml
new file mode 100644
index 0000000..db0b161
--- /dev/null
+++ b/assets/config_menu/sound.rml
@@ -0,0 +1,12 @@
+<template name="config-menu__sound">
+    <head>
+    </head>
+    <body>
+        <form class="config__form">
+            <div class="config__wrapper">
+                Sound options!!!!!
+            </div>
+        </form>
+    </body>
+</template>
+    
\ No newline at end of file
diff --git a/assets/icons/Arrow.svg b/assets/icons/Arrow.svg
new file mode 100644
index 0000000..f1c5219
--- /dev/null
+++ b/assets/icons/Arrow.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="M28 16L16 28" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round"/>
+    <path d="M16 4L28 16" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round"/>
+    <path d="M4 16H28" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round"/>
+</svg>
diff --git a/assets/recomp.rcss b/assets/recomp.rcss
index 6c22011..eb5723a 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,.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}.toggle__icon{font-family:promptfont;font-style:normal;font-weight:400;font-size:56dp;line-height:56dp}.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}.toggle,.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}.toggle,.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}.toggle__icon{font-family:promptfont;font-style:normal;font-weight:400;font-size:56dp;line-height:56dp}.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}.toggle,.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}.toggle,.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.1dp;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,.9);border-radius:16dp;border-color:rgba(255,255,255,.2);border-width:1.1dp}.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;transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;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 svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.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}[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"]{border-color:#f86039}[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"] .control-option__binding-icon{opacity:0}[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"] .control-option__binding-recording{opacity:1}[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"]{border-color:#f86039}[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"] .control-option__binding-icon{opacity:0}[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"] .control-option__binding-recording{opacity:1}.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;transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out,border-color .05s linear-in-out;display:flex;position:relative;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.1dp;border-radius:8dp}.control-option__binding svg{image-color:#ccc}.control-option__binding svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.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}.control-option__binding-icon{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;opacity:1}@keyframes control-option__binding-recording-scale{0%{transform:scale(1)}50%{transform:scale(0.85)}to{transform:scale(1)}}.control-option__binding-recording{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;position:absolute;display:flex;align-items:center;justify-content:center;top:0;right:0;bottom:0;left:0;opacity:0}.control-option__binding-recording .control-option__binding-circle{width:24dp;height:24dp;background-color:#f86039;border-radius:24dp;animation:1.5s sine-in-out infinite control-option__binding-recording-scale}.control-option__binding-recording .control-option__binding-edge{position:absolute;transform:translate(-50%, -50%);top:50%;left:50%;width:36dp;height:36dp}.control-option__binding-recording .control-option__binding-edge>svg.control-option__binding-edge-svg{width:36dp;height:36dp;image-color:#f86039}.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 .05s linear-in-out;opacity:.9}.tab:selected{color:#f2f2f2}.tab:selected .tab__indicator{background-color:rgba(255,255,255,.6)}.tab:selected:hover{cursor:default}.tab:hover{cursor:pointer;opacity:1}.tab:focus{color:#f2f2f2;opacity:1}.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.1dp;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__header,.config__footer{display:flex;justify-content:space-between;align-items:center;width:100%;background-color:rgba(0,0,0,.35)}.config__header{border-bottom-color:rgba(255,255,255,.1);border-bottom-width:1.1dp;padding:12dp 20dp}.config__footer{border-top-color:rgba(255,255,255,.1);border-top-width:1.1dp;padding:20dp 20dp;border-bottom-left-radius:16dp;border-bottom-right-radius:16dp}.config__header-left{display:flex;flex-direction:row;flex:1 1 auto}.config__header-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 .05s 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{transition:color .05s linear-in-out,background-color .05s linear-in-out;margin-top:7dp;height:2dp;background-color:rgba(255,255,255,.2)}.config-option__list input.range sliderbar{transition:color .05s linear-in-out,background-color .05s linear-in-out;margin-left:-8dp;margin-right:-6dp;width:16dp;height:16dp;background-color:#ccc;border-radius:8dp;transition:background-color .05s 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:16dp;right:16dp;bottom:16dp;left:16dp;border-radius:108dp;background-color:rgba(255,255,255,.05)}.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 50%;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{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;position:relative;display:flex;align-items:center;justify-content:center}.input-viz>svg:not(.input-viz__dpad-arrow){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:.25}[cur-input=A] .input-viz[visual-input~=A]{opacity:1}.input-viz[visual-input~=B]{opacity:.25}[cur-input=B] .input-viz[visual-input~=B]{opacity:1}.input-viz[visual-input~=Z]{opacity:.25}[cur-input=Z] .input-viz[visual-input~=Z]{opacity:1}.input-viz[visual-input~=START]{opacity:.25}[cur-input=START] .input-viz[visual-input~=START]{opacity:1}.input-viz[visual-input~=DPAD_UP]{opacity:.25}[cur-input=DPAD_UP] .input-viz[visual-input~=DPAD_UP]{opacity:1}.input-viz[visual-input~=DPAD_DOWN]{opacity:.25}[cur-input=DPAD_DOWN] .input-viz[visual-input~=DPAD_DOWN]{opacity:1}.input-viz[visual-input~=DPAD_LEFT]{opacity:.25}[cur-input=DPAD_LEFT] .input-viz[visual-input~=DPAD_LEFT]{opacity:1}.input-viz[visual-input~=DPAD_RIGHT]{opacity:.25}[cur-input=DPAD_RIGHT] .input-viz[visual-input~=DPAD_RIGHT]{opacity:1}.input-viz[visual-input~=L]{opacity:.25}[cur-input=L] .input-viz[visual-input~=L]{opacity:1}.input-viz[visual-input~=R]{opacity:.25}[cur-input=R] .input-viz[visual-input~=R]{opacity:1}.input-viz[visual-input~=C_UP]{opacity:.25}[cur-input=C_UP] .input-viz[visual-input~=C_UP]{opacity:1}.input-viz[visual-input~=C_DOWN]{opacity:.25}[cur-input=C_DOWN] .input-viz[visual-input~=C_DOWN]{opacity:1}.input-viz[visual-input~=C_LEFT]{opacity:.25}[cur-input=C_LEFT] .input-viz[visual-input~=C_LEFT]{opacity:1}.input-viz[visual-input~=C_RIGHT]{opacity:.25}[cur-input=C_RIGHT] .input-viz[visual-input~=C_RIGHT]{opacity:1}.input-viz[visual-input~=X_AXIS_NEG]{opacity:.25}[cur-input=X_AXIS_NEG] .input-viz[visual-input~=X_AXIS_NEG]{opacity:1}.input-viz[visual-input~=X_AXIS_POS]{opacity:.25}[cur-input=X_AXIS_POS] .input-viz[visual-input~=X_AXIS_POS]{opacity:1}.input-viz[visual-input~=Y_AXIS_NEG]{opacity:.25}[cur-input=Y_AXIS_NEG] .input-viz[visual-input~=Y_AXIS_NEG]{opacity:1}.input-viz[visual-input~=Y_AXIS_POS]{opacity:.25}[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.input-viz__dpad{width:192dp;height:192dp;position:relative}.input-viz.input-viz__dpad svg{image-color:#f2f2f2}.input-viz.input-viz__dpad>svg{width:192dp;height:192dp}.input-viz__dpad-split{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;width:100%;height:100%}.input-viz__dpad-split--vertical{flex-direction:column;align-items:center;justify-content:space-between}.input-viz__dpad-split--horizontal{flex-direction:row;align-items:center;justify-content:space-between}.input-viz__dpad-split>div{display:flex;flex:1 1 100%;width:64dp;height:64dp;align-items:center;justify-content:center;flex-direction:row}.input-viz__dpad-arrow{position:absolute;width:60dp;height:60dp}.input-viz__dpad-arrow--up{top:4dp;margin:0 auto}.input-viz__dpad-arrow--down{bottom:4dp;margin:0 auto;transform:rotate(180deg)}.input-viz__dpad-arrow--left{left:4dp;margin:auto 0;transform:rotate(-90deg)}.input-viz__dpad-arrow--right{right:4dp;margin:auto 0;transform:rotate(90deg)}.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);transition:color .05s linear-in-out,background-color .05s linear-in-out;display:block;padding:23dp;border-radius:12dp;border-width:1.1dp;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;transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out,border-color .05s linear-in-out;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:26.9dp;border-width:1.1dp;border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0);width:53.8dp;height:53.8dp;min-width:53.8dp;min-height:53.8dp;max-width:53.8dp;max-height:53.8dp}.icon-button svg{image-color:#ccc}.icon-button svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.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}.toggle{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;display:flex;flex-direction:row;align-items:center;justify-content:space-between;position:relative;width:162dp;height:72dp;background:rgba(0,0,0,0);border-radius:36dp;cursor:pointer;opacity:.9}.toggle:hover,.toggle:focus-visible,.toggle:focus{background-color:rgba(23,214,232,.3);opacity:1}.toggle:active{background-color:rgba(23,214,232,.05);opacity:1}.toggle .toggle__border{position:absolute;top:1.1dp;right:1.1dp;bottom:1.1dp;left:1.1dp;border-color:#a2eff6;border-width:1.1dp;display:block;border-radius:36dp}.toggle .toggle__floater{position:absolute;width:80dp;height:64dp;top:50%;left:4dp;transform:translateY(-50%);border-radius:32dp;background:#25a1ad}.toggle--checked .toggle__floater{left:78dp}.toggle--checked .toggle__icon.toggle__icon--left{color:#a2eff6;opacity:.9}.toggle--checked .toggle__icon.toggle__icon--right{color:#f2f2f2;opacity:1}.toggle__icons{display:flex;position:absolute;height:56dp;top:50%;transform:translateY(-50%);right:16dp;left:16dp;align-items:center;justify-content:space-between}.toggle__icon{transition:color .05s linear-in-out,background-color .05s linear-in-out;display:flex;align-items:center;justify-content:center;width:56dp;height:56dp;color:#f2f2f2}.toggle__icon--right{opacity:1;color:#a2eff6}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,.config-debug-option__label,.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-debug__select-wrapper .config-debug__select-label,.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,.config-debug__select-wrapper select{font-size:16dp;letter-spacing:0dp;line-height:16dp;font-style:normal;font-weight:400}.toggle__icon{font-family:promptfont;font-style:normal;font-weight:400;font-size:56dp;line-height:56dp}.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}.toggle,.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}.toggle,.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,.config-debug-option__label,.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-debug__select-wrapper .config-debug__select-label,.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,.config-debug__select-wrapper select{font-size:16dp;letter-spacing:0dp;line-height:16dp;font-style:normal;font-weight:400}.toggle__icon{font-family:promptfont;font-style:normal;font-weight:400;font-size:56dp;line-height:56dp}.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}.toggle,.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}.toggle,.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.1dp;border-color:#000;background-color:#fff;font-size:15dp;decorator:none;height:auto}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,.9);border-radius:16dp;border-color:rgba(255,255,255,.2);border-width:1.1dp}.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;transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;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 svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.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}[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"]{border-color:#f86039}[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"] .control-option__binding-icon{opacity:0}[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"] .control-option__binding-recording{opacity:1}[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"]{border-color:#f86039}[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"] .control-option__binding-icon{opacity:0}[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"] .control-option__binding-recording{opacity:1}.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;transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out,border-color .05s linear-in-out;display:flex;position:relative;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.1dp;border-radius:8dp}.control-option__binding svg{image-color:#ccc}.control-option__binding svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.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}.control-option__binding-icon{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;opacity:1}@keyframes control-option__binding-recording-scale{0%{transform:scale(1)}50%{transform:scale(0.85)}to{transform:scale(1)}}.control-option__binding-recording{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;position:absolute;display:flex;align-items:center;justify-content:center;top:0;right:0;bottom:0;left:0;opacity:0}.control-option__binding-recording .control-option__binding-circle{width:24dp;height:24dp;background-color:#f86039;border-radius:24dp;animation:1.5s sine-in-out infinite control-option__binding-recording-scale}.control-option__binding-recording .control-option__binding-edge{position:absolute;transform:translate(-50%, -50%);top:50%;left:50%;width:36dp;height:36dp}.control-option__binding-recording .control-option__binding-edge>svg.control-option__binding-edge-svg{width:36dp;height:36dp;image-color:#f86039}.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 .05s linear-in-out;opacity:.9}.tab:selected{color:#f2f2f2}.tab:selected .tab__indicator{background-color:rgba(255,255,255,.6)}.tab:selected:hover{cursor:default}.tab:hover{cursor:pointer;opacity:1}.tab:focus{color:#f2f2f2;opacity:1}.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.1dp;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__header,.config__footer{display:flex;justify-content:space-between;align-items:center;width:100%;background-color:rgba(0,0,0,.35)}.config__header{border-bottom-color:rgba(255,255,255,.1);border-bottom-width:1.1dp;padding:12dp 20dp}.config__footer{border-top-color:rgba(255,255,255,.1);border-top-width:1.1dp;padding:20dp 20dp;border-bottom-left-radius:16dp;border-bottom-right-radius:16dp}.config__header-left{display:flex;flex-direction:row;flex:1 1 auto}.config__header-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 .05s 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{transition:color .05s linear-in-out,background-color .05s linear-in-out;margin-top:7dp;height:2dp;background-color:rgba(255,255,255,.2)}.config-option__list input.range sliderbar{transition:color .05s linear-in-out,background-color .05s linear-in-out;margin-left:-8dp;margin-right:-6dp;width:16dp;height:16dp;background-color:#ccc;border-radius:8dp;transition:background-color .05s 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:16dp;right:16dp;bottom:16dp;left:16dp;border-radius:108dp;background-color:rgba(255,255,255,.05)}.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 50%;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{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;position:relative;display:flex;align-items:center;justify-content:center}.input-viz>svg:not(.input-viz__dpad-arrow){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:.25}[cur-input=A] .input-viz[visual-input~=A]{opacity:1}.input-viz[visual-input~=B]{opacity:.25}[cur-input=B] .input-viz[visual-input~=B]{opacity:1}.input-viz[visual-input~=Z]{opacity:.25}[cur-input=Z] .input-viz[visual-input~=Z]{opacity:1}.input-viz[visual-input~=START]{opacity:.25}[cur-input=START] .input-viz[visual-input~=START]{opacity:1}.input-viz[visual-input~=DPAD_UP]{opacity:.25}[cur-input=DPAD_UP] .input-viz[visual-input~=DPAD_UP]{opacity:1}.input-viz[visual-input~=DPAD_DOWN]{opacity:.25}[cur-input=DPAD_DOWN] .input-viz[visual-input~=DPAD_DOWN]{opacity:1}.input-viz[visual-input~=DPAD_LEFT]{opacity:.25}[cur-input=DPAD_LEFT] .input-viz[visual-input~=DPAD_LEFT]{opacity:1}.input-viz[visual-input~=DPAD_RIGHT]{opacity:.25}[cur-input=DPAD_RIGHT] .input-viz[visual-input~=DPAD_RIGHT]{opacity:1}.input-viz[visual-input~=L]{opacity:.25}[cur-input=L] .input-viz[visual-input~=L]{opacity:1}.input-viz[visual-input~=R]{opacity:.25}[cur-input=R] .input-viz[visual-input~=R]{opacity:1}.input-viz[visual-input~=C_UP]{opacity:.25}[cur-input=C_UP] .input-viz[visual-input~=C_UP]{opacity:1}.input-viz[visual-input~=C_DOWN]{opacity:.25}[cur-input=C_DOWN] .input-viz[visual-input~=C_DOWN]{opacity:1}.input-viz[visual-input~=C_LEFT]{opacity:.25}[cur-input=C_LEFT] .input-viz[visual-input~=C_LEFT]{opacity:1}.input-viz[visual-input~=C_RIGHT]{opacity:.25}[cur-input=C_RIGHT] .input-viz[visual-input~=C_RIGHT]{opacity:1}.input-viz[visual-input~=X_AXIS_NEG]{opacity:.25}[cur-input=X_AXIS_NEG] .input-viz[visual-input~=X_AXIS_NEG]{opacity:1}.input-viz[visual-input~=X_AXIS_POS]{opacity:.25}[cur-input=X_AXIS_POS] .input-viz[visual-input~=X_AXIS_POS]{opacity:1}.input-viz[visual-input~=Y_AXIS_NEG]{opacity:.25}[cur-input=Y_AXIS_NEG] .input-viz[visual-input~=Y_AXIS_NEG]{opacity:1}.input-viz[visual-input~=Y_AXIS_POS]{opacity:.25}[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.input-viz__dpad{width:192dp;height:192dp;position:relative}.input-viz.input-viz__dpad svg{image-color:#f2f2f2}.input-viz.input-viz__dpad>svg{width:192dp;height:192dp}.input-viz__dpad-split{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;width:100%;height:100%}.input-viz__dpad-split--vertical{flex-direction:column;align-items:center;justify-content:space-between}.input-viz__dpad-split--horizontal{flex-direction:row;align-items:center;justify-content:space-between}.input-viz__dpad-split>div{display:flex;flex:1 1 100%;width:64dp;height:64dp;align-items:center;justify-content:center;flex-direction:row}.input-viz__dpad-arrow{position:absolute;width:60dp;height:60dp}.input-viz__dpad-arrow--up{top:4dp;margin:0 auto}.input-viz__dpad-arrow--down{bottom:4dp;margin:0 auto;transform:rotate(180deg)}.input-viz__dpad-arrow--left{left:4dp;margin:auto 0;transform:rotate(-90deg)}.input-viz__dpad-arrow--right{right:4dp;margin:auto 0;transform:rotate(90deg)}.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);transition:color .05s linear-in-out,background-color .05s linear-in-out;display:block;padding:23dp;border-radius:12dp;border-width:1.1dp;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;transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out,border-color .05s linear-in-out;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:26.9dp;border-width:1.1dp;border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0);width:53.8dp;height:53.8dp;min-width:53.8dp;min-height:53.8dp;max-width:53.8dp;max-height:53.8dp}.icon-button svg{image-color:#ccc}.icon-button svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.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}.toggle{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;display:flex;flex-direction:row;align-items:center;justify-content:space-between;position:relative;width:162dp;height:72dp;background:rgba(0,0,0,0);border-radius:36dp;cursor:pointer;opacity:.9}.toggle:hover,.toggle:focus-visible,.toggle:focus{background-color:rgba(23,214,232,.3);opacity:1}.toggle:active{background-color:rgba(23,214,232,.05);opacity:1}.toggle .toggle__border{position:absolute;top:1.1dp;right:1.1dp;bottom:1.1dp;left:1.1dp;border-color:#a2eff6;border-width:1.1dp;display:block;border-radius:36dp}.toggle .toggle__floater{position:absolute;width:80dp;height:64dp;top:50%;left:4dp;transform:translateY(-50%);border-radius:32dp;background:#25a1ad}.toggle--checked .toggle__floater{left:78dp}.toggle--checked .toggle__icon.toggle__icon--left{color:#a2eff6;opacity:.9}.toggle--checked .toggle__icon.toggle__icon--right{color:#f2f2f2;opacity:1}.toggle__icons{display:flex;position:absolute;height:56dp;top:50%;transform:translateY(-50%);right:16dp;left:16dp;align-items:center;justify-content:space-between}.toggle__icon{transition:color .05s linear-in-out,background-color .05s linear-in-out;display:flex;align-items:center;justify-content:center;width:56dp;height:56dp;color:#f2f2f2}.toggle__icon--right{opacity:1;color:#a2eff6}.config-debug{display:block;position:relative;width:100%;max-height:100%;padding:8dp}.config-debug__scroll{display:block;position:relative;width:100%;max-height:100%;overflow-y:auto}.config-debug-option{color:#ccc;transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;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)}.config-debug-option svg{image-color:#ccc}.config-debug-option svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.config-debug-option:focus-visible:not(:disabled,[disabled]),.config-debug-option:hover:not(:disabled,[disabled]){color:#f2f2f2;background-color:rgba(190,184,219,.1)}.config-debug-option:focus-visible:not(:disabled,[disabled]) svg,.config-debug-option:hover:not(:disabled,[disabled]) svg{image-color:#f2f2f2}.config-debug-option:disabled,.config-debug-option[disabled]{opacity:.5}.config-debug-option .icon-button{flex:1 1 auto}.config-debug-option__label{flex:1 1 auto;height:auto;white-space:nowrap}.config-debug__option-controls{display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;flex:1 1 100%;height:56dp;padding:0 12dp 0 12dp}.config-debug__select-wrapper{display:flex;position:relative;flex-direction:row;align-items:center;justify-content:flex-start;flex:1 1 100%;width:auto;height:auto;padding:0 8dp}.config-debug__select-wrapper .config-debug__select-label{padding-right:16dp;flex:auto;width:auto}.config-debug__select-wrapper .config-debug__select-label>div{display:inline;width:auto;height:auto}.config-debug__select-wrapper select{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out,border-color .05s linear-in-out;border-color:rgba(255,255,255,.5);border-width:1.1dp;display:block;position:relative;box-sizing:border-box;padding:0;flex:1 1 100%;width:auto;height:40dp;border-radius:12dp;background-color:rgba(255,255,255,.05)}.config-debug__select-wrapper select svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.config-debug__select-wrapper select:hover{background-color:rgba(255,255,255,.2)}.config-debug__select-wrapper select selectvalue{display:inline;align-items:center;justify-content:flex-start;padding:12dp;margin:auto 0;height:auto}.config-debug__select-wrapper select selectbox{border-color:rgba(255,255,255,.8);border-width:1.1dp;background-color:#191622;padding:4dp 0;margin-top:2dp;border-radius:12dp}.config-debug__select-wrapper select selectbox option{transition:color .05s linear-in-out,background-color .05s linear-in-out;padding:8dp 12dp;background-color:rgba(0,0,0,0);color:#ccc;font-weight:400}.config-debug__select-wrapper select selectbox option:hover{background-color:rgba(190,184,219,.1)}.config-debug__select-wrapper select selectbox option:checked{color:#fff}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/global.scss b/assets/scss/styles/global.scss
index 55d3491..9c751a7 100644
--- a/assets/scss/styles/global.scss
+++ b/assets/scss/styles/global.scss
@@ -2,6 +2,7 @@
 @import "./globals/old";
 @import "./globals/scrollbars";
 @import "./components/components";
+@import "./pages/pages";
 
 $font-size: 20dp;
 
diff --git a/assets/scss/styles/globals/_old.scss b/assets/scss/styles/globals/_old.scss
index e60d4cf..85ec989 100644
--- a/assets/scss/styles/globals/_old.scss
+++ b/assets/scss/styles/globals/_old.scss
@@ -89,86 +89,99 @@ table input.text {
 }
 
 select {
-    display: inline-block;
-    /* width: 175dp; */
-    /* height: 37dp; */
-    /* height: auto; */
-    text-align: left;
-    box-sizing:border-box;
-    /* padding: 4dp; */
-    vertical-align: center;
-    padding: 4dp;
-    border-radius: 5dp;
-    background-color: rgb(120, 120, 120);
-    width: 100%;
+    // display: inline-block;
+    // /* width: 175dp; */
+    // /* height: 37dp; */
+    // /* height: auto; */
+    // text-align: left;
+    // box-sizing:border-box;
+    // /* padding: 4dp; */
+    // vertical-align: center;
+    // padding: 4dp;
+    // border-radius: 5dp;
+    // background-color: rgb(120, 120, 120);
+    // width: 100%;
 }
+// select {
+//     @extend %body;
+//     display: flex;
+//     align-items: center;
+//     justify-content: flex-start;
+//     box-sizing: border-box;
+//     padding: space(16);
+//     flex: 1 1 100%;
+//     // width: auto;
+//     height: space(1000);
+//     border-radius: $border-radius-lg;
+//     background-color: $color-white-a20;
+// }
 
-select selectvalue {
-    height: auto;
-    /* padding: 4dp; */
-    /* margin-right: 30dp; */
-    /* height: 25dp; */
-    /* padding: 4dp; */
-    /* decorator: image(selectvalue) */
-}
+// select selectvalue {
+//     height: auto;
+//     /* padding: 4dp; */
+//     /* margin-right: 30dp; */
+//     /* height: 25dp; */
+//     /* padding: 4dp; */
+//     /* decorator: image(selectvalue) */
+// }
 
-select:hover selectvalue {
-    /* margin-right: 30dp; */
-    /* height: 25dp; */
-    /* padding: 4dp; */
-    background-color: rgb(150, 150, 150);
-    /* decorator: image(selectvalue) */
-}
+// select:hover selectvalue {
+//     /* margin-right: 30dp; */
+//     /* height: 25dp; */
+//     /* padding: 4dp; */
+//     background-color: rgb(150, 150, 150);
+//     /* decorator: image(selectvalue) */
+// }
 
-select selectarrow {
-    /* width: 30dp; */
-    /* height: 37dp; */
-    /* decorator: image(selectarrow) */
-    /* background-color: black; */
-    /* appearance: none; */
-}
+// select selectarrow {
+//     /* width: 30dp; */
+//     /* height: 37dp; */
+//     /* decorator: image(selectarrow) */
+//     /* background-color: black; */
+//     /* appearance: none; */
+// }
 
-select:hover selectarrow {
-    /* decorator: image(selectarrow-hover) */
-}
+// select:hover selectarrow {
+//     /* decorator: image(selectarrow-hover) */
+// }
 
-select:active selectarrow,
-select selectarrow:checked {
-    /* decorator: image(selectarrow-active) */
-}
+// select:active selectarrow,
+// select selectarrow:checked {
+//     /* decorator: image(selectarrow-active) */
+// }
 
-select selectbox {
-    /* margin-left: 1dp; */
-    /* margin-top: -7dp; */
-    /* margin-bottom: -10dp; */
-    /* width: 162dp; */
-    /* padding: 1dp 4dp 4dp 4dp */
-}
+// select selectbox {
+//     /* margin-left: 1dp; */
+//     /* margin-top: -7dp; */
+//     /* margin-bottom: -10dp; */
+//     /* width: 162dp; */
+//     /* padding: 1dp 4dp 4dp 4dp */
+// }
 
-select selectbox,
-tbody {
-    background-color: rgb(120,120,120);
-    /* decorator: tiled-box(selectbox-tl, selectbox-t, selectbox-tr, selectbox-l, selectbox-c, auto, selectbox-bl, selectbox-b, selectbox-br) */
-}
+// select selectbox,
+// tbody {
+//     background-color: rgb(120,120,120);
+//     /* decorator: tiled-box(selectbox-tl, selectbox-t, selectbox-tr, selectbox-l, selectbox-c, auto, selectbox-bl, selectbox-b, selectbox-br) */
+// }
 
-select selectbox option {
-    width: auto;
-    background-color: rgb(120, 120, 120)
-}
+// select selectbox option {
+//     width: auto;
+//     background-color: rgb(120, 120, 120)
+// }
 
-select selectbox option:nth-child(even),
-tr:nth-child(even) {
-    background-color: rgb(100, 100, 100)
-}
+// select selectbox option:nth-child(even),
+// tr:nth-child(even) {
+//     background-color: rgb(100, 100, 100)
+// }
 
-select selectbox option:checked {
-    font-weight:bold;
-    color:rgb(255,255,255);
-}
+// select selectbox option:checked {
+//     font-weight:bold;
+//     color:rgb(255,255,255);
+// }
 
-select selectbox option:hover {
-    background: rgb(150,150,150)
-}
+// select selectbox option:hover {
+//     background: rgb(150,150,150)
+// }
 
 input.radio,
 input.checkbox {
diff --git a/assets/scss/styles/pages/_pages.scss b/assets/scss/styles/pages/_pages.scss
new file mode 100644
index 0000000..16e2e18
--- /dev/null
+++ b/assets/scss/styles/pages/_pages.scss
@@ -0,0 +1 @@
+@import "./config/config";
diff --git a/assets/scss/styles/pages/config/_config.scss b/assets/scss/styles/pages/config/_config.scss
new file mode 100644
index 0000000..c4e69bc
--- /dev/null
+++ b/assets/scss/styles/pages/config/_config.scss
@@ -0,0 +1 @@
+@import "./debug";
diff --git a/assets/scss/styles/pages/config/debug.scss b/assets/scss/styles/pages/config/debug.scss
new file mode 100644
index 0000000..810378c
--- /dev/null
+++ b/assets/scss/styles/pages/config/debug.scss
@@ -0,0 +1,140 @@
+
+.config-debug {
+    display: block;
+    position: relative;
+    width: 100%;
+    max-height: 100%;
+    padding: space(8);
+}
+
+.config-debug__scroll {
+    display: block;
+    position: relative;
+    width: 100%;
+    max-height: 100%;
+    overflow-y: auto;
+}
+
+.config-debug-option {
+    @include set-color($color-text-dim);
+    @include trans-colors-svg;
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: auto;
+    padding: space(4) space(16) space(4) space(20);
+    border-radius: $border-radius-sm;
+    background-color: rgba(0, 0, 0, 0);
+
+    &:focus-visible:not(:disabled, [disabled]),
+    &:hover:not(:disabled, [disabled]) {
+        @include set-color($color-text);
+        background-color: $color-bg-overlay;
+    }
+
+    &:disabled, &[disabled] {
+        opacity: 0.5;
+    }
+
+    .icon-button {
+        flex: 1 1 auto;
+    }
+}
+
+.config-debug-option__label {
+    @extend %label-md;
+    flex: 1 1 auto;
+    height: auto;
+    white-space: nowrap;
+}
+
+.config-debug__option-controls {
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    flex: 1 1 100%;
+    height: space(56);
+    padding: 0 space(12) 0 space(12);
+}
+
+.config-debug__select-wrapper {
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    flex: 1 1 100%;
+    width: auto;
+    height: auto;
+    padding: 0 space(8);
+
+    .config-debug__select-label {
+        @extend %label-sm;
+        padding-right: space(16);
+        flex: auto;
+        width: auto;
+
+        > div {
+            display: inline;
+            width: auto;
+            height: auto;
+        }
+    }
+
+    select {
+        @extend %body;
+        @include trans-colors-border;
+        @include border($color-white-a50);
+        display: block;
+        position: relative;
+        box-sizing: border-box;
+        padding: 0;
+        flex: 1 1 100%;
+        width: auto;
+        height: space(40);
+        border-radius: $border-radius-md;
+        background-color: $color-white-a5;
+        
+        &:hover {
+            background-color: $color-white-a20;
+        }
+
+        selectvalue {
+            display: inline;
+            align-items: center;
+            justify-content: flex-start;
+            padding: space(12);
+            margin: auto 0;
+            height: auto;
+        }
+
+        selectbox {
+            @include border($color-white-a80);
+            background-color: $color-background-3;
+            padding: space(4) 0;
+            margin-top: space(2);
+            border-radius: $border-radius-md;
+            
+            option {
+                @include trans-colors;
+                padding: space(8) space(12);
+                background-color: $color-transparent;
+                color: $color-text-dim;
+                font-weight: 400;
+
+                &:hover {
+                    background-color: $color-bg-overlay;
+                }
+
+                &:checked {
+                    color: $color-white;
+                }
+            }
+        }
+    }
+}
