From 132c9829dfccde086a00bfe9e02cf4daaa1a8183 Mon Sep 17 00:00:00 2001
From: thecozies <79979276+thecozies@users.noreply.github.com>
Date: Fri, 28 Jun 2024 09:36:40 -0500
Subject: [PATCH] init config opt system w/ 3 types and description support

---
 CMakeLists.txt                                |   9 +
 assets/config_menu.rml                        |   8 +
 assets/config_menu/cheats.rml                 |  12 +
 assets/recomp.rcss                            |   2 +-
 assets/scss/styles/components/Config.scss     | 156 ----------
 .../styles/components/ConfigDescription.scss  |  27 ++
 .../scss/styles/components/ConfigGroup.scss   |  29 ++
 .../scss/styles/components/ConfigOption.scss  | 274 ++++++++++++++++++
 .../scss/styles/components/_components.scss   |   3 +
 assets/scss/styles/globals/_old.scss          |  14 +-
 config_example.cheats.en_us.json              |  27 ++
 config_example.cheats.json                    | 100 +++++++
 include/recomp_ui.h                           |   2 +
 lib/N64ModernRuntime                          |   2 +-
 src/game/recomp_api.cpp                       |  18 ++
 src/ui/config_options/ConfigOption.cpp        |  31 ++
 src/ui/config_options/ConfigOption.h          |  65 +++++
 src/ui/config_options/ConfigRegistry.cpp      | 230 +++++++++++++++
 src/ui/config_options/ConfigRegistry.h        |  66 +++++
 src/ui/elements/ElementConfigGroup.cpp        | 139 +++++++++
 src/ui/elements/ElementConfigGroup.h          |  30 ++
 src/ui/elements/ElementConfigOption.cpp       | 145 +++++++++
 src/ui/elements/ElementConfigOption.h         |  33 +++
 src/ui/elements/ElementDescription.cpp        |  61 ++++
 src/ui/elements/ElementDescription.h          |  22 ++
 src/ui/elements/ElementOptionTypeCheckbox.cpp |  78 +++++
 src/ui/elements/ElementOptionTypeCheckbox.h   |  34 +++
 .../elements/ElementOptionTypeRadioTabs.cpp   |  97 +++++++
 src/ui/elements/ElementOptionTypeRadioTabs.h  |  25 ++
 src/ui/elements/ElementOptionTypeRange.cpp    |  94 ++++++
 src/ui/elements/ElementOptionTypeRange.h      |  28 ++
 src/ui/ui_elements.cpp                        |  50 ++++
 src/ui/ui_elements.h                          |  20 ++
 src/ui/ui_renderer.cpp                        |  32 ++
 34 files changed, 1803 insertions(+), 160 deletions(-)
 create mode 100644 assets/config_menu/cheats.rml
 create mode 100644 assets/scss/styles/components/ConfigDescription.scss
 create mode 100644 assets/scss/styles/components/ConfigGroup.scss
 create mode 100644 assets/scss/styles/components/ConfigOption.scss
 create mode 100644 config_example.cheats.en_us.json
 create mode 100644 config_example.cheats.json
 create mode 100644 src/ui/config_options/ConfigOption.cpp
 create mode 100644 src/ui/config_options/ConfigOption.h
 create mode 100644 src/ui/config_options/ConfigRegistry.cpp
 create mode 100644 src/ui/config_options/ConfigRegistry.h
 create mode 100644 src/ui/elements/ElementConfigGroup.cpp
 create mode 100644 src/ui/elements/ElementConfigGroup.h
 create mode 100644 src/ui/elements/ElementConfigOption.cpp
 create mode 100644 src/ui/elements/ElementConfigOption.h
 create mode 100644 src/ui/elements/ElementDescription.cpp
 create mode 100644 src/ui/elements/ElementDescription.h
 create mode 100644 src/ui/elements/ElementOptionTypeCheckbox.cpp
 create mode 100644 src/ui/elements/ElementOptionTypeCheckbox.h
 create mode 100644 src/ui/elements/ElementOptionTypeRadioTabs.cpp
 create mode 100644 src/ui/elements/ElementOptionTypeRadioTabs.h
 create mode 100644 src/ui/elements/ElementOptionTypeRange.cpp
 create mode 100644 src/ui/elements/ElementOptionTypeRange.h
 create mode 100644 src/ui/ui_elements.cpp
 create mode 100644 src/ui/ui_elements.h

diff --git a/CMakeLists.txt b/CMakeLists.txt
index 159a3e2..a21c40a 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -158,6 +158,15 @@ set (SOURCES
     ${CMAKE_SOURCE_DIR}/src/ui/ui_config.cpp
     ${CMAKE_SOURCE_DIR}/src/ui/ui_color_hack.cpp
     ${CMAKE_SOURCE_DIR}/src/ui/ui_rml_hacks.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/ui_elements.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementConfigGroup.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementConfigOption.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeCheckbox.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeRadioTabs.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeRange.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementDescription.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/config_options/ConfigRegistry.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/config_options/ConfigOption.cpp
 
     ${CMAKE_SOURCE_DIR}/rsp/aspMain.cpp
     ${CMAKE_SOURCE_DIR}/rsp/njpgdspMain.cpp
diff --git a/assets/config_menu.rml b/assets/config_menu.rml
index 6de1fb4..c8609bc 100644
--- a/assets/config_menu.rml
+++ b/assets/config_menu.rml
@@ -28,6 +28,7 @@
 	<link type="text/template" href="config_menu/graphics.rml" />
 	<link type="text/template" href="config_menu/sound.rml" />
 	<link type="text/template" href="config_menu/debug.rml" />
+	<link type="text/template" href="config_menu/cheats.rml" />
 	<link type="text/template" href="components/prompt.rml" />
 </head>
 <body class="window">
@@ -71,6 +72,13 @@
 						<panel class="config" data-model="debug_model">
 							<template src="config-menu__debug" />
 						</panel>
+						<tab class="tab" id="tab_cheats">
+							<div>Cheats</div>
+							<div class="tab__indicator"></div>
+						</tab>
+						<panel class="config">
+							<template src="config-menu__cheats" />
+						</panel>
 					</tabset>
 					<div class="config__icon-buttons">
 						<button
diff --git a/assets/config_menu/cheats.rml b/assets/config_menu/cheats.rml
new file mode 100644
index 0000000..24713bd
--- /dev/null
+++ b/assets/config_menu/cheats.rml
@@ -0,0 +1,12 @@
+<template name="config-menu__cheats">
+    <head>
+    </head>
+    <body>
+        <form class="config__form" id="conf-cheats__form">
+            <div class="config__hz-wrapper" id="conf-cheats__hz-wrapper">
+                <recomp-config-group recomp-data="cheats" />
+                <recomp-description />
+            </div>
+        </form>
+    </body>
+</template>
diff --git a/assets/recomp.rcss b/assets/recomp.rcss
index d0124d4..d21bf3a 100644
--- a/assets/recomp.rcss
+++ b/assets/recomp.rcss
@@ -1 +1 @@
-h1{font-size:68dp;letter-spacing:4.76dp;line-height:68dp;font-style:normal;font-weight:700}h2{font-size:52dp;letter-spacing:3.64dp;line-height:52dp;font-style:normal;font-weight:700}h3,.tab{font-size:36dp;letter-spacing:2.52dp;line-height:36dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button--large{font-size:36dp;letter-spacing:3.96dp;line-height:36dp;font-style:normal;font-weight:700}.label-md,.config-debug-option__label,.button,.config-option__title,.control-option__label{font-size:28dp;letter-spacing:3.08dp;line-height:28dp;font-style:normal;font-weight:700}.label-sm,.config-debug__select-wrapper .config-debug__select-label,.subtitle-title__disclaimer,.config-option__range-label,.config-option__list .config-option__tab-label,.centered-page__controls>label{font-size:20dp;letter-spacing:2.8dp;line-height:20dp;font-style:normal;font-weight:700;text-transform:uppercase}.config-option__details{font-size:18dp;letter-spacing:2.52dp;line-height:18dp;font-style:normal;font-weight:400}body,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.config__wrapper p{font-size:20dp;letter-spacing:0dp;line-height:20dp;font-style:normal;font-weight:400}.toggle__icon{font-family:promptfont;font-size:56dp;font-style:normal;font-weight:400;line-height:56dp}.prompt-font{font-family:promptfont;font-size:40dp;font-style:normal;font-weight:400;line-height:40dp}.prompt-font-sm,.input-viz__mappings div{font-family:promptfont;font-size:32dp;font-style:normal;font-weight:400;line-height:32dp}.nav-vert,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option__list input.radio,.tab,.control-option__binding:not([disabled]){nav-up:auto;nav-down:auto}.nav-horiz,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option__list input.radio,.tab,.control-option__binding:not([disabled]){nav-right:auto;nav-left:auto}.nav-foc,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option__list input.radio,.tab,.control-option__binding:not([disabled]){focus:auto;tab-index:auto}h1{font-size:68dp;letter-spacing:4.76dp;line-height:68dp;font-style:normal;font-weight:700}h2{font-size:52dp;letter-spacing:3.64dp;line-height:52dp;font-style:normal;font-weight:700}h3,.tab{font-size:36dp;letter-spacing:2.52dp;line-height:36dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button--large{font-size:36dp;letter-spacing:3.96dp;line-height:36dp;font-style:normal;font-weight:700}.label-md,.config-debug-option__label,.button,.config-option__title,.control-option__label{font-size:28dp;letter-spacing:3.08dp;line-height:28dp;font-style:normal;font-weight:700}.label-sm,.config-debug__select-wrapper .config-debug__select-label,.subtitle-title__disclaimer,.config-option__range-label,.config-option__list .config-option__tab-label,.centered-page__controls>label{font-size:20dp;letter-spacing:2.8dp;line-height:20dp;font-style:normal;font-weight:700;text-transform:uppercase}.config-option__details{font-size:18dp;letter-spacing:2.52dp;line-height:18dp;font-style:normal;font-weight:400}body,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.config__wrapper p{font-size:20dp;letter-spacing:0dp;line-height:20dp;font-style:normal;font-weight:400}.toggle__icon{font-family:promptfont;font-size:56dp;font-style:normal;font-weight:400;line-height:56dp}.prompt-font{font-family:promptfont;font-size:40dp;font-style:normal;font-weight:400;line-height:40dp}.prompt-font-sm,.input-viz__mappings div{font-family:promptfont;font-size:32dp;font-style:normal;font-weight:400;line-height:32dp}.nav-vert,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option__list input.radio,.tab,.control-option__binding:not([disabled]){nav-up:auto;nav-down:auto}.nav-horiz,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option__list input.radio,.tab,.control-option__binding:not([disabled]){nav-right:auto;nav-left:auto}.nav-foc,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option__list input.radio,.tab,.control-option__binding:not([disabled]){focus:auto;tab-index:auto}*{box-sizing:border-box}hr{display:block;padding:1.5dp;background:#08070d}body{color:#fff;font-family:chiaro;font-size:20dp;font-style:normal;font-weight:normal}div#window{position:relative;box-sizing:border-box;width:100%;height:100%;border-color:rgba(255,255,255,.2);background-color:#121018}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;text-align:left;cursor:text}textarea{padding:14dp 12dp 10dp;text-align:left;cursor:text}input.text,input.password,select,textarea{height:auto}table input.text{box-sizing:border-box;width:100%;height:auto;margin:0;border-width:1.1dp;border-color:#000;background-color:#fff;font-size:15dp;line-height:1;decorator:none}input.radio,input.checkbox{flex:0;width:0dp;nav-up:auto;nav-right:auto;nav-down:auto;nav-left:auto;tab-index:auto;focus:auto}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;position:relative;flex:1 1 100%;flex-direction:column;width:100%;max-width:1692.4444444444dp;height:100%;margin:auto;border-width:1.1dp;border-radius:16dp;border-color:rgba(255,255,255,.2);background:rgba(8,7,13,.9)}.centered-page__modal>.tabs{display:flex;position:relative;flex:1 1 100%;flex-direction:column;width:100%;max-width:1692.4444444444dp;height:100%;margin:auto}.centered-page__modal panels{flex:1 1 100%}.centered-page__controls{display:flex;position:absolute;bottom:24dp;flex-direction:row;align-items:center;justify-content:center;width:100%;max-width:1692.4444444444dp;height:auto;margin:0 auto}.centered-page__controls>label{display:inline-block;align-items:center;justify-content:space-between;width:auto;height:24dp}.centered-page__controls>label:not(:last-child){margin-right:40dp}.centered-page__controls>label>span:first-child{margin-right:4dp}.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:2 1 400dp;flex-direction:row;align-items:center;justify-content:space-between;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;flex:1 1 100%;align-items:center;justify-content:center;width:100%;height:56dp;margin:0 4dp;padding:8dp;border-width:1.1dp;border-radius:8dp;border-color:rgba(190,184,219,.1);background-color:rgba(190,184,219,.1)}.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;border-color:#f2f2f2;background-color:rgba(255,255,255,.1)}.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)}100%{transform:scale(1)}}.control-option__binding-recording{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;display:flex;position:absolute;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;opacity:0}.control-option__binding-recording .control-option__binding-circle{width:24dp;height:24dp;animation:1.5s sine-in-out infinite control-option__binding-recording-scale;border-radius:24dp;background-color:#f86039}.control-option__binding-recording .control-option__binding-edge{position:absolute;top:50%;left:50%;width:36dp;height:36dp;transform:translate(-50%, -50%)}.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;margin:0;padding:20dp 24dp;transition:color .05s linear-in-out;opacity:.9;background-color:rgba(0,0,0,0);color:rgba(255,255,255,.6)}.tab:selected{color:#f2f2f2}.tab:selected .tab__indicator{background-color:rgba(255,255,255,.6)}.tab:selected:hover{cursor:default}.rmlui-window:not([mouse-active]) .tab:focus{transition:none;animation:blue-pulse .75s infinite}.rmlui-window:not([mouse-active]) .tab:focus:selected .tab__indicator{animation:blue-pulse-background .75s infinite}.tab:focus,.tab:hover{opacity:1;color:#f2f2f2;cursor:pointer}.tab__indicator{position:absolute;right:0;bottom:2dp;left:0;height:2dp;background-color:rgba(0,0,0,0)}.config__icon-buttons{display:flex;position:absolute;top:8dp;right:0dp;flex-direction:row;align-items:center;justify-content:flex-end;width:auto}.config__icon-buttons .icon-button{margin:0 8dp}.config__form{border-top-width:1.1dp;border-top-color:rgba(255,255,255,.1);display:flex;flex:1 1 100%;flex-direction:column;justify-content:space-between;width:100%;height:100%;border-bottom-right-radius:16dp;border-bottom-left-radius:16dp}.config__wrapper{flex:1 1 100%;width:auto;height:auto;padding:16dp;border-radius:0dp;border-bottom-right-radius:16dp;border-bottom-left-radius:16dp;background-color:rgba(0,0,0,.35);text-align:left}.config__wrapper p{padding:16dp;line-height:28dp;white-space:pre-line}.config__wrapper p b{color:#b97df2}.config__wrapper p i{color:#e9cd35;font-style:normal}.config__hz-wrapper{display:flex;flex:1 1 100%;flex-direction:row;width:100%;height:100%;border-radius:0dp;text-align:left}.config__header,.config__footer{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:rgba(0,0,0,.35)}.config__header{border-bottom-width:1.1dp;border-bottom-color:rgba(255,255,255,.1);padding:12dp 20dp}.config__footer{border-top-width:1.1dp;border-top-color:rgba(255,255,255,.1);padding:20dp 20dp;border-bottom-right-radius:16dp;border-bottom-left-radius:16dp}.config__header-left{display:flex;flex:1 1 auto;flex-direction:row}.config__header-left>:not(:first-child){margin-left:8dp}.config__row{display:flex;flex-direction:row}.config-option{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin:16dp 0dp 24dp}.config-option:last-child{margin-top:16dp}.config-option__title{padding:0 12dp}.config-option__list{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;height:auto;padding:0}.config-option__list input:first-of-type{nav-left:none}.config-option__list input:last-of-type{nav-right:none}.config-option__list .config-option__tab-label{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;display:block;position:relative;height:auto;margin:4dp 12dp 0;padding:8dp 0;color:rgba(255,255,255,.6);tab-index:none}.config-option__list .config-option__tab-label:hover{color:#f2f2f2;cursor:pointer}.config-option__list input.radio{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;visibility:visible;width:0;height:0}.config-option__list input.radio:not(:disabled):checked+.config-option__tab-label{border-bottom:1dp;border-color:#f2f2f2;color:#f2f2f2}.config-option__list input.radio:not(:disabled):checked+.config-option__tab-label:hover{cursor:default}.rmlui-window:not([mouse-active]) .config-option__list input.radio:not(:disabled):focus+.config-option__tab-label{transition:none;animation:blue-pulse .75s infinite;border-color:#17d6e8;color:#17d6e8}.config-option__list input.radio:not(:disabled):focus+.config-option__tab-label,.config-option__list input.radio:not(:disabled):hover+.config-option__tab-label{color:#f2f2f2}.config-option__list input.radio:disabled+.config-option__tab-label{opacity:.5}.config-option__list input.radio:disabled+.config-option__tab-label:hover{cursor:default}.config-option__list input.range slidertrack{transition:color .05s linear-in-out,background-color .05s linear-in-out;height:2dp;margin-top:8dp;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;width:16dp;height:16dp;margin-top:1dp;margin-right:-8dp;margin-left:-8dp;transition:background-color .05s linear-in-out;border-radius:8dp;background-color:#ccc}.rmlui-window:not([mouse-active]) .config-option__list input.range sliderbar:focus{border-width:1.1dp;border-color:#33f;animation:blue-pulse-background .75s infinite}.config-option__list input.range sliderbar:hover{background-color:#f2f2f2;cursor:pointer}.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__details{height:18dp;margin:14dp 12dp 0;color:#b97df2}.config-option__range-wrapper{max-width:360dp;margin-top:4dp}.config-option__range-label{display:block;width:56dp;margin:0 12dp;margin-right:16dp;padding:0;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;min-width:640dp;height:100%}.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;flex:1 1 100%;width:auto;max-width:1040.4444444444dp;height:auto;max-height:780.3333333333dp;margin:auto 0}.input-config__visual-aspect{position:relative;width:100%;margin:auto 0;padding-bottom:75%;background-color:rgba(0,0,0,.35)}.input-config__visual{display:flex;position:absolute;top:16dp;right:16dp;bottom:16dp;left:16dp;flex-direction:column;border-radius:108dp;background-color:rgba(255,255,255,.05)}.input-config__visual-half{display:flex;position:relative;flex:1 1 100%;flex-direction:row;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%;align-items:flex-start;justify-content:flex-start;width:auto}.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;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center}.input-viz{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;display:flex;position:relative;align-items:center;justify-content:center}.input-viz>svg:not(.input-viz__dpad-arrow){position:absolute;top:0;right:0;bottom:0;left: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{margin-top:auto}.input-viz__button--A svg{image-color:#33f}.input-viz__button--B svg{image-color:#45d043}.input-viz__button--Start svg{image-color:#f86039}.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-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__dpad-split,.input-viz__stick-split{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;width:100%;height:100%}.input-viz__dpad-split--vertical,.input-viz__stick-split--vertical{flex-direction:column;align-items:center;justify-content:space-between}.input-viz__dpad-split--horizontal,.input-viz__stick-split--horizontal{flex-direction:row;align-items:center;justify-content:space-between}.input-viz__dpad-split>div,.input-viz__stick-split>div{display:flex;flex:1 1 100%;flex-direction:row;align-items:center;justify-content:center}.input-viz__dpad-split>div{width:64dp;height:64dp}.input-viz__stick-split>div{width:66.6666666667dp;height:66.6666666667dp}.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;bottom:0;left: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}.input-config__main-buttons{display:flex;position:relative;flex-direction:row;justify-content:space-between;width:268dp;height:128dp;margin-right:10dp}.button{border-color:rgba(185,125,242,.8);background-color:rgba(185,125,242,.05);color:#ccc;transition:color .05s linear-in-out,background-color .05s linear-in-out;display:block;width:auto;height:auto;padding:23dp;border-width:1.1dp;border-radius:12dp}.button:focus,.button:hover{border-color:#b97df2;background-color:rgba(185,125,242,.3);color:#f2f2f2}.button:disabled,.button[disabled]{color:rgba(255,255,255,.6)}.button:active{background-color:rgba(185,125,242,.2);color:#f5f5f5}.button--primary{border-color:rgba(185,125,242,.8);background-color:rgba(185,125,242,.05);color:#ccc}.button--primary:focus,.button--primary:hover{border-color:#b97df2;background-color:rgba(185,125,242,.3);color:#f2f2f2}.button--primary:disabled,.button--primary[disabled]{color:rgba(255,255,255,.6)}.button--primary:active{background-color:rgba(185,125,242,.2);color:#f5f5f5}.button--secondary{border-color:rgba(23,214,232,.8);background-color:rgba(23,214,232,.05);color:#ccc}.button--secondary:focus,.button--secondary:hover{border-color:#17d6e8;background-color:rgba(23,214,232,.3);color:#f2f2f2}.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{border-color:rgba(242,242,242,.8);background-color:rgba(242,242,242,.05);color:#ccc}.button--tertiary:focus,.button--tertiary:hover{border-color:#f2f2f2;background-color:rgba(242,242,242,.3);color:#f2f2f2}.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{border-color:rgba(69,208,67,.8);background-color:rgba(69,208,67,.05);color:#ccc}.button--success:focus,.button--success:hover{border-color:#45d043;background-color:rgba(69,208,67,.3);color:#f2f2f2}.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{border-color:rgba(248,96,57,.8);background-color:rgba(248,96,57,.05);color:#ccc}.button--error:focus,.button--error:hover{border-color:#f86039;background-color:rgba(248,96,57,.3);color:#f2f2f2}.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{border-color:rgba(233,205,53,.8);background-color:rgba(233,205,53,.05);color:#ccc}.button--warning:focus,.button--warning:hover{border-color:#e9cd35;background-color:rgba(233,205,53,.3);color:#f2f2f2}.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;width:53.8dp;min-width:53.8dp;max-width:53.8dp;height:53.8dp;min-height:53.8dp;max-height:53.8dp;border-width:1.1dp;border-radius:26.9dp;border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0)}.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{border-color:rgba(185,125,242,.8);background-color:rgba(185,125,242,.05)}.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{border-color:rgba(23,214,232,.8);background-color:rgba(23,214,232,.05)}.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{border-color:rgba(242,242,242,.8);background-color:rgba(242,242,242,.05)}.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{border-color:rgba(69,208,67,.8);background-color:rgba(69,208,67,.05)}.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{border-color:rgba(248,96,57,.8);background-color:rgba(248,96,57,.05)}.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{border-color:rgba(233,205,53,.8);background-color:rgba(233,205,53,.05)}.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;position:relative;flex-direction:row;justify-content:space-between;width:100%;height:100%;background-color:#08070d}.launcher__vertical-split{display:flex;position:absolute;top:0;right:50%;bottom:0;left:0;flex-direction:column;align-items:flex-start;justify-content:space-between}.launcher__vertical-split--right{right:0;left:50%;align-items:flex-end}@keyframes slide-mm-bg-over{0%{transform:translateX(100dp)}100%{transform:translateX(0dp)}}.launcher__background-wrapper{display:flex;position:absolute;top:-55vw;right:-100%;bottom:-50vw;left:-70vw;align-items:center;justify-content:flex-start;transform:translateX(0dp);animation:25s cubic-out 1 slide-mm-bg-over}@keyframes fade-mm-in{0%{opacity:0}100%{opacity:.1}}.launcher__background-mm{position:absolute;top:0;bottom:0;left:0;width:auto;height:100%;animation:2.5s cubic-in-out 1 fade-mm-in;opacity:.1}.launcher__title-quadrant{flex:1 1 auto;width:auto;height:auto;padding-top:96dp;padding-left:96dp}.launcher__title-quadrant--right{padding-right:96dp;padding-left:0}.launcher__content-quadrant{display:flex;position:relative;flex:1 1 100%;flex-direction:column;align-items:flex-start;justify-content:flex-end;width:100%;height:auto;padding:32dp}.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{flex-direction:row-reverse;align-content:flex-end}.menu-list-item--right .menu-list-item__bullet{margin-left:12dp;opacity:1}.menu-list-item--right.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item--right.menu-list-item:hover:not(:disabled,[disabled]){decorator:horizontal-gradient(#7A2AC600 #DABAF714)}.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item:hover:not(:disabled,[disabled]){color:#b97df2;decorator:horizontal-gradient(#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{margin-right:12dp;opacity:0}.subtitle-title{display:block;position:relative;flex-direction:column;align-content:flex-start;align-items:flex-start;width:auto;height:auto;padding:0;background-color:rgba(0,0,0,0);color:#ccc;text-align:left;cursor:pointer}.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;position:relative;flex-direction:row;align-items:center;justify-content:space-between;width:162dp;height:72dp;border-radius:36dp;opacity:.9;background:rgba(0,0,0,0);cursor:pointer}.toggle:hover,.toggle:focus-visible,.toggle:focus{opacity:1;background-color:rgba(23,214,232,.3)}.toggle:active{opacity:1;background-color:rgba(23,214,232,.05)}.toggle .toggle__border{position:absolute;top:1.1dp;right:1.1dp;bottom:1.1dp;left:1.1dp;border-width:1.1dp;border-color:#a2eff6;display:block;border-radius:36dp}.toggle .toggle__floater{position:absolute;top:50%;left:4dp;width:80dp;height:64dp;transform:translateY(-50%);border-radius:32dp;background:#25a1ad}.toggle--checked .toggle__floater{left:78dp}.toggle--checked .toggle__icon.toggle__icon--left{opacity:.9;color:#a2eff6}.toggle--checked .toggle__icon.toggle__icon--right{opacity:1;color:#f2f2f2}.toggle__icons{display:flex;position:absolute;top:50%;right:16dp;left:16dp;align-items:center;justify-content:space-between;height:56dp;transform:translateY(-50%)}.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}.bottom-left{display:flex;position:absolute;bottom:4dp;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;max-width:1692.4444444444dp;height:auto;margin:0 4dp}.prompt__overlay{background-color:rgba(190,184,219,.1);pointer-events:auto}.prompt__overlay,.prompt__content-wrapper{position:absolute;top:0;right:0;bottom:0;left:0}.prompt__content-wrapper{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center}.prompt__content{display:flex;position:relative;flex:1 1 100%;flex-direction:column;width:100%;max-width:700dp;height:auto;margin:auto;border-width:1.1dp;border-radius:16dp;border-color:rgba(255,255,255,.2);background:rgba(8,7,13,.9)}.prompt__content h3,.prompt__content p{margin:24dp}.prompt__content p{margin-top:0}.prompt__controls{display:flex;flex-direction:row;justify-content:center;padding:24dp 12dp;border-top-width:1.1dp;border-top-color:rgba(255,255,255,.1)}.prompt__controls .button{min-width:233.3333333333dp;margin:0 12dp;text-align:center;nav-up:none;nav-down:none}.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;border-bottom-width:1.1dp;border-bottom-color:rgba(255,255,255,.1);display:block;position:relative;flex-direction:column;width:100%;height:auto;padding:12dp 4dp;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:not(:disabled,[disabled]),.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:not(:disabled,[disabled]) svg,.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{margin-left:8dp}.config-debug__option-split{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.config-debug-option__label{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:4dp 16dp 12dp;width:auto;height:auto;white-space:nowrap}.config-debug__option-controls{display:block;position:relative;flex:1 1 auto;height:auto;width:auto;max-width:800dp;padding:0 12dp}.config-debug__option-trigger{flex:1 1 auto}.config-debug__select-wrapper{display:flex;position:relative;flex-direction:row;align-items:center;justify-content:flex-start;flex:1 1 100%;width:auto;max-width:800dp;height:auto;padding:4dp}.config-debug__select-wrapper .config-debug__select-label{padding-right:16dp;flex:auto;width:196dp}.config-debug__select-wrapper .config-debug__select-label>div{display:inline;width:auto;height:auto}.config-debug__select-wrapper input{display:block;position:relative;box-sizing:border-box;padding:0;flex:1 1 100%;width:auto;height:20dp;margin:auto 0}.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-width:1.1dp;border-color:rgba(255,255,255,.5);display:block;position:relative;box-sizing:border-box;padding:0;flex:1 1 100%;width:auto;height:48dp;border-radius:12dp;background-color:rgba(255,255,255,.05);cursor:pointer;align-items:center;justify-content:flex-start;padding:14dp}.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,.config-debug__select-wrapper select:focus{border-width:1.1dp;border-color:rgba(255,255,255,.8);background-color:rgba(255,255,255,.2)}.config-debug__select-wrapper select selectvalue{display:inline;margin:auto 0;height:auto}.config-debug__select-wrapper select selectbox{border-width:1.1dp;border-color:rgba(255,255,255,.8);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,.config-debug__select-wrapper select selectbox option:focus{background-color:rgba(255,255,255,.2)}.config-debug__select-wrapper select selectbox option:hover:not(:checked){cursor:pointer}.config-debug__select-wrapper select selectbox option:checked{color:#fff;background-color:rgba(255,255,255,.05)}body{box-sizing:border-box;color:#f2f2f2;font-family:chiaro}.rmlui-window{opacity:1}.rmlui-window--hidden{opacity:0}.rmlui-window:not([mouse-active]){pointer-events:none}*,*:before,*:after{box-sizing:border-box}button{background-color:#7a2ac6}@keyframes blue-pulse{0%{color:#17d6e8}50%{color:#a2eff6}100%{color:#17d6e8}}@keyframes blue-pulse-with-border{0%{border-color:#17d6e8;color:#17d6e8}50%{border-color:#a2eff6;color:#a2eff6}100%{border-color:#17d6e8;color:#17d6e8}}@keyframes blue-pulse-background{0%{background-color:#17d6e8}50%{background-color:#a2eff6}100%{background-color:#17d6e8}}
+h1{font-size:68dp;letter-spacing:4.76dp;line-height:68dp;font-style:normal;font-weight:700}h2{font-size:52dp;letter-spacing:3.64dp;line-height:52dp;font-style:normal;font-weight:700}h3,.tab{font-size:36dp;letter-spacing:2.52dp;line-height:36dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button--large{font-size:36dp;letter-spacing:3.96dp;line-height:36dp;font-style:normal;font-weight:700}.label-md,.config-debug-option__label,.button,.config-option__title,.config-option--hz .config-option__title,.config-group__title,.control-option__label{font-size:28dp;letter-spacing:3.08dp;line-height:28dp;font-style:normal;font-weight:700}.label-sm,.config-debug__select-wrapper .config-debug__select-label,.subtitle-title__disclaimer,.config-option__range-label,.config-option-range__label,.config-option__radio-tabs .config-option__tab-label,.config-option__list .config-option__tab-label,.centered-page__controls>label{font-size:20dp;letter-spacing:2.8dp;line-height:20dp;font-style:normal;font-weight:700;text-transform:uppercase}.config-option__details{font-size:18dp;letter-spacing:2.52dp;line-height:18dp;font-style:normal;font-weight:400}body,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.config-description__contents,.config__wrapper p{font-size:20dp;letter-spacing:0dp;line-height:20dp;font-style:normal;font-weight:400}.toggle__icon{font-family:promptfont;font-size:56dp;font-style:normal;font-weight:400;line-height:56dp}.prompt-font{font-family:promptfont;font-size:40dp;font-style:normal;font-weight:400;line-height:40dp}.prompt-font-sm,.input-viz__mappings div{font-family:promptfont;font-size:32dp;font-style:normal;font-weight:400;line-height:32dp}.nav-vert,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){nav-up:auto;nav-down:auto}.nav-horiz,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){nav-right:auto;nav-left:auto}.nav-foc,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){focus:auto;tab-index:auto}h1{font-size:68dp;letter-spacing:4.76dp;line-height:68dp;font-style:normal;font-weight:700}h2{font-size:52dp;letter-spacing:3.64dp;line-height:52dp;font-style:normal;font-weight:700}h3,.tab{font-size:36dp;letter-spacing:2.52dp;line-height:36dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button--large{font-size:36dp;letter-spacing:3.96dp;line-height:36dp;font-style:normal;font-weight:700}.label-md,.config-debug-option__label,.button,.config-option__title,.config-option--hz .config-option__title,.config-group__title,.control-option__label{font-size:28dp;letter-spacing:3.08dp;line-height:28dp;font-style:normal;font-weight:700}.label-sm,.config-debug__select-wrapper .config-debug__select-label,.subtitle-title__disclaimer,.config-option__range-label,.config-option-range__label,.config-option__radio-tabs .config-option__tab-label,.config-option__list .config-option__tab-label,.centered-page__controls>label{font-size:20dp;letter-spacing:2.8dp;line-height:20dp;font-style:normal;font-weight:700;text-transform:uppercase}.config-option__details{font-size:18dp;letter-spacing:2.52dp;line-height:18dp;font-style:normal;font-weight:400}body,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.config-description__contents,.config__wrapper p{font-size:20dp;letter-spacing:0dp;line-height:20dp;font-style:normal;font-weight:400}.toggle__icon{font-family:promptfont;font-size:56dp;font-style:normal;font-weight:400;line-height:56dp}.prompt-font{font-family:promptfont;font-size:40dp;font-style:normal;font-weight:400;line-height:40dp}.prompt-font-sm,.input-viz__mappings div{font-family:promptfont;font-size:32dp;font-style:normal;font-weight:400;line-height:32dp}.nav-vert,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){nav-up:auto;nav-down:auto}.nav-horiz,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){nav-right:auto;nav-left:auto}.nav-foc,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){focus:auto;tab-index:auto}*{box-sizing:border-box}hr{display:block;padding:1.5dp;background:#08070d}body{color:#fff;font-family:chiaro;font-size:20dp;font-style:normal;font-weight:normal}div#window{position:relative;box-sizing:border-box;width:100%;height:100%;border-color:rgba(255,255,255,.2);background-color:#121018}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;text-align:left;cursor:text}textarea{padding:14dp 12dp 10dp;text-align:left;cursor:text}input.text,input.password,select,textarea{height:auto}table input.text{box-sizing:border-box;width:100%;height:auto;margin:0;border-width:1.1dp;border-color:#000;background-color:#fff;font-size:15dp;line-height:1;decorator:none}input.radio{flex:0;width:0dp;nav-up:auto;nav-right:auto;nav-down:auto;nav-left:auto;tab-index:auto;focus:auto}input.checkbox{width:20dp;height:20dp;nav-up:auto;nav-right:auto;nav-down:auto;nav-left:auto;tab-index:auto;focus:auto}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;position:relative;flex:1 1 100%;flex-direction:column;width:100%;max-width:1692.4444444444dp;height:100%;margin:auto;border-width:1.1dp;border-radius:16dp;border-color:rgba(255,255,255,.2);background:rgba(8,7,13,.9)}.centered-page__modal>.tabs{display:flex;position:relative;flex:1 1 100%;flex-direction:column;width:100%;max-width:1692.4444444444dp;height:100%;margin:auto}.centered-page__modal panels{flex:1 1 100%}.centered-page__controls{display:flex;position:absolute;bottom:24dp;flex-direction:row;align-items:center;justify-content:center;width:100%;max-width:1692.4444444444dp;height:auto;margin:0 auto}.centered-page__controls>label{display:inline-block;align-items:center;justify-content:space-between;width:auto;height:24dp}.centered-page__controls>label:not(:last-child){margin-right:40dp}.centered-page__controls>label>span:first-child{margin-right:4dp}.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:2 1 400dp;flex-direction:row;align-items:center;justify-content:space-between;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;flex:1 1 100%;align-items:center;justify-content:center;width:100%;height:56dp;margin:0 4dp;padding:8dp;border-width:1.1dp;border-radius:8dp;border-color:rgba(190,184,219,.1);background-color:rgba(190,184,219,.1)}.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;border-color:#f2f2f2;background-color:rgba(255,255,255,.1)}.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)}100%{transform:scale(1)}}.control-option__binding-recording{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;display:flex;position:absolute;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;opacity:0}.control-option__binding-recording .control-option__binding-circle{width:24dp;height:24dp;animation:1.5s sine-in-out infinite control-option__binding-recording-scale;border-radius:24dp;background-color:#f86039}.control-option__binding-recording .control-option__binding-edge{position:absolute;top:50%;left:50%;width:36dp;height:36dp;transform:translate(-50%, -50%)}.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;margin:0;padding:20dp 24dp;transition:color .05s linear-in-out;opacity:.9;background-color:rgba(0,0,0,0);color:rgba(255,255,255,.6)}.tab:selected{color:#f2f2f2}.tab:selected .tab__indicator{background-color:rgba(255,255,255,.6)}.tab:selected:hover{cursor:default}.rmlui-window:not([mouse-active]) .tab:focus{transition:none;animation:blue-pulse .75s infinite}.rmlui-window:not([mouse-active]) .tab:focus:selected .tab__indicator{animation:blue-pulse-background .75s infinite}.tab:focus,.tab:hover{opacity:1;color:#f2f2f2;cursor:pointer}.tab__indicator{position:absolute;right:0;bottom:2dp;left:0;height:2dp;background-color:rgba(0,0,0,0)}.config__icon-buttons{display:flex;position:absolute;top:8dp;right:0dp;flex-direction:row;align-items:center;justify-content:flex-end;width:auto}.config__icon-buttons .icon-button{margin:0 8dp}.config__form{border-top-width:1.1dp;border-top-color:rgba(255,255,255,.1);display:flex;flex:1 1 100%;flex-direction:column;justify-content:space-between;width:100%;height:100%;border-bottom-right-radius:16dp;border-bottom-left-radius:16dp}.config__wrapper{flex:1 1 100%;width:auto;height:auto;padding:16dp;border-radius:0dp;border-bottom-right-radius:16dp;border-bottom-left-radius:16dp;background-color:rgba(0,0,0,.35);text-align:left}.config__wrapper p{padding:16dp;line-height:28dp;white-space:pre-line}.config__wrapper p b{color:#b97df2}.config__wrapper p i{color:#e9cd35;font-style:normal}.config__hz-wrapper{display:flex;flex:1 1 100%;flex-direction:row;width:100%;height:100%;border-radius:0dp;text-align:left}.config__header,.config__footer{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:rgba(0,0,0,.35)}.config__header{border-bottom-width:1.1dp;border-bottom-color:rgba(255,255,255,.1);padding:12dp 20dp}.config__footer{border-top-width:1.1dp;border-top-color:rgba(255,255,255,.1);padding:20dp 20dp;border-bottom-right-radius:16dp;border-bottom-left-radius:16dp}.config__header-left{display:flex;flex:1 1 auto;flex-direction:row}.config__header-left>:not(:first-child){margin-left:8dp}.config__row{display:flex;flex-direction:row}.config-group{position:relative}.config-group--scrollable{flex:1 1 100%;width:auto;height:auto;padding:0 0 0 16dp}.config-group--scrollable .config-group__wrapper{max-height:100%;overflow-y:auto}.config-group__title{color:#b97df2}.config-group__title--hidden{display:none}.config-group__wrapper{padding:16dp 0}.config-option{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin:16dp 0dp 24dp}.config-option--hz{flex-direction:row-reverse;align-items:center;margin-top:4dp;margin-bottom:4dp}.config-option--hz .config-option__title{flex:1 1 100%}.config-option--hz .config-option__list{flex:1 1 auto;width:auto}.config-option--hz:first-child{margin-top:0}.config-option--hz:last-child{margin-bottom:0}.config-option__title{padding:0 12dp}.config-option__radio-tabs,.config-option__list{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;height:auto;padding:0}.config-option__radio-tabs input:first-of-type,.config-option__list input:first-of-type{nav-left:none}.config-option__radio-tabs input:last-of-type,.config-option__list input:last-of-type{nav-right:none}.config-option__radio-tabs .config-option__tab-label,.config-option__list .config-option__tab-label{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;display:block;position:relative;height:auto;margin:4dp 12dp 0;padding:8dp 0;color:rgba(255,255,255,.6);tab-index:none}.config-option__radio-tabs .config-option__tab-label:hover,.config-option__list .config-option__tab-label:hover{color:#f2f2f2;cursor:pointer}.config-option__radio-tabs .config-option__checkbox-wrapper,.config-option__list .config-option__checkbox-wrapper{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;width:32dp;height:32dp;margin:4dp 12dp 0;border-radius:8dp;opacity:.5;background-color:rgba(190,184,219,.1);cursor:pointer}.config-option__radio-tabs .config-option__checkbox-wrapper:hover,.config-option__list .config-option__checkbox-wrapper:hover{opacity:1}.config-option__radio-tabs .config-option__checkbox-wrapper[checked],.config-option__list .config-option__checkbox-wrapper[checked]{background-color:#33f}.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;visibility:visible;width:0;height:0}.config-option__radio-tabs input.radio,.config-option__list input.radio{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;visibility:visible;width:0;height:0}.config-option__radio-tabs input.radio:not(:disabled):checked+.config-option__tab-label,.config-option__list input.radio:not(:disabled):checked+.config-option__tab-label{border-bottom:1dp;border-color:#f2f2f2;color:#f2f2f2}.config-option__radio-tabs input.radio:not(:disabled):checked+.config-option__tab-label:hover,.config-option__list input.radio:not(:disabled):checked+.config-option__tab-label:hover{cursor:default}.rmlui-window:not([mouse-active]) .config-option__radio-tabs input.radio:not(:disabled):focus+.config-option__tab-label,.rmlui-window:not([mouse-active]) .config-option__list input.radio:not(:disabled):focus+.config-option__tab-label{transition:none;animation:blue-pulse .75s infinite;border-color:#17d6e8;color:#17d6e8}.config-option__radio-tabs input.radio:not(:disabled):focus+.config-option__tab-label,.config-option__radio-tabs input.radio:not(:disabled):hover+.config-option__tab-label,.config-option__list input.radio:not(:disabled):focus+.config-option__tab-label,.config-option__list input.radio:not(:disabled):hover+.config-option__tab-label{color:#f2f2f2}.config-option__radio-tabs input.radio:disabled+.config-option__tab-label,.config-option__list input.radio:disabled+.config-option__tab-label{opacity:.5}.config-option__radio-tabs input.radio:disabled+.config-option__tab-label:hover,.config-option__list input.radio:disabled+.config-option__tab-label:hover{cursor:default}.config-option__radio-tabs input.range slidertrack,.config-option__list input.range slidertrack{transition:color .05s linear-in-out,background-color .05s linear-in-out;height:2dp;margin-top:8dp;background-color:rgba(255,255,255,.2)}.config-option__radio-tabs input.range sliderbar,.config-option__list input.range sliderbar{transition:color .05s linear-in-out,background-color .05s linear-in-out;width:16dp;height:16dp;margin-top:1dp;margin-right:-8dp;margin-left:-8dp;transition:background-color .05s linear-in-out;border-radius:8dp;background-color:#ccc}.rmlui-window:not([mouse-active]) .config-option__radio-tabs input.range sliderbar:focus,.rmlui-window:not([mouse-active]) .config-option__list input.range sliderbar:focus{border-width:1.1dp;border-color:#33f;animation:blue-pulse-background .75s infinite}.config-option__radio-tabs input.range sliderbar:hover,.config-option__list input.range sliderbar:hover{background-color:#f2f2f2;cursor:pointer}.config-option__radio-tabs input.range sliderbar:active,.config-option__radio-tabs input.range slidertrack:active+sliderbar,.config-option__list input.range sliderbar:active,.config-option__list input.range slidertrack:active+sliderbar{background-color:#17d6e8}.config-option__radio-tabs input.range sliderarrowdec,.config-option__radio-tabs input.range sliderarrowinc,.config-option__list input.range sliderarrowdec,.config-option__list input.range sliderarrowinc{display:none}.config-option__details{height:18dp;margin:14dp 12dp 0;color:#b97df2}.config-option-range{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;max-width:360dp;height:auto;margin-top:4dp;padding:0}.config-option-range__label{display:block;width:56dp;margin:0 12dp;margin-right:16dp;padding:0;color:#f2f2f2;tab-index:none}.config-option-range__range-input{flex:1}.config-option-range__range-input slidertrack{transition:color .05s linear-in-out,background-color .05s linear-in-out;height:2dp;margin-top:8dp;background-color:rgba(255,255,255,.2)}.config-option-range__range-input sliderbar{transition:color .05s linear-in-out,background-color .05s linear-in-out;width:16dp;height:16dp;margin-top:1dp;margin-right:-8dp;margin-left:-8dp;transition:background-color .05s linear-in-out;border-radius:8dp;background-color:#ccc}.rmlui-window:not([mouse-active]) .config-option-range__range-input sliderbar:focus{border-width:1.1dp;border-color:#33f;animation:blue-pulse-background .75s infinite}.config-option-range__range-input sliderbar:hover{background-color:#f2f2f2;cursor:pointer}.config-option-range__range-input sliderbar:active,.config-option-range__range-input slidertrack:active+sliderbar{background-color:#17d6e8}.config-option-range__range-input sliderarrowdec,.config-option-range__range-input sliderarrowinc{display:none}.config-option__range-wrapper{max-width:360dp;margin-top:4dp}.config-option__range-label{display:block;width:56dp;margin:0 12dp;margin-right:16dp;padding:0;color:#f2f2f2;tab-index:none}.config-description{flex:1 1 100%;width:auto;height:auto;padding:16dp;border-radius:0dp;border-bottom-right-radius:16dp;border-bottom-left-radius:16dp;background-color:rgba(0,0,0,.35);text-align:left}.config-description__contents{padding:16dp;line-height:28dp;white-space:pre-line}.config-description__contents b{color:#b97df2}.config-description__contents i{color:#e9cd35;font-style:normal}.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;min-width:640dp;height:100%}.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;flex:1 1 100%;width:auto;max-width:1040.4444444444dp;height:auto;max-height:780.3333333333dp;margin:auto 0}.input-config__visual-aspect{position:relative;width:100%;margin:auto 0;padding-bottom:75%;background-color:rgba(0,0,0,.35)}.input-config__visual{display:flex;position:absolute;top:16dp;right:16dp;bottom:16dp;left:16dp;flex-direction:column;border-radius:108dp;background-color:rgba(255,255,255,.05)}.input-config__visual-half{display:flex;position:relative;flex:1 1 100%;flex-direction:row;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%;align-items:flex-start;justify-content:flex-start;width:auto}.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;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center}.input-viz{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;display:flex;position:relative;align-items:center;justify-content:center}.input-viz>svg:not(.input-viz__dpad-arrow){position:absolute;top:0;right:0;bottom:0;left: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{margin-top:auto}.input-viz__button--A svg{image-color:#33f}.input-viz__button--B svg{image-color:#45d043}.input-viz__button--Start svg{image-color:#f86039}.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-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__dpad-split,.input-viz__stick-split{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;width:100%;height:100%}.input-viz__dpad-split--vertical,.input-viz__stick-split--vertical{flex-direction:column;align-items:center;justify-content:space-between}.input-viz__dpad-split--horizontal,.input-viz__stick-split--horizontal{flex-direction:row;align-items:center;justify-content:space-between}.input-viz__dpad-split>div,.input-viz__stick-split>div{display:flex;flex:1 1 100%;flex-direction:row;align-items:center;justify-content:center}.input-viz__dpad-split>div{width:64dp;height:64dp}.input-viz__stick-split>div{width:66.6666666667dp;height:66.6666666667dp}.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;bottom:0;left: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}.input-config__main-buttons{display:flex;position:relative;flex-direction:row;justify-content:space-between;width:268dp;height:128dp;margin-right:10dp}.button{border-color:rgba(185,125,242,.8);background-color:rgba(185,125,242,.05);color:#ccc;transition:color .05s linear-in-out,background-color .05s linear-in-out;display:block;width:auto;height:auto;padding:23dp;border-width:1.1dp;border-radius:12dp}.button:focus,.button:hover{border-color:#b97df2;background-color:rgba(185,125,242,.3);color:#f2f2f2}.button:disabled,.button[disabled]{color:rgba(255,255,255,.6)}.button:active{background-color:rgba(185,125,242,.2);color:#f5f5f5}.button--primary{border-color:rgba(185,125,242,.8);background-color:rgba(185,125,242,.05);color:#ccc}.button--primary:focus,.button--primary:hover{border-color:#b97df2;background-color:rgba(185,125,242,.3);color:#f2f2f2}.button--primary:disabled,.button--primary[disabled]{color:rgba(255,255,255,.6)}.button--primary:active{background-color:rgba(185,125,242,.2);color:#f5f5f5}.button--secondary{border-color:rgba(23,214,232,.8);background-color:rgba(23,214,232,.05);color:#ccc}.button--secondary:focus,.button--secondary:hover{border-color:#17d6e8;background-color:rgba(23,214,232,.3);color:#f2f2f2}.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{border-color:rgba(242,242,242,.8);background-color:rgba(242,242,242,.05);color:#ccc}.button--tertiary:focus,.button--tertiary:hover{border-color:#f2f2f2;background-color:rgba(242,242,242,.3);color:#f2f2f2}.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{border-color:rgba(69,208,67,.8);background-color:rgba(69,208,67,.05);color:#ccc}.button--success:focus,.button--success:hover{border-color:#45d043;background-color:rgba(69,208,67,.3);color:#f2f2f2}.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{border-color:rgba(248,96,57,.8);background-color:rgba(248,96,57,.05);color:#ccc}.button--error:focus,.button--error:hover{border-color:#f86039;background-color:rgba(248,96,57,.3);color:#f2f2f2}.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{border-color:rgba(233,205,53,.8);background-color:rgba(233,205,53,.05);color:#ccc}.button--warning:focus,.button--warning:hover{border-color:#e9cd35;background-color:rgba(233,205,53,.3);color:#f2f2f2}.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;width:53.8dp;min-width:53.8dp;max-width:53.8dp;height:53.8dp;min-height:53.8dp;max-height:53.8dp;border-width:1.1dp;border-radius:26.9dp;border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0)}.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{border-color:rgba(185,125,242,.8);background-color:rgba(185,125,242,.05)}.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{border-color:rgba(23,214,232,.8);background-color:rgba(23,214,232,.05)}.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{border-color:rgba(242,242,242,.8);background-color:rgba(242,242,242,.05)}.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{border-color:rgba(69,208,67,.8);background-color:rgba(69,208,67,.05)}.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{border-color:rgba(248,96,57,.8);background-color:rgba(248,96,57,.05)}.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{border-color:rgba(233,205,53,.8);background-color:rgba(233,205,53,.05)}.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;position:relative;flex-direction:row;justify-content:space-between;width:100%;height:100%;background-color:#08070d}.launcher__vertical-split{display:flex;position:absolute;top:0;right:50%;bottom:0;left:0;flex-direction:column;align-items:flex-start;justify-content:space-between}.launcher__vertical-split--right{right:0;left:50%;align-items:flex-end}@keyframes slide-mm-bg-over{0%{transform:translateX(100dp)}100%{transform:translateX(0dp)}}.launcher__background-wrapper{display:flex;position:absolute;top:-55vw;right:-100%;bottom:-50vw;left:-70vw;align-items:center;justify-content:flex-start;transform:translateX(0dp);animation:25s cubic-out 1 slide-mm-bg-over}@keyframes fade-mm-in{0%{opacity:0}100%{opacity:.1}}.launcher__background-mm{position:absolute;top:0;bottom:0;left:0;width:auto;height:100%;animation:2.5s cubic-in-out 1 fade-mm-in;opacity:.1}.launcher__title-quadrant{flex:1 1 auto;width:auto;height:auto;padding-top:96dp;padding-left:96dp}.launcher__title-quadrant--right{padding-right:96dp;padding-left:0}.launcher__content-quadrant{display:flex;position:relative;flex:1 1 100%;flex-direction:column;align-items:flex-start;justify-content:flex-end;width:100%;height:auto;padding:32dp}.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{flex-direction:row-reverse;align-content:flex-end}.menu-list-item--right .menu-list-item__bullet{margin-left:12dp;opacity:1}.menu-list-item--right.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item--right.menu-list-item:hover:not(:disabled,[disabled]){decorator:horizontal-gradient(#7A2AC600 #DABAF714)}.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item:hover:not(:disabled,[disabled]){color:#b97df2;decorator:horizontal-gradient(#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{margin-right:12dp;opacity:0}.subtitle-title{display:block;position:relative;flex-direction:column;align-content:flex-start;align-items:flex-start;width:auto;height:auto;padding:0;background-color:rgba(0,0,0,0);color:#ccc;text-align:left;cursor:pointer}.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;position:relative;flex-direction:row;align-items:center;justify-content:space-between;width:162dp;height:72dp;border-radius:36dp;opacity:.9;background:rgba(0,0,0,0);cursor:pointer}.toggle:hover,.toggle:focus-visible,.toggle:focus{opacity:1;background-color:rgba(23,214,232,.3)}.toggle:active{opacity:1;background-color:rgba(23,214,232,.05)}.toggle .toggle__border{position:absolute;top:1.1dp;right:1.1dp;bottom:1.1dp;left:1.1dp;border-width:1.1dp;border-color:#a2eff6;display:block;border-radius:36dp}.toggle .toggle__floater{position:absolute;top:50%;left:4dp;width:80dp;height:64dp;transform:translateY(-50%);border-radius:32dp;background:#25a1ad}.toggle--checked .toggle__floater{left:78dp}.toggle--checked .toggle__icon.toggle__icon--left{opacity:.9;color:#a2eff6}.toggle--checked .toggle__icon.toggle__icon--right{opacity:1;color:#f2f2f2}.toggle__icons{display:flex;position:absolute;top:50%;right:16dp;left:16dp;align-items:center;justify-content:space-between;height:56dp;transform:translateY(-50%)}.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}.bottom-left{display:flex;position:absolute;bottom:4dp;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;max-width:1692.4444444444dp;height:auto;margin:0 4dp}.prompt__overlay{background-color:rgba(190,184,219,.1);pointer-events:auto}.prompt__overlay,.prompt__content-wrapper{position:absolute;top:0;right:0;bottom:0;left:0}.prompt__content-wrapper{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center}.prompt__content{display:flex;position:relative;flex:1 1 100%;flex-direction:column;width:100%;max-width:700dp;height:auto;margin:auto;border-width:1.1dp;border-radius:16dp;border-color:rgba(255,255,255,.2);background:rgba(8,7,13,.9)}.prompt__content h3,.prompt__content p{margin:24dp}.prompt__content p{margin-top:0}.prompt__controls{display:flex;flex-direction:row;justify-content:center;padding:24dp 12dp;border-top-width:1.1dp;border-top-color:rgba(255,255,255,.1)}.prompt__controls .button{min-width:233.3333333333dp;margin:0 12dp;text-align:center;nav-up:none;nav-down:none}.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;border-bottom-width:1.1dp;border-bottom-color:rgba(255,255,255,.1);display:block;position:relative;flex-direction:column;width:100%;height:auto;padding:12dp 4dp;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:not(:disabled,[disabled]),.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:not(:disabled,[disabled]) svg,.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{margin-left:8dp}.config-debug__option-split{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.config-debug-option__label{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:4dp 16dp 12dp;width:auto;height:auto;white-space:nowrap}.config-debug__option-controls{display:block;position:relative;flex:1 1 auto;height:auto;width:auto;max-width:800dp;padding:0 12dp}.config-debug__option-trigger{flex:1 1 auto}.config-debug__select-wrapper{display:flex;position:relative;flex-direction:row;align-items:center;justify-content:flex-start;flex:1 1 100%;width:auto;max-width:800dp;height:auto;padding:4dp}.config-debug__select-wrapper .config-debug__select-label{padding-right:16dp;flex:auto;width:196dp}.config-debug__select-wrapper .config-debug__select-label>div{display:inline;width:auto;height:auto}.config-debug__select-wrapper input{display:block;position:relative;box-sizing:border-box;padding:0;flex:1 1 100%;width:auto;height:20dp;margin:auto 0}.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-width:1.1dp;border-color:rgba(255,255,255,.5);display:block;position:relative;box-sizing:border-box;padding:0;flex:1 1 100%;width:auto;height:48dp;border-radius:12dp;background-color:rgba(255,255,255,.05);cursor:pointer;align-items:center;justify-content:flex-start;padding:14dp}.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,.config-debug__select-wrapper select:focus{border-width:1.1dp;border-color:rgba(255,255,255,.8);background-color:rgba(255,255,255,.2)}.config-debug__select-wrapper select selectvalue{display:inline;margin:auto 0;height:auto}.config-debug__select-wrapper select selectbox{border-width:1.1dp;border-color:rgba(255,255,255,.8);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,.config-debug__select-wrapper select selectbox option:focus{background-color:rgba(255,255,255,.2)}.config-debug__select-wrapper select selectbox option:hover:not(:checked){cursor:pointer}.config-debug__select-wrapper select selectbox option:checked{color:#fff;background-color:rgba(255,255,255,.05)}body{box-sizing:border-box;color:#f2f2f2;font-family:chiaro}.rmlui-window{opacity:1}.rmlui-window--hidden{opacity:0}.rmlui-window:not([mouse-active]){pointer-events:none}*,*:before,*:after{box-sizing:border-box}button{background-color:#7a2ac6}@keyframes blue-pulse{0%{color:#17d6e8}50%{color:#a2eff6}100%{color:#17d6e8}}@keyframes blue-pulse-with-border{0%{border-color:#17d6e8;color:#17d6e8}50%{border-color:#a2eff6;color:#a2eff6}100%{border-color:#17d6e8;color:#17d6e8}}@keyframes blue-pulse-background{0%{background-color:#17d6e8}50%{background-color:#a2eff6}100%{background-color:#17d6e8}}
diff --git a/assets/scss/styles/components/Config.scss b/assets/scss/styles/components/Config.scss
index d3bf065..54c6e1d 100644
--- a/assets/scss/styles/components/Config.scss
+++ b/assets/scss/styles/components/Config.scss
@@ -99,159 +99,3 @@
     flex-direction: row;
 }
 
-.config-option {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    margin: space(16) space(0) space(24);
-
-    &:last-child {
-        margin-top: space(16);
-    }
-}
-
-.config-option__title {
-    @extend %label-md;
-    padding: 0 space(12);
-}
-
-.config-option__list {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: flex-start;
-    width: 100%;
-    height: auto;
-    padding: 0;
-
-    input:first-of-type {
-        nav-left: none;
-    }
-
-    input:last-of-type {
-        nav-right: none;
-    }
-
-    .config-option__tab-label {
-        @extend %label-sm;
-        @include trans-colors-opa;
-        display: block;
-        position: relative;
-        height: auto;
-        margin: space(4) space(12) 0;
-        padding: space(8) 0;
-        color: $color-text-inactive;
-        tab-index: none;
-
-        &:hover {
-            color: $color-text;
-            cursor: pointer;
-        }
-    }
-
-    input.radio {
-        @extend %nav-all;
-        @include trans-colors-opa;
-        visibility: visible;
-        width: 0;
-        height: 0;
-
-        &:not(:disabled) {
-            &:checked + .config-option__tab-label {
-                border-bottom: 1dp;
-                border-color: $color-text;
-                color: $color-text;
-    
-                &:hover {
-                    cursor: default;
-                }
-            }
-    
-            .rmlui-window:not([mouse-active]) &:focus + .config-option__tab-label {
-                transition: none;
-                animation: $focus-anim-border;
-                border-color: $color-secondary;
-                color: $color-secondary;
-            }
-
-            &:focus + .config-option__tab-label,
-            &:hover + .config-option__tab-label {
-                color: $color-text;
-            }
-        }
-
-        &:disabled + .config-option__tab-label {
-            opacity: 0.5;
-
-            &:hover {
-                cursor: default;
-            }
-        }
-    }
-
-    input.range slidertrack {
-        @include trans-colors;
-        height: 2dp;
-        margin-top: space(8);
-        background-color: $color-border;
-    }
-    
-    input.range sliderbar {
-        @include trans-colors;
-        width: space(16);
-        height: space(16);
-        margin-top: space(1);
-        margin-right: space(-8);
-        margin-left: space(-8);
-        transition: background-color $transition-quick;
-        border-radius: 8dp;
-        background-color: $color-text-dim;
-        
-        .rmlui-window:not([mouse-active]) &:focus {
-            @include border($color-a);
-            animation: $focus-anim-bg;
-        }
-
-        &:hover {
-            background-color: $color-text;
-            cursor: pointer;
-        }
-    }
-    
-    input.range sliderbar:active,
-    input.range slidertrack:active + sliderbar {
-        background-color: $color-secondary;
-    }
-
-    input.range sliderarrowdec,
-    input.range sliderarrowinc {
-        display: none;
-    }
-}
-
-.config-option__details {
-    @extend %label-xs;
-    height: space(18);
-    margin: space(14) space(12) 0;
-    color: $color-primary;
-}
-
-.config-option__range-wrapper {
-    max-width: space(360);
-    margin-top: space(4);
-}
-
-.config-option__range-label {
-    @extend %label-sm;
-
-    display: block;
-    // flex: 0 0 space(32);
-    width: space(56);
-    margin: 0 12dp;
-    margin-right: space(16);
-    padding: 0;
-    color: $color-text;
-    tab-index: none;
-}
diff --git a/assets/scss/styles/components/ConfigDescription.scss b/assets/scss/styles/components/ConfigDescription.scss
new file mode 100644
index 0000000..2f4966f
--- /dev/null
+++ b/assets/scss/styles/components/ConfigDescription.scss
@@ -0,0 +1,27 @@
+.config-description {
+    flex: 1 1 100%;
+    width: auto;
+    height: auto;
+    padding: space(16);
+    border-radius: 0dp;
+    border-bottom-right-radius: $border-radius-modal;
+    border-bottom-left-radius: $border-radius-modal;
+    background-color: $color-bg-shadow;
+    text-align: left;
+
+    &__contents {
+        @extend %body;
+        padding: space(16);
+        line-height: space(28);
+        white-space: pre-line;
+
+        b {
+            color: $color-primary;
+        }
+
+        i {
+            color: $color-warning;
+            font-style: normal;
+        }
+    }
+}
diff --git a/assets/scss/styles/components/ConfigGroup.scss b/assets/scss/styles/components/ConfigGroup.scss
new file mode 100644
index 0000000..9f6444b
--- /dev/null
+++ b/assets/scss/styles/components/ConfigGroup.scss
@@ -0,0 +1,29 @@
+
+.config-group {
+    position: relative;
+
+    &--scrollable {
+        flex: 1 1 100%;
+        width: auto;
+        height: auto;
+        padding: 0 0 0 space(16);
+        
+        .config-group__wrapper {
+            max-height: 100%;
+            overflow-y: auto;
+        }
+    }
+
+    &__title {
+        @extend %label-md;
+        color: $color-primary;
+
+        &--hidden {
+            display: none;
+        }
+    }
+    
+    &__wrapper {
+        padding: space(16) 0;
+    }
+}
diff --git a/assets/scss/styles/components/ConfigOption.scss b/assets/scss/styles/components/ConfigOption.scss
new file mode 100644
index 0000000..2ae1fec
--- /dev/null
+++ b/assets/scss/styles/components/ConfigOption.scss
@@ -0,0 +1,274 @@
+.config-option {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    margin: space(16) space(0) space(24);
+
+    &--hz {
+        flex-direction: row-reverse;
+        align-items: center;
+        margin-top: space(4);
+        margin-bottom: space(4);
+
+        .config-option__title {
+            @extend %label-md;
+            flex: 1 1 100%;
+        }
+
+        .config-option__list {
+            flex: 1 1 auto;
+            width: auto;
+        }
+
+        &:first-child {
+            margin-top: 0;
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+
+.config-option__title {
+    @extend %label-md;
+    padding: 0 space(12);
+}
+
+.config-option__radio-tabs,
+.config-option__list {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+    width: 100%;
+    height: auto;
+    padding: 0;
+
+    input:first-of-type {
+        nav-left: none;
+    }
+
+    input:last-of-type {
+        nav-right: none;
+    }
+
+    .config-option__tab-label {
+        @extend %label-sm;
+        @include trans-colors-opa;
+        display: block;
+        position: relative;
+        height: auto;
+        margin: space(4) space(12) 0;
+        padding: space(8) 0;
+        color: $color-text-inactive;
+        tab-index: none;
+
+        &:hover {
+            color: $color-text;
+            cursor: pointer;
+        }
+    }
+
+    .config-option__checkbox-wrapper {
+        @include trans-colors-opa;
+        width: space(32);
+        height: space(32);
+        margin: space(4) space(12) 0;
+        border-radius: $border-radius-sm;
+        opacity: 0.5;
+        background-color: $color-bg-overlay;
+        cursor: pointer;
+
+        &:hover {
+            opacity: 1;
+        }
+        
+        &[checked] {
+            background-color: $color-a;
+        }
+    }
+
+    .config-option__checkbox {
+        @extend %nav-all;
+        @include trans-colors-opa;
+        visibility: visible;
+        width: 0;
+        height: 0;
+    }
+
+    // TODO: Remove & Replace old stylings
+    input.radio {
+        @extend %nav-all;
+        @include trans-colors-opa;
+        visibility: visible;
+        width: 0;
+        height: 0;
+
+        &:not(:disabled) {
+            &:checked + .config-option__tab-label {
+                border-bottom: 1dp;
+                border-color: $color-text;
+                color: $color-text;
+    
+                &:hover {
+                    cursor: default;
+                }
+            }
+    
+            .rmlui-window:not([mouse-active]) &:focus + .config-option__tab-label {
+                transition: none;
+                animation: $focus-anim-border;
+                border-color: $color-secondary;
+                color: $color-secondary;
+            }
+
+            &:focus + .config-option__tab-label,
+            &:hover + .config-option__tab-label {
+                color: $color-text;
+            }
+        }
+
+        &:disabled + .config-option__tab-label {
+            opacity: 0.5;
+
+            &:hover {
+                cursor: default;
+            }
+        }
+    }
+
+    input.range slidertrack {
+        @include trans-colors;
+        height: 2dp;
+        margin-top: space(8);
+        background-color: $color-border;
+    }
+    
+    input.range sliderbar {
+        @include trans-colors;
+        width: space(16);
+        height: space(16);
+        margin-top: space(1);
+        margin-right: space(-8);
+        margin-left: space(-8);
+        transition: background-color $transition-quick;
+        border-radius: 8dp;
+        background-color: $color-text-dim;
+        
+        .rmlui-window:not([mouse-active]) &:focus {
+            @include border($color-a);
+            animation: $focus-anim-bg;
+        }
+
+        &:hover {
+            background-color: $color-text;
+            cursor: pointer;
+        }
+    }
+    
+    input.range sliderbar:active,
+    input.range slidertrack:active + sliderbar {
+        background-color: $color-secondary;
+    }
+
+    input.range sliderarrowdec,
+    input.range sliderarrowinc {
+        display: none;
+    }
+}
+
+.config-option__details {
+    @extend %label-xs;
+    height: space(18);
+    margin: space(14) space(12) 0;
+    color: $color-primary;
+}
+
+.config-option-range {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+    width: 100%;
+    max-width: space(360);
+    height: auto;
+    margin-top: space(4);
+    padding: 0;
+
+    &__label {
+        @extend %label-sm;
+
+        display: block;
+        width: space(56);
+        margin: 0 12dp;
+        margin-right: space(16);
+        padding: 0;
+        color: $color-text;
+        tab-index: none;
+    }
+
+    &__range-input {
+        flex: 1;
+
+        slidertrack {
+            @include trans-colors;
+            height: 2dp;
+            margin-top: space(8);
+            background-color: $color-border;
+        }
+        
+        sliderbar {
+            @include trans-colors;
+            width: space(16);
+            height: space(16);
+            margin-top: space(1);
+            margin-right: space(-8);
+            margin-left: space(-8);
+            transition: background-color $transition-quick;
+            border-radius: 8dp;
+            background-color: $color-text-dim;
+            
+            .rmlui-window:not([mouse-active]) &:focus {
+                @include border($color-a);
+                animation: $focus-anim-bg;
+            }
+
+            &:hover {
+                background-color: $color-text;
+                cursor: pointer;
+            }
+        }
+        
+        sliderbar:active,
+        slidertrack:active + sliderbar {
+            background-color: $color-secondary;
+        }
+
+        sliderarrowdec,
+        sliderarrowinc {
+            display: none;
+        }
+    }
+
+}
+
+.config-option__range-wrapper {
+    max-width: space(360);
+    margin-top: space(4);
+}
+
+.config-option__range-label {
+    @extend %label-sm;
+
+    display: block;
+    // flex: 0 0 space(32);
+    width: space(56);
+    margin: 0 12dp;
+    margin-right: space(16);
+    padding: 0;
+    color: $color-text;
+    tab-index: none;
+}
diff --git a/assets/scss/styles/components/_components.scss b/assets/scss/styles/components/_components.scss
index 537d90b..b4a936e 100644
--- a/assets/scss/styles/components/_components.scss
+++ b/assets/scss/styles/components/_components.scss
@@ -2,6 +2,9 @@
 @import "./ControlOption";
 @import "./Tabs";
 @import "./Config";
+@import "./ConfigGroup";
+@import "./ConfigOption";
+@import "./ConfigDescription";
 @import "./InputConfig";
 @import "./Button";
 @import "./IconButton";
diff --git a/assets/scss/styles/globals/_old.scss b/assets/scss/styles/globals/_old.scss
index 6de429d..20351d9 100644
--- a/assets/scss/styles/globals/_old.scss
+++ b/assets/scss/styles/globals/_old.scss
@@ -189,8 +189,7 @@ select {
 //     background: rgb(150,150,150)
 // }
 
-input.radio,
-input.checkbox {
+input.radio {
     flex: 0;
     width:0dp;
     nav-up:auto;
@@ -200,3 +199,14 @@ input.checkbox {
     tab-index:auto;
     focus:auto;
 }
+
+input.checkbox {
+    width: space(20);
+    height: space(20);
+    nav-up:auto;
+    nav-right:auto;
+    nav-down:auto;
+    nav-left:auto;
+    tab-index:auto;
+    focus:auto;
+}
diff --git a/config_example.cheats.en_us.json b/config_example.cheats.en_us.json
new file mode 100644
index 0000000..f14cb5c
--- /dev/null
+++ b/config_example.cheats.en_us.json
@@ -0,0 +1,27 @@
+{
+    "consumables": "Consumables",
+    "consumables/infinite_magic": "Infinite Magic",
+    "consumables/infinite_magic:description": "You get sooo much magic lol!!",
+    "consumables/infinite_rupees": "Infinite Rupees",
+    "consumables/infinite_arrows": "Infinite Arrows",
+    "consumables/infinite_bombs": "Infinite Bombs",
+    "consumables/infinite_health": "Infinite Health",
+
+    "gameplay": "Gameplay",
+
+    "gameplay/movement": "Movement",
+    "gameplay/movement/L_for_fast": "Hold L to move fast",
+    "gameplay/movement/L_for_fast/values/off": "Off",
+    "gameplay/movement/L_for_fast/values/x2": "X2",
+    "gameplay/movement/L_for_fast/values/x4": "X4",
+    "gameplay/movement/L_for_fast/values/x6": "X6",
+    "gameplay/movement/L_to_levitate": "Hold L to levitate",
+    "gameplay/movement/always_quickspin": "Always quickspin",
+    "gameplay/movement/always_quickspin:description": "Always <b>quickspin</b> whenever using your <i>sword</i> and in a <i>state</i> where <i>you</i> can <b>quickspin.</b><br /><br />yeah...",
+    "gameplay/movement/link_size": "Link's Size",
+
+    "gameplay/abilities": "Abilities",
+    "gameplay/abilities/fd_anywhere": "Fierce Deity Anywhere",
+    "gameplay/abilities/permanent_razor_sword": "Permanent Razor Sword",
+    "gameplay/abilities/permanent_razor_sword2": "MORE Permanent Razor Sword"
+}
diff --git a/config_example.cheats.json b/config_example.cheats.json
new file mode 100644
index 0000000..d9b9660
--- /dev/null
+++ b/config_example.cheats.json
@@ -0,0 +1,100 @@
+[
+    {
+        "type": "CheckboxGroup",
+        "key": "consumables",
+        "toggle": true,
+        "toggleDefault": false,
+        "options": [
+            {
+                "type": "Checkbox",
+                "key": "infinite_magic",
+                "default": false
+            },
+            {
+                "type": "Checkbox",
+                "key": "infinite_rupees",
+                "default": false
+            },
+            {
+                "type": "Checkbox",
+                "key": "infinite_arrows",
+                "default": false
+            },
+            {
+                "type": "Checkbox",
+                "key": "infinite_bombs",
+                "default": false
+            },
+            {
+                "type": "Checkbox",
+                "key": "infinite_health",
+                "default": false
+            }
+        ]
+    },
+    {
+        "type": "Group",
+        "key": "gameplay",
+        "toggle": true,
+        "toggleDefault": true,
+        "options": [
+            {
+                "type": "Group",
+                "key": "movement",
+                "options": [
+                    {
+                        "type": "RadioTabs",
+                        "key": "L_for_fast",
+                        "default": "x2",
+                        "values": [
+                            "off",
+                            "x2",
+                            "x4",
+                            "x6"
+                        ]
+                    },
+                    {
+                        "type": "Checkbox",
+                        "key": "L_to_levitate",
+                        "default": false
+                    },
+                    {
+                        "type": "Checkbox",
+                        "key": "always_quickspin",
+                        "default": false
+                    },
+                    {
+                        "type": "Range",
+                        "key": "link_size",
+                        "default": 100,
+                        "suffix": "%",
+                        "min": 20,
+                        "max": 400,
+                        "step": 20
+                    }
+                ]
+            },
+            {
+                "type": "Group",
+                "key": "abilities",
+                "options": [
+                    {
+                        "type": "Checkbox",
+                        "key": "fd_anywhere",
+                        "default": true
+                    },
+                    {
+                        "type": "Checkbox",
+                        "key": "permanent_razor_sword",
+                        "default": true
+                    },
+                    {
+                        "type": "Checkbox",
+                        "key": "permanent_razor_sword2",
+                        "default": true
+                    }
+                ]
+            }
+        ]
+    }
+]
diff --git a/include/recomp_ui.h b/include/recomp_ui.h
index b2eaba4..0720ba3 100644
--- a/include/recomp_ui.h
+++ b/include/recomp_ui.h
@@ -122,6 +122,8 @@ namespace recompui {
 	void message_box(const char* msg);
 
 	void set_render_hooks();
+
+	Rml::ElementPtr create_custom_element(Rml::Element* parent, std::string tag);
 }
 
 #endif
diff --git a/lib/N64ModernRuntime b/lib/N64ModernRuntime
index ce68e96..fabb26a 160000
--- a/lib/N64ModernRuntime
+++ b/lib/N64ModernRuntime
@@ -1 +1 @@
-Subproject commit ce68e96c171f7f036e29f539e22a604da04af824
+Subproject commit fabb26ab6e09c5758f52109188c238af25ee5f1d
diff --git a/src/game/recomp_api.cpp b/src/game/recomp_api.cpp
index 28b4779..fa62654 100644
--- a/src/game/recomp_api.cpp
+++ b/src/game/recomp_api.cpp
@@ -2,6 +2,7 @@
 
 #include "librecomp/recomp.h"
 #include "librecomp/overlays.hpp"
+#include "librecomp/config_store.hpp"
 #include "zelda_config.h"
 #include "recomp_input.h"
 #include "recomp_ui.h"
@@ -166,3 +167,20 @@ extern "C" void recomp_set_right_analog_suppressed(uint8_t* rdram, recomp_contex
 
     recomp::set_right_analog_suppressed(suppressed);
 }
+
+extern "C" void recomp_get_config_store_int(uint8_t* rdram, recomp_context* ctx) {
+    thread_local std::vector<char> key_buffer{};
+    key_buffer.clear();
+
+    char c;
+    PTR(char) cur_char = _arg<0, PTR(char)>(rdram, ctx);
+    size_t i = 0;
+    while ((c = MEM_B(cur_char, i)) != '\0') {
+         key_buffer.push_back(c);
+         i++;
+    }
+
+    _return(ctx, recomp::get_config_store_value<int>(
+        std::string_view{key_buffer.data(), key_buffer.size()}
+    ));
+}
diff --git a/src/ui/config_options/ConfigOption.cpp b/src/ui/config_options/ConfigOption.cpp
new file mode 100644
index 0000000..60696e1
--- /dev/null
+++ b/src/ui/config_options/ConfigOption.cpp
@@ -0,0 +1,31 @@
+
+#include "ConfigOption.h"
+#include "librecomp/config_store.hpp"
+#include <string>
+#include <unordered_map>
+
+using json = nlohmann::json;
+namespace recompui {
+
+bool ConfigOption::validate(json& opt_json) {
+    auto type_struct = get_type_structure();
+    for (const auto& [key, expected_type] : type_struct) {
+        if (!opt_json.contains(key) || opt_json[key].type() != expected_type) {
+            return false;
+        }
+    }
+    return true;
+}
+
+ConfigOption::ConfigOption(json& opt_json)
+{
+    type = opt_json[ConfigOption::schema::type];
+    key = opt_json[ConfigOption::schema::key];
+}
+
+ConfigOption::~ConfigOption()
+{
+
+}
+
+} // namespace Rml
diff --git a/src/ui/config_options/ConfigOption.h b/src/ui/config_options/ConfigOption.h
new file mode 100644
index 0000000..8b3f7af
--- /dev/null
+++ b/src/ui/config_options/ConfigOption.h
@@ -0,0 +1,65 @@
+#ifndef RECOMPUI_CONFIG_OPTION_H
+#define RECOMPUI_CONFIG_OPTION_H
+
+#include <string>
+#include "json/json.hpp"
+
+namespace recompui {
+
+enum class ConfigOptionType {
+    Label,
+    // Base types
+    Checkbox,
+    RadioTabs,
+    Dropdown,
+    Range,
+    Trigger,
+    // Group types
+    CheckboxGroup,
+    Group,
+    OptionCount
+};
+
+NLOHMANN_JSON_SERIALIZE_ENUM(ConfigOptionType, {
+    {ConfigOptionType::Label, "Label"},
+    {ConfigOptionType::Checkbox, "Checkbox"},
+    {ConfigOptionType::RadioTabs, "RadioTabs"},
+    {ConfigOptionType::Dropdown, "Dropdown"},
+    {ConfigOptionType::Range, "Range"},
+    {ConfigOptionType::Trigger, "Trigger"},
+    {ConfigOptionType::CheckboxGroup, "CheckboxGroup"},
+    {ConfigOptionType::Group, "Group"}
+});
+
+typedef std::unordered_map<std::string, nlohmann::detail::value_t> config_type_structure;
+
+inline bool config_option_is_group(ConfigOptionType option_type) {
+    return option_type == ConfigOptionType::Group || option_type == ConfigOptionType::CheckboxGroup;
+}
+
+/**
+    Base Config Option class. Defines what type of option or group it is, and
+    sets the key.
+ */
+
+class ConfigOption {
+public:
+	ConfigOption(nlohmann::json& opt_json);
+	virtual ~ConfigOption();
+
+    bool validate(nlohmann::json& opt_json);
+
+    ConfigOptionType type;
+    std::string key;
+
+    struct schema {
+        static constexpr const char* type = "type";
+        static constexpr const char* key  = "key";
+    };
+
+protected:
+    virtual const config_type_structure& get_type_structure() const = 0;
+};
+
+}
+#endif
diff --git a/src/ui/config_options/ConfigRegistry.cpp b/src/ui/config_options/ConfigRegistry.cpp
new file mode 100644
index 0000000..7763e68
--- /dev/null
+++ b/src/ui/config_options/ConfigRegistry.cpp
@@ -0,0 +1,230 @@
+#include "ConfigRegistry.h"
+#include "ConfigOption.h"
+#include "librecomp/config_store.hpp"
+
+using json = nlohmann::json;
+
+namespace recompui {
+
+ConfigRegistry config_registry = {{}, {}};
+
+#define TODO_PARSE_ERROR(m, t) printf("Value at key: \"%s\" was invalid. Expected: \"%s\"\n", m, t)
+
+std::string get_string_in_json(const json& j, const std::string& key) {
+    std::string ret;
+
+    auto find_it = j.find(key);
+    if (find_it != j.end()) {
+        auto at_val = j.at(key);
+        if (!at_val.is_string()) {
+            TODO_PARSE_ERROR(key, "string");
+        }
+
+        find_it->get_to(ret);
+    }
+
+    return ret;
+}
+
+std::string get_string_in_json_with_default(const json& j, const std::string& key, const std::string& default_val) {
+    std::string ret;
+
+    auto find_it = j.find(key);
+    if (find_it != j.end()) {
+        auto at_val = j.at(key);
+        if (!at_val.is_string()) {
+            return default_val;
+        }
+
+        find_it->get_to(ret);
+    } else {
+        return default_val;
+    }
+
+    return ret;
+}
+
+static bool validate_json_value_is_array(const json &j, const std::string& json_path, const std::string& arr_key) {
+    const auto &options = j.find(arr_key);
+    if (options == j.end()) {
+        TODO_PARSE_ERROR(json_path + "/" + arr_key, "array");
+        return false;
+    }
+    const auto &opt_array = j[arr_key];
+
+    if (!opt_array.is_array()) {
+        TODO_PARSE_ERROR(json_path + "/" + arr_key, "array");
+        return false;
+    }
+
+    return true;
+}
+
+// Option
+void register_config_option(
+    const json& j,
+    const std::string& previous_key, // previous path before current key
+    const std::string& config_group,
+    const std::string& json_path // path to this json object from the root
+) {
+    const std::string key = get_string_in_json(j, ConfigOption::schema::key);
+    const std::string this_key = previous_key + "/" + key;
+
+    ConfigOptionType type = get_value_in_json<ConfigOptionType>(j, ConfigOption::schema::type);
+
+    config_registry.key_ref_map[this_key] = { config_group, json_path };
+
+    switch (type) {
+        case ConfigOptionType::Checkbox: {
+            bool default_val = false;
+            if (j.find("default") != j.end()) {
+                default_val = get_value_in_json<bool>(j, "default");
+            }
+            recomp::set_config_store_value_and_default(this_key, default_val, default_val);
+            break;
+        }
+        case ConfigOptionType::RadioTabs: {
+            if (!validate_json_value_is_array(j, json_path, "values")) {
+                return;
+            }
+
+            int default_val = 0;
+            if (j.find("default") != j.end()) {
+                const auto &opt_array = j["values"];
+                const std::string default_val_string = get_string_in_json(j, "default");
+                // Based on default value's string, find which option index corresponds
+                for (int i = 0; i < opt_array.size(); i++) {
+                    const auto &j_opt = opt_array[i];
+                    if (!j_opt.is_string()) {
+                        TODO_PARSE_ERROR(key + "/values/" + std::to_string(i) , "string");
+                        return;
+                    }
+                    const std::string opt_val = j_opt.get<std::string>();
+                    if (opt_val == default_val_string) {
+                        default_val = i;
+                        break;
+                    }
+                }
+            }
+            recomp::set_config_store_value_and_default(this_key, default_val, default_val);
+            break;
+        }
+        case ConfigOptionType::Range: {
+            int default_val = 0;
+            int max = 0;
+            int min = 0;
+            int step = 1;
+
+            if (j.find("default") != j.end()) {
+                default_val = get_value_in_json<int>(j, "default");
+            }
+
+            // Max is required
+            if (j.find("max") != j.end()) {
+                max = get_value_in_json<int>(j, "max");
+                if (default_val > max) default_val = max;
+            } else {
+                TODO_PARSE_ERROR(key + "/max", "int");
+                return;
+            }
+
+            if (j.find("min") != j.end()) {
+                min = get_value_in_json<int>(j, "min");
+                if (default_val < min) default_val = min;
+            }
+
+            if (j.find("step") != j.end()) {
+                step = get_value_in_json<int>(j, "step");
+            }
+
+            assert(max > min);
+            assert(step < max - min);
+            recomp::set_config_store_value_and_default(this_key, default_val, default_val);
+            break;
+        }
+    }
+    if (j.find("label") != j.end()) {
+        const std::string label = get_string_in_json(j, "label");
+        recomp::set_config_store_value(this_key, label);
+    }
+
+    if ((type == ConfigOptionType::Group || type == ConfigOptionType::CheckboxGroup) && j.find("options") != j.end()) {
+        if (!validate_json_value_is_array(j, json_path, "options")) {
+            return;
+        }
+
+        const auto &opt_array = j["options"];
+
+        for (int i = 0; i < opt_array.size(); i++) {
+            const auto &el = opt_array[i];
+            register_config_option(
+                el,
+                this_key,
+                config_group,
+                json_path + "/options/" + std::to_string(i)
+            );
+        }
+    }
+}
+
+void register_config(const std::string &json_str, const std::string &config_group) {
+    config_registry.group_json_map[config_group] = json::parse(json_str);
+    const auto &j = config_registry.group_json_map[config_group];
+
+    if (!j.is_array()) {
+        TODO_PARSE_ERROR("/", "array");
+        return;
+    }
+
+    for (int i = 0; i < j.size(); i++) {
+        const auto &el = j[i];
+        register_config_option(
+            el,
+            config_group,
+            config_group,
+            "/" + std::to_string(i) // json_path at top level
+        );
+    }
+}
+
+void register_translation(const std::string &json_str, const std::string &config_group) {
+    const auto &j = json::parse(json_str);
+
+    if (!j.is_object()) {
+        TODO_PARSE_ERROR("/", "object");
+        return;
+    }
+
+    for (auto& el : j.items())
+    {
+        std::string translation_key = "translations/" + config_group + "/" + el.key();
+        const std::string value = el.value();
+        recomp::set_config_store_value(translation_key, value);
+    }
+}
+
+json get_json_from_key(const std::string &config_key) {
+    if (config_registry.key_ref_map.find(config_key) == config_registry.key_ref_map.end()) {
+        // TODO: handle not finding config_key
+        printf("FAILURE: AddOptionTypeElement failed to find config_key '%s' in config_registry.key_ref_map\n", config_key);
+    }
+    const JSONRef& json_ref = config_registry.key_ref_map[config_key];
+    const json& group_json = config_registry.group_json_map[json_ref.config_group];
+    json::json_pointer pointer(json_ref.json_path);
+    return group_json[pointer];
+}
+
+bool config_key_is_base_group(const std::string &config_group_key) {
+    // determine if the key references a base group by checking the group_json_map
+    if (config_registry.group_json_map.find(config_group_key) == config_registry.group_json_map.end()) {
+        return false;
+    }
+    return true;
+}
+
+json& get_group_json(const std::string &config_group_key) {
+    return config_registry.group_json_map[config_group_key];
+}
+
+
+} // namespace recompui
diff --git a/src/ui/config_options/ConfigRegistry.h b/src/ui/config_options/ConfigRegistry.h
new file mode 100644
index 0000000..724be15
--- /dev/null
+++ b/src/ui/config_options/ConfigRegistry.h
@@ -0,0 +1,66 @@
+#ifndef RECOMPUI_CONFIG_REGISTRY_H
+#define RECOMPUI_CONFIG_REGISTRY_H
+
+#include <string>
+#include <vector>
+#include <string>
+#include <unordered_map>
+#include <variant>
+#include <map>
+#include "json/json.hpp"
+
+namespace recompui {
+    struct JSONRef {
+        std::string config_group;
+        std::string json_path; // used as a json pointer
+    };
+    // config key -> JSONRef
+    typedef std::unordered_map<std::string, JSONRef> config_registry_key_reference_map;
+    // config group -> json
+    typedef std::unordered_map<std::string, nlohmann::json> config_registry_group_json_map;
+
+    struct ConfigRegistry {
+        config_registry_key_reference_map key_ref_map;
+        config_registry_group_json_map    group_json_map;
+    };
+
+    extern ConfigRegistry config_registry;
+
+    void register_config(const std::string& json_str, const std::string& config_group);
+    void register_translation(const std::string &json_str, const std::string &config_group);
+
+    nlohmann::json get_json_from_key(const std::string &config_key);
+    std::string get_string_in_json(const nlohmann::json& j, const std::string& key);
+    std::string get_string_in_json_with_default(const nlohmann::json& j, const std::string& key, const std::string& default_val);
+    bool config_key_is_base_group(const std::string &config_group_key);
+    nlohmann::json& get_group_json(const std::string &config_group_key);
+
+    #define TODO_PARSE_ERROR(m, t) printf("Value at key: \"%s\" was invalid. Expected: \"%s\"\n", m, t)
+
+    template <typename T>
+    T get_value_in_json(const nlohmann::json& j, const std::string& key) {
+        T ret;
+
+        auto find_it = j.find(key);
+        if (find_it != j.end()) {
+            auto at_val = j.at(key);
+            find_it->get_to(ret);
+        }
+
+        return ret;
+    }
+
+    template <typename T>
+    T get_value_in_json_with_default(const nlohmann::json& j, const std::string& key, T default_val) {
+        T ret = default_val;
+
+        auto find_it = j.find(key);
+        if (find_it != j.end()) {
+            auto at_val = j.at(key);
+            find_it->get_to(ret);
+        }
+
+        return ret;
+    }
+}
+#endif
diff --git a/src/ui/elements/ElementConfigGroup.cpp b/src/ui/elements/ElementConfigGroup.cpp
new file mode 100644
index 0000000..bb42611
--- /dev/null
+++ b/src/ui/elements/ElementConfigGroup.cpp
@@ -0,0 +1,139 @@
+
+#include "ElementConfigGroup.h"
+#include "ElementConfigOption.h"
+#include "../config_options/ConfigOption.h"
+#include "../config_options/ConfigRegistry.h"
+#include "ElementOptionTypeCheckbox.h"
+#include "librecomp/config_store.hpp"
+#include <string>
+#include "recomp_ui.h"
+#include <RmlUi/Core/ElementDocument.h>
+#include <RmlUi/Core/ElementText.h>
+#include <cassert>
+
+using json = nlohmann::json;
+
+namespace recompui {
+
+static const std::string config_group_base_class            = "config-group"; 
+static const std::string config_group_base_class_scrollable = config_group_base_class  + "--scrollable"; 
+static const std::string config_group_title_class           = config_group_base_class  + "__title"; 
+static const std::string config_group_title_class_hidden    = config_group_title_class + "--hidden"; 
+static const std::string config_group_wrapper_class         = config_group_base_class  + "__wrapper"; 
+
+ElementConfigGroup::ElementConfigGroup(const Rml::String& tag) : Rml::Element(tag)
+{
+    SetAttribute("recomp-store-element", true);
+    SetClass(config_group_base_class, true);
+
+    Rml::ElementDocument *doc = GetOwnerDocument();
+
+    {
+        Rml::Element *title_el = AppendChild(doc->CreateElement("div"));
+        title_el->SetClass(config_group_title_class, true);
+        {
+            Rml::Element *text_el = title_el->AppendChild(doc->CreateTextNode("replace me"));
+            text_el->SetId("config-group-label");
+        } // title_el
+
+        Rml::Element *div_el = AppendChild(doc->CreateElement("div"));
+        div_el->SetClass(config_group_wrapper_class, true);
+    }
+}
+
+ElementConfigGroup::~ElementConfigGroup()
+{
+
+}
+
+void ElementConfigGroup::SetTextLabel(const std::string& s) {
+    Rml::Element *title_container = GetChild(0);
+    Rml::ElementText *label = (Rml::ElementText *)title_container->GetElementById("config-group-label");
+    label->SetText(s);
+    DirtyLayout();
+}
+
+void ElementConfigGroup::ToggleTextLabelVisibility(bool show) {
+    Rml::Element *title_container = GetChild(0);
+    title_container->SetClass(config_group_title_class_hidden, !show);
+}
+
+void ElementConfigGroup::AddConfigOptionElement(const json& option_json) {
+    ConfigOptionType el_option_type = ConfigOptionType::Label;
+    from_json(option_json["type"], el_option_type);
+
+    const std::string key = get_string_in_json(option_json, ConfigOption::schema::key);
+
+    Rml::Element *option_container = GetChild(1);
+    Rml::Element *child_opt = nullptr;
+
+    if (config_option_is_group(el_option_type)) {
+        child_opt = (ElementConfigGroup *)option_container->AppendChild(
+            recompui::create_custom_element(GetOwnerDocument(), "recomp-config-group")
+        );
+        // TODO: Base class with option type + config_key
+        ((ElementConfigGroup *)child_opt)->option_type = el_option_type;
+    } else {
+        child_opt = (ElementConfigOption *)option_container->AppendChild(
+            recompui::create_custom_element(GetOwnerDocument(), "recomp-config-option")
+        );
+        // TODO: Base class with option type + config_key
+        ElementConfigOption *opt_as_conf_opt = (ElementConfigOption *)child_opt;
+        opt_as_conf_opt->option_type = el_option_type;
+        opt_as_conf_opt->in_checkbox_group = option_type == ConfigOptionType::CheckboxGroup;
+    }
+    std::string full_key = config_key + "/" + key;
+    child_opt->SetAttribute("recomp-data", full_key);
+}
+
+static nlohmann::json get_options(std::string& config_key) {
+    if (config_key_is_base_group(config_key)) {
+        return get_group_json(config_key);
+    }
+
+    const json& group_json = get_json_from_key(config_key);
+    return group_json["options"];
+}
+
+void ElementConfigGroup::OnAttributeChange(const Rml::ElementAttributes& changed_attributes)
+{
+	// Call through to the base element's OnAttributeChange().
+	Rml::Element::OnAttributeChange(changed_attributes);
+
+    auto config_store_key_attr = changed_attributes.find("recomp-data");
+    if (config_store_key_attr != changed_attributes.end() && config_store_key_attr->second.GetType() == Rml::Variant::STRING) {
+        config_key = config_store_key_attr->second.Get<Rml::String>();
+        bool is_base_group = config_key_is_base_group(config_key);
+    
+        option_type = ConfigOptionType::Label;
+
+        if (is_base_group) {
+            SetClass(config_group_base_class_scrollable, true);
+            option_type = ConfigOptionType::Group;
+            ToggleTextLabelVisibility(false);
+        } else {
+            try {
+                auto value = recomp::get_config_store_value<std::string>("translations/" + config_key);
+                SetTextLabel(value);
+            } catch (const std::runtime_error& e) {
+                SetTextLabel(e.what());
+            }
+
+            const json& group_json = get_json_from_key(config_key);
+
+            from_json(group_json["type"], option_type);
+            assert(
+                option_type == ConfigOptionType::Group || option_type == ConfigOptionType::CheckboxGroup);
+        }
+
+        const nlohmann::json& options = get_options(config_key);
+
+        for (int i = 0; i < options.size(); i++) {
+            const auto &el = options[i];
+            AddConfigOptionElement(el);
+        }
+		DirtyLayout();
+    }
+}
+
+} // namespace Rml
diff --git a/src/ui/elements/ElementConfigGroup.h b/src/ui/elements/ElementConfigGroup.h
new file mode 100644
index 0000000..9b8bf73
--- /dev/null
+++ b/src/ui/elements/ElementConfigGroup.h
@@ -0,0 +1,30 @@
+#ifndef RECOMPUI_ELEMENTS_CONFIG_GROUP_H
+#define RECOMPUI_ELEMENTS_CONFIG_GROUP_H
+
+#include "RmlUi/Core/Element.h"
+#include "json/json.hpp"
+#include "../config_options/ConfigOption.h"
+
+namespace recompui {
+
+/**
+    Base custom element representing a single config option.
+    Maps to other custom elements.
+ */
+
+class ElementConfigGroup : public Rml::Element {
+public:
+	ElementConfigGroup(const Rml::String& tag);
+	virtual ~ElementConfigGroup();
+
+    ConfigOptionType option_type;
+    std::string config_key;
+protected:
+    void OnAttributeChange(const Rml::ElementAttributes& changed_attributes);
+    void AddConfigOptionElement(const nlohmann::json& option_json);
+    void SetTextLabel(const std::string& s);
+    void ToggleTextLabelVisibility(bool show);
+};
+
+}
+#endif
diff --git a/src/ui/elements/ElementConfigOption.cpp b/src/ui/elements/ElementConfigOption.cpp
new file mode 100644
index 0000000..7f0d64e
--- /dev/null
+++ b/src/ui/elements/ElementConfigOption.cpp
@@ -0,0 +1,145 @@
+
+#include "ElementConfigOption.h"
+#include "../config_options/ConfigOption.h"
+#include "../config_options/ConfigRegistry.h"
+#include "ElementOptionTypeCheckbox.h"
+#include "ElementOptionTypeRadioTabs.h"
+#include "ElementOptionTypeRange.h"
+#include "librecomp/config_store.hpp"
+#include <string>
+#include "recomp_ui.h"
+#include <RmlUi/Core/ElementDocument.h>
+#include <RmlUi/Core/ElementText.h>
+
+using json = nlohmann::json;
+
+namespace recompui {
+
+static const std::string option_type_wrapper_id = "checkbox__input"; 
+
+static const std::string config_option_base_class    = "config-option"; 
+static const std::string config_option_base_class_hz = config_option_base_class + "--hz"; 
+static const std::string config_option_title_class   = config_option_base_class + "__title"; 
+static const std::string config_option_wrapper       = config_option_base_class + "__list"; // TODO: move hz listing to radio tabs, make this container dumber 
+
+ElementConfigOption::ElementConfigOption(const Rml::String& tag) : Rml::Element(tag)
+{
+    Rml::ElementDocument *doc = GetOwnerDocument();
+
+    SetAttribute("recomp-store-element", true);
+    SetClass(config_option_base_class, true);
+
+    {
+        Rml::Element *label_el = AppendChild(doc->CreateElement("label"));
+        label_el->SetClass(config_option_title_class, true);
+        {
+            Rml::Element *label_text_el = label_el->AppendChild(doc->CreateTextNode("Unknown"));
+            label_text_el->SetAttribute("id", "config-opt-label");
+        } // label_el
+
+        Rml::Element *option_type_wrapper = AppendChild(doc->CreateElement("div"));
+        option_type_wrapper->SetId(option_type_wrapper_id);
+        option_type_wrapper->SetClass(config_option_wrapper, true);
+    } // base element
+
+    AddEventListener(Rml::EventId::Mouseover, this, true);
+}
+
+ElementConfigOption::~ElementConfigOption()
+{
+    RemoveEventListener(Rml::EventId::Mouseover, this, true);
+}
+
+void ElementConfigOption::SetTextLabel(const std::string& s) {
+    Rml::ElementText *label = (Rml::ElementText *)GetElementById("config-opt-label");
+    label->SetText(s);
+    DirtyLayout();
+}
+
+Rml::Element *ElementConfigOption::GetOptionTypeWrapper() {
+    return GetElementById(option_type_wrapper_id);
+}
+
+template <typename T>
+static void add_option_el(Rml::ElementDocument *doc, Rml::Element *wrapper, const std::string& tag, std::string& config_key) {
+    T *opt = (T *)wrapper->AppendChild(recompui::create_custom_element(doc, tag));
+    opt->init_option(config_key);
+}
+
+void ElementConfigOption::AddOptionTypeElement() {
+    ConfigOptionType el_option_type = ConfigOptionType::Label;
+    const json& option_json = get_json_from_key(config_key);
+    from_json(option_json["type"], el_option_type);
+
+    Rml::Element *wrapper = GetOptionTypeWrapper();
+    Rml::ElementDocument *doc = GetOwnerDocument();
+
+    switch (el_option_type) {
+        default:
+            printf("No option type element exists for type '%d'\n", el_option_type);
+            return;
+        case ConfigOptionType::Checkbox: {
+            add_option_el<ElementOptionTypeCheckbox>(doc, wrapper, "recomp-option-type-checkbox", config_key);
+            break;
+        }
+        case ConfigOptionType::RadioTabs: {
+            add_option_el<ElementOptionTypeRadioTabs>(doc, wrapper, "recomp-option-type-radio-tabs", config_key);
+            break;
+        }
+        case ConfigOptionType::Range: {
+            add_option_el<ElementOptionTypeRange>(doc, wrapper, "recomp-option-type-range", config_key);
+            break;
+        }
+    }
+}
+
+void ElementConfigOption::OnAttributeChange(const Rml::ElementAttributes& changed_attributes)
+{
+	// Call through to the base element's OnAttributeChange().
+	Rml::Element::OnAttributeChange(changed_attributes);
+
+	bool dirty_layout = false;
+
+    auto config_store_key_attr = changed_attributes.find("recomp-data");
+    if (config_store_key_attr != changed_attributes.end() && config_store_key_attr->second.GetType() == Rml::Variant::STRING) {
+        config_key = config_store_key_attr->second.Get<Rml::String>();
+        if (in_checkbox_group) {
+            SetClass(config_option_base_class_hz, true);
+        }
+
+        try {
+            auto value = recomp::get_config_store_value<std::string>("translations/" + config_key);
+            SetTextLabel(value);
+            printf("found type and translation\n");
+            AddOptionTypeElement();
+        } catch (const std::runtime_error& e) {
+            SetTextLabel(e.what());
+        }
+        dirty_layout = true;
+    }
+
+	if (dirty_layout) {
+		DirtyLayout();
+    }
+}
+
+void ElementConfigOption::ProcessEvent(Rml::Event& event)
+{
+	// Set description key
+	if (event == Rml::EventId::Mouseover)
+	{
+		if (event.GetPhase() == Rml::EventPhase::Capture || event.GetPhase() == Rml::EventPhase::Target)
+		{
+            Rml::ElementList elements;
+            Rml::ElementDocument *doc = GetOwnerDocument();
+            GetElementsByTagName(elements, "input");
+            doc->GetElementsByTagName(elements, "recomp-description");
+            for (size_t i = 0; i < elements.size(); i++) {
+                Rml::Element *el = elements[i];
+                el->SetAttribute("recomp-data", config_key);
+            }
+		}
+	}
+}
+
+} // namespace Rml
diff --git a/src/ui/elements/ElementConfigOption.h b/src/ui/elements/ElementConfigOption.h
new file mode 100644
index 0000000..4794ed4
--- /dev/null
+++ b/src/ui/elements/ElementConfigOption.h
@@ -0,0 +1,33 @@
+#ifndef RECOMPUI_ELEMENTS_CONFIG_OPTION_H
+#define RECOMPUI_ELEMENTS_CONFIG_OPTION_H
+
+#include "RmlUi/Core/Element.h"
+#include "../config_options/ConfigOption.h"
+#include "RmlUi/Core/EventListener.h"
+
+namespace recompui {
+
+/**
+    Base custom element representing a single config option.
+    Maps to other custom elements.
+ */
+
+class ElementConfigOption : public Rml::Element, public Rml::EventListener {
+public:
+	ElementConfigOption(const Rml::String& tag);
+	virtual ~ElementConfigOption();
+
+    ConfigOptionType option_type;
+    std::string config_key;
+    bool in_checkbox_group = false;
+    
+protected:
+    void OnAttributeChange(const Rml::ElementAttributes& changed_attributes);
+    void SetTextLabel(const std::string& s);
+    void AddOptionTypeElement();
+    Rml::Element *GetOptionTypeWrapper();
+    void ProcessEvent(Rml::Event& event) override;
+};
+
+}
+#endif
diff --git a/src/ui/elements/ElementDescription.cpp b/src/ui/elements/ElementDescription.cpp
new file mode 100644
index 0000000..64e5359
--- /dev/null
+++ b/src/ui/elements/ElementDescription.cpp
@@ -0,0 +1,61 @@
+
+#include "ElementDescription.h"
+#include "librecomp/config_store.hpp"
+#include "../config_options/ConfigRegistry.h"
+#include <string>
+#include <RmlUi/Core/ElementDocument.h>
+#include <RmlUi/Core/ElementText.h>
+
+using json = nlohmann::json;
+
+namespace recompui {
+
+static const std::string cls_base = "config-description"; 
+static const std::string cls_contents = cls_base + "__contents"; 
+
+static const std::string contents_id = cls_base + "__contents-text";
+
+static const std::string default_contents = ""; 
+
+ElementDescription::ElementDescription(const Rml::String& tag) : Rml::Element(tag)
+{
+    SetAttribute("recomp-store-element", true);
+    Rml::ElementDocument *doc = GetOwnerDocument();
+
+    SetClass(cls_base, true);
+    {
+        Rml::Element *p_el = AppendChild(doc->CreateElement("p"));
+        p_el->SetClass(cls_contents, true);
+        p_el->SetId(contents_id);
+    }
+}
+
+ElementDescription::~ElementDescription()
+{
+}
+
+void ElementDescription::update_text(const std::string& text) {
+    auto *p_el = GetElementById(contents_id);
+    p_el->SetInnerRML(text);
+    DirtyLayout();
+}
+
+void ElementDescription::OnAttributeChange(const Rml::ElementAttributes& changed_attributes)
+{
+	// Call through to the base element's OnAttributeChange().
+	Rml::Element::OnAttributeChange(changed_attributes);
+
+    auto config_store_key_attr = changed_attributes.find("recomp-data");
+    if (config_store_key_attr != changed_attributes.end() && config_store_key_attr->second.GetType() == Rml::Variant::STRING) {
+        config_key = config_store_key_attr->second.Get<Rml::String>();
+
+        try {
+            auto value = recomp::get_config_store_value<std::string>("translations/" + config_key + ":description");
+            update_text(value);
+        } catch (const std::runtime_error& e) {
+            update_text(default_contents);
+        }
+    }
+}
+
+} // namespace Rml
diff --git a/src/ui/elements/ElementDescription.h b/src/ui/elements/ElementDescription.h
new file mode 100644
index 0000000..73fb9e8
--- /dev/null
+++ b/src/ui/elements/ElementDescription.h
@@ -0,0 +1,22 @@
+#ifndef RECOMPUI_ELEMENT_DESCRIPTION_H
+#define RECOMPUI_ELEMENT_DESCRIPTION_H
+
+#include "RmlUi/Core/Element.h"
+#include "../config_options/ConfigOption.h"
+
+namespace recompui {
+
+class ElementDescription : public Rml::Element {
+public:
+	ElementDescription(const Rml::String& tag);
+	virtual ~ElementDescription();
+
+    std::string config_key;
+protected:
+	void update_text(const std::string& text_rml);
+private:
+	void OnAttributeChange(const Rml::ElementAttributes& changed_attributes);
+};
+
+} // namespace recompui
+#endif
diff --git a/src/ui/elements/ElementOptionTypeCheckbox.cpp b/src/ui/elements/ElementOptionTypeCheckbox.cpp
new file mode 100644
index 0000000..c0cdd3a
--- /dev/null
+++ b/src/ui/elements/ElementOptionTypeCheckbox.cpp
@@ -0,0 +1,78 @@
+
+#include "ElementOptionTypeCheckbox.h"
+#include "librecomp/config_store.hpp"
+#include "../config_options/ConfigRegistry.h"
+#include <string>
+#include <RmlUi/Core/ElementDocument.h>
+#include <RmlUi/Core/ElementText.h>
+
+using json = nlohmann::json;
+
+namespace recompui {
+
+static const std::string checkbox_input_id = "checkbox__input"; 
+
+ElementOptionTypeCheckbox::ElementOptionTypeCheckbox(const Rml::String& tag) : Rml::Element(tag)
+{
+    SetAttribute("recomp-store-element", true);
+    Rml::ElementDocument *doc = GetOwnerDocument();
+
+    SetClass("config-option__checkbox-wrapper", true);
+    {
+        Rml::Element *checkbox_el = AppendChild(doc->CreateElement("input"));
+        checkbox_el->SetId(checkbox_input_id);
+        checkbox_el->SetClass("config-option__checkbox", true);
+        checkbox_el->SetAttribute("type", "checkbox");
+    }
+    AddEventListener(Rml::EventId::Click, this, true);
+}
+
+ElementOptionTypeCheckbox::~ElementOptionTypeCheckbox()
+{
+    RemoveEventListener(Rml::EventId::Click, this, true);
+}
+
+Rml::ElementFormControlInput *ElementOptionTypeCheckbox::get_input() {
+    return (Rml::ElementFormControlInput *)GetElementById(checkbox_input_id);
+}
+
+void ElementOptionTypeCheckbox::set_checked(bool checked) {
+    auto *input_el = get_input();
+
+    if (checked) {
+        SetAttribute("checked", true);
+        input_el->SetAttribute("checked", true);
+    } else {
+        RemoveAttribute("checked");
+        input_el->RemoveAttribute("checked");
+    }
+    DirtyLayout();
+}
+
+void ElementOptionTypeCheckbox::init_option(std::string& _config_key) {
+    config_key = _config_key;
+    const json& option_json = get_json_from_key(config_key);
+    int value = recomp::get_config_store_value<int>(config_key);
+    set_checked(value);
+}
+
+void ElementOptionTypeCheckbox::ProcessEvent(Rml::Event& event)
+{
+	// Forward clicks to the target.
+	if (event == Rml::EventId::Click && !disable_click)
+	{
+		if (event.GetPhase() == Rml::EventPhase::Capture || event.GetPhase() == Rml::EventPhase::Target)
+		{
+            bool new_value = !recomp::get_config_store_value<int>(config_key);
+            recomp::set_config_store_value(config_key, new_value);
+            set_checked(new_value);
+		}
+	}
+}
+
+Rml::Element* ElementOptionTypeCheckbox::GetTarget()
+{
+	return get_input();
+}
+
+} // namespace Rml
diff --git a/src/ui/elements/ElementOptionTypeCheckbox.h b/src/ui/elements/ElementOptionTypeCheckbox.h
new file mode 100644
index 0000000..0d9326d
--- /dev/null
+++ b/src/ui/elements/ElementOptionTypeCheckbox.h
@@ -0,0 +1,34 @@
+#ifndef RECOMPUI_ELEMENT_OPTION_TYPE_CHECKBOX_H
+#define RECOMPUI_ELEMENT_OPTION_TYPE_CHECKBOX_H
+
+#include "RmlUi/Core/Element.h"
+#include "RmlUi/Core/Elements/ElementFormControlInput.h"
+#include "RmlUi/Core/EventListener.h"
+#include "../config_options/ConfigOption.h"
+
+namespace recompui {
+
+class ElementOptionTypeCheckbox : public Rml::Element, public Rml::EventListener {
+public:
+	ElementOptionTypeCheckbox(const Rml::String& tag);
+	virtual ~ElementOptionTypeCheckbox();
+
+    void init_option(std::string& _config_key);
+
+    std::string config_key;
+
+	const ConfigOptionType option_type = ConfigOptionType::Checkbox;
+protected:
+    Rml::ElementFormControlInput *get_input();
+
+	void ProcessEvent(Rml::Event& event) override;
+
+private:
+	Element* GetTarget();
+	void set_checked(bool checked);
+
+    bool disable_click = false;
+};
+
+} // namespace recompui
+#endif
diff --git a/src/ui/elements/ElementOptionTypeRadioTabs.cpp b/src/ui/elements/ElementOptionTypeRadioTabs.cpp
new file mode 100644
index 0000000..d9c92fd
--- /dev/null
+++ b/src/ui/elements/ElementOptionTypeRadioTabs.cpp
@@ -0,0 +1,97 @@
+
+#include "ElementOptionTypeRadioTabs.h"
+#include "librecomp/config_store.hpp"
+#include "../config_options/ConfigRegistry.h"
+#include <string>
+#include <RmlUi/Core/ElementDocument.h>
+#include <RmlUi/Core/ElementText.h>
+
+using json = nlohmann::json;
+
+namespace recompui {
+
+static const std::string radio_input_id = "recomp-radio__"; 
+
+ElementOptionTypeRadioTabs::ElementOptionTypeRadioTabs(const Rml::String& tag) : Rml::Element(tag)
+{
+    SetAttribute("recomp-store-element", true);
+    SetClass("config-option__radio-tabs", true);
+}
+
+ElementOptionTypeRadioTabs::~ElementOptionTypeRadioTabs()
+{
+    Rml::ElementList elements;
+    GetElementsByTagName(elements, "input");
+    for (int i = 0; i < elements.size(); i++) {
+        Rml::Element *el = elements[i];
+        el->RemoveEventListener(Rml::EventId::Click, this, false);
+    }
+}
+
+void ElementOptionTypeRadioTabs::set_cur_option(int opt) {
+    Rml::ElementList elements;
+    GetElementsByTagName(elements, "input");
+    for (int i = 0; i < elements.size(); i++) {
+        Rml::Element *el = elements[i];
+        if (i == opt) {
+            SetAttribute("checked", true);
+            el->SetAttribute("checked", true);
+        } else {
+            RemoveAttribute("checked");
+            el->RemoveAttribute("checked");
+        }
+    }
+
+    DirtyLayout();
+}
+
+void ElementOptionTypeRadioTabs::init_option(std::string& _config_key) {
+    config_key = _config_key;
+    const json& option_json = get_json_from_key(config_key);
+    int opt = recomp::get_config_store_value<int>(config_key);
+    const json& opt_array = option_json["values"];
+
+    for (int i = 0; i < opt_array.size(); i++) {
+        const auto &j_opt = opt_array[i];
+        const std::string opt_val = j_opt.get<std::string>();
+        const std::string opt_id = radio_input_id + config_key + "--" + opt_val;
+        
+        const std::string translation_key = "translations/" + config_key + "/values/" + opt_val;
+        const std::string& opt_text = recomp::get_config_store_value<std::string>(translation_key);
+
+        Rml::Element *radio_el = AppendChild(GetOwnerDocument()->CreateElement("input"));
+
+        radio_el->SetId(opt_id);
+        radio_el->SetAttribute("type", "radio");
+        radio_el->SetAttribute("value", i);
+        radio_el->AddEventListener(Rml::EventId::Click, this, false);
+        // TODO: focus event set description
+        // TODO: blur event clear description
+        Rml::Element *label_el = AppendChild(GetOwnerDocument()->CreateElement("label"));
+        label_el->SetAttribute("for", opt_id);
+        label_el->SetClass("config-option__tab-label", true);
+        {
+            label_el->AppendChild(GetOwnerDocument()->CreateTextNode(opt_text));
+        }
+    }
+
+    set_cur_option(opt);
+}
+
+void ElementOptionTypeRadioTabs::ProcessEvent(Rml::Event& event)
+{
+	// Forward clicks to the target.
+	if (event == Rml::EventId::Click)
+	{
+		if (event.GetPhase() == Rml::EventPhase::Bubble || event.GetPhase() == Rml::EventPhase::Target)
+		{
+            Rml::Element *target = event.GetTargetElement();
+            auto val_variant = target->GetAttribute("value");
+            int new_value = val_variant->Get<int>();
+            recomp::set_config_store_value(config_key, new_value);
+            set_cur_option(new_value);
+		}
+	}
+}
+
+} // namespace Rml
diff --git a/src/ui/elements/ElementOptionTypeRadioTabs.h b/src/ui/elements/ElementOptionTypeRadioTabs.h
new file mode 100644
index 0000000..d38443e
--- /dev/null
+++ b/src/ui/elements/ElementOptionTypeRadioTabs.h
@@ -0,0 +1,25 @@
+#ifndef RECOMPUI_ELEMENT_OPTION_TYPE_RADIO_TABS_H
+#define RECOMPUI_ELEMENT_OPTION_TYPE_RADIO_TABS_H
+
+#include "RmlUi/Core/Element.h"
+#include "RmlUi/Core/Elements/ElementFormControlInput.h"
+#include "RmlUi/Core/EventListener.h"
+
+namespace recompui {
+
+class ElementOptionTypeRadioTabs : public Rml::Element, public Rml::EventListener {
+public:
+	ElementOptionTypeRadioTabs(const Rml::String& tag);
+	virtual ~ElementOptionTypeRadioTabs();
+
+    std::string config_key;
+    void init_option(std::string& _config_key);
+protected:
+	void ProcessEvent(Rml::Event& event) override;
+
+private:
+	void set_cur_option(int opt);
+};
+
+} // namespace recompui
+#endif
diff --git a/src/ui/elements/ElementOptionTypeRange.cpp b/src/ui/elements/ElementOptionTypeRange.cpp
new file mode 100644
index 0000000..7ee5fed
--- /dev/null
+++ b/src/ui/elements/ElementOptionTypeRange.cpp
@@ -0,0 +1,94 @@
+
+#include "ElementOptionTypeRange.h"
+#include "librecomp/config_store.hpp"
+#include "../config_options/ConfigRegistry.h"
+#include <string>
+#include <RmlUi/Core/ElementDocument.h>
+#include <RmlUi/Core/ElementText.h>
+
+using json = nlohmann::json;
+
+namespace recompui {
+
+static const std::string range_label_id = "recomp-range__label";
+static const std::string range_label_text_id = "recomp-range__label-text";
+static const std::string range_input_id = "recomp-range__input";
+
+static const std::string cls_base = "config-option-range"; 
+static const std::string cls_label = cls_base + "__label"; 
+static const std::string cls_range_input = cls_base + "__range-input"; 
+
+ElementOptionTypeRange::ElementOptionTypeRange(const Rml::String& tag) : Rml::Element(tag)
+{
+    SetAttribute("recomp-store-element", true);
+    SetClass(cls_base, true);
+
+    Rml::ElementDocument *doc = GetOwnerDocument();
+
+    {
+        Rml::Element *label_el = AppendChild(doc->CreateElement("label"));
+        label_el->SetClass(cls_label, true);
+        label_el->SetId(range_label_id);
+        {
+            Rml::Element *text_node = label_el->AppendChild(doc->CreateTextNode(""));
+            text_node->SetId(range_label_text_id);
+        }
+
+        Rml::Element *range_el = AppendChild(doc->CreateElement("input"));
+        range_el->SetClass(cls_range_input, true);
+        range_el->SetId(range_input_id);
+        range_el->SetAttribute("type", "range");
+        range_el->AddEventListener(Rml::EventId::Change, this, false);
+        // TODO: focus event set description
+        // TODO: blur event clear description
+    }
+}
+
+ElementOptionTypeRange::~ElementOptionTypeRange()
+{
+    Rml::Element *range = GetElementById(range_input_id);
+    range->RemoveEventListener(Rml::EventId::Change, this, false);
+}
+
+void ElementOptionTypeRange::set_value_label(int value) {
+    Rml::ElementText *text_label = (Rml::ElementText *)GetElementById(range_label_text_id);
+    text_label->SetText(std::to_string(value) + suffix);
+    DirtyLayout();
+}
+
+void ElementOptionTypeRange::init_option(std::string& _config_key) {
+    config_key = _config_key;
+    const json& option_json = get_json_from_key(config_key);
+
+    const int value = recomp::get_config_store_value<int>(config_key);
+    suffix = get_string_in_json_with_default(option_json, "suffix", "");
+    const int min = get_value_in_json<int>(option_json, "min");
+    const int max = get_value_in_json<int>(option_json, "max");
+    const int step = get_value_in_json_with_default<int>(option_json, "step", 1);
+
+    Rml::ElementFormControlInput *range = (Rml::ElementFormControlInput *)GetElementById(range_input_id);
+    range->SetAttribute("min", min);
+    range->SetAttribute("max", max);
+    range->SetAttribute("step", step);
+    range->SetValue(std::to_string(value));
+
+    set_value_label(value);
+}
+
+void ElementOptionTypeRange::ProcessEvent(Rml::Event& event)
+{
+	// Forward clicks to the target.
+	if (event == Rml::EventId::Change)
+	{
+		if (event.GetPhase() == Rml::EventPhase::Bubble || event.GetPhase() == Rml::EventPhase::Target)
+		{
+            Rml::ElementFormControlInput *target = (Rml::ElementFormControlInput *)event.GetTargetElement();
+            auto val_s = target->GetValue();
+            int new_value = std::stoi(val_s);
+            recomp::set_config_store_value(config_key, new_value);
+            set_value_label(new_value);
+		}
+	}
+}
+
+} // namespace Rml
diff --git a/src/ui/elements/ElementOptionTypeRange.h b/src/ui/elements/ElementOptionTypeRange.h
new file mode 100644
index 0000000..58661af
--- /dev/null
+++ b/src/ui/elements/ElementOptionTypeRange.h
@@ -0,0 +1,28 @@
+#ifndef RECOMPUI_ELEMENT_OPTION_TYPE_RANGE_H
+#define RECOMPUI_ELEMENT_OPTION_TYPE_RANGE_H
+
+#include "RmlUi/Core/Element.h"
+#include "RmlUi/Core/Elements/ElementFormControlInput.h"
+#include "RmlUi/Core/EventListener.h"
+
+namespace recompui {
+
+class ElementOptionTypeRange : public Rml::Element, public Rml::EventListener {
+public:
+	ElementOptionTypeRange(const Rml::String& tag);
+	virtual ~ElementOptionTypeRange();
+
+    std::string config_key;
+    std::string suffix;
+
+    void init_option(std::string& _config_key);
+protected:
+	void ProcessEvent(Rml::Event& event) override;
+
+private:
+	void set_cur_option(int opt);
+	void set_value_label(int value);
+};
+
+} // namespace recompui
+#endif
diff --git a/src/ui/ui_elements.cpp b/src/ui/ui_elements.cpp
new file mode 100644
index 0000000..77be3b6
--- /dev/null
+++ b/src/ui/ui_elements.cpp
@@ -0,0 +1,50 @@
+#include "ui_elements.h"
+#include "librecomp/config_store.hpp"
+
+struct RecompElementConfig {
+    Rml::String tag;
+    std::unique_ptr<Rml::ElementInstancer> instancer;
+};
+
+#define CUSTOM_ELEMENT(s, e) { s, std::make_unique< Rml::ElementInstancerGeneric< e > >() }
+
+static RecompElementConfig custom_elements[] = {
+    CUSTOM_ELEMENT("recomp-description", recompui::ElementDescription),
+    CUSTOM_ELEMENT("recomp-config-group", recompui::ElementConfigGroup),
+    CUSTOM_ELEMENT("recomp-config-option", recompui::ElementConfigOption),
+    CUSTOM_ELEMENT("recomp-option-type-checkbox", recompui::ElementOptionTypeCheckbox),
+    CUSTOM_ELEMENT("recomp-option-type-radio-tabs", recompui::ElementOptionTypeRadioTabs),
+    CUSTOM_ELEMENT("recomp-option-type-range", recompui::ElementOptionTypeRange),
+};
+
+void recompui::register_custom_elements() {
+    recomp::set_config_store_value_and_default("ligma_balls", "hello!", "whats up");
+    recomp::set_config_store_default_value("ligma_balls2", "12345");
+    recomp::set_config_store_value("ligma_balls3", "hello!");
+    for (auto& element_config : custom_elements) {
+        Rml::Factory::RegisterElementInstancer(element_config.tag, element_config.instancer.get());
+    }
+}
+
+Rml::ElementInstancer* recompui::get_custom_element_instancer(std::string tag) {
+    for (auto& element_config : custom_elements) {
+        if (tag == element_config.tag) {
+            return element_config.instancer.get();
+        }
+    }
+    return nullptr;
+}
+
+Rml::ElementPtr recompui::create_custom_element(Rml::Element* parent, std::string tag) {
+    auto instancer = recompui::get_custom_element_instancer(tag);
+    const Rml::XMLAttributes attributes = {};
+    if (Rml::ElementPtr element = instancer->InstanceElement(parent, tag, attributes))
+    {
+        element->SetInstancer(instancer);
+        element->SetAttributes(attributes);
+
+        return element;
+    }
+
+    return nullptr;
+}
diff --git a/src/ui/ui_elements.h b/src/ui/ui_elements.h
new file mode 100644
index 0000000..76cf625
--- /dev/null
+++ b/src/ui/ui_elements.h
@@ -0,0 +1,20 @@
+#ifndef RECOMPUI_ELEMENTS_H
+#define RECOMPUI_ELEMENTS_H
+
+#include "recomp_ui.h"
+#include "RmlUi/Core/Element.h"
+
+#include "elements/ElementConfigOption.h"
+#include "elements/ElementConfigGroup.h"
+#include "elements/ElementOptionTypeCheckbox.h"
+#include "elements/ElementOptionTypeRadioTabs.h"
+#include "elements/ElementOptionTypeRange.h"
+#include "elements/ElementDescription.h"
+
+namespace recompui {
+    void register_custom_elements();
+
+    Rml::ElementInstancer* get_custom_element_instancer(std::string tag);
+}
+
+#endif
diff --git a/src/ui/ui_renderer.cpp b/src/ui/ui_renderer.cpp
index 41b8003..da5c66a 100644
--- a/src/ui/ui_renderer.cpp
+++ b/src/ui/ui_renderer.cpp
@@ -28,6 +28,9 @@
 #include "RmlUi/../../Source/Core/Elements/ElementLabel.h"
 #include "RmlUi_Platform_SDL.h"
 
+#include "ui_elements.h"
+#include "config_options/ConfigRegistry.h"
+
 #include "InterfaceVS.hlsl.spirv.h"
 #include "InterfacePS.hlsl.spirv.h"
 
@@ -1108,6 +1111,13 @@ void recompui::get_window_size(int& width, int& height) {
     SDL_GetWindowSizeInPixels(window, &width, &height);
 }
 
+inline const std::string read_file_to_string(std::filesystem::path path) {
+    std::ifstream stream = std::ifstream{path};
+    std::ostringstream ss;
+    ss << stream.rdbuf();
+    return ss.str(); 
+}
+
 void init_hook(RT64::RenderInterface* interface, RT64::RenderDevice* device) {
 #if defined(__linux__)
     std::locale::global(std::locale::classic());
@@ -1130,6 +1140,28 @@ void init_hook(RT64::RenderInterface* interface, RT64::RenderDevice* device) {
     Rml::SetRenderInterface(ui_context->rml.render_interface.get()->GetAdaptedInterface());
     Rml::Factory::RegisterEventListenerInstancer(&ui_context->rml.event_listener_instancer);
 
+    recompui::register_custom_elements();
+
+    // TODO: Remove hardcoded config register
+    // std::filesystem::path recomp_dir = zelda64::get_app_folder_path();
+    // std::filesystem::path test_conf_path = zelda64::get_app_folder_path() / "config_example.json";
+    std::filesystem::path test_conf_path = "config_example.cheats.json";
+    std::filesystem::path test_conf_trans_path = "config_example.cheats.en_us.json";
+    if (std::filesystem::exists(test_conf_path)) {
+        const std::string s = read_file_to_string(test_conf_path); 
+        recompui::register_config(read_file_to_string(test_conf_path), "cheats");
+        printf("SUCC CONF\n");
+
+        if (std::filesystem::exists(test_conf_trans_path)) {
+            recompui::register_translation(read_file_to_string("config_example.cheats.en_us.json"), "cheats");
+            printf("SUCC TRANSLATION\n");
+        } else {
+            printf("FAIL TRANSLATION");
+        }
+    } else {
+        printf("FAIL ALL\n");
+    }
+
     Rml::Initialise();
 
     // Apply the hack to replace RmlUi's default color parser with one that conforms to HTML5 alpha parsing for SASS compatibility