From ab0fcb50b3c662829eeecc435e8d54cbc94aff5c Mon Sep 17 00:00:00 2001
From: thecozies <79979276+thecozies@users.noreply.github.com>
Date: Mon, 17 Aug 2026 16:52:18 -0500
Subject: [PATCH] Utilize horizontal-gradient for launcher and added anims

---
 assets/recomp.rcss    | 2512 +----------------------------------------
 lib/RecompFrontend    |    2 +-
 src/main/launcher.cpp |  122 +-
 3 files changed, 122 insertions(+), 2514 deletions(-)

diff --git a/assets/recomp.rcss b/assets/recomp.rcss
index 4aa0135..a6daef7 100644
--- a/assets/recomp.rcss
+++ b/assets/recomp.rcss
@@ -1,2512 +1,6 @@
-/* stylelint-disable color-no-hex, color-hex-length */
-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-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .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;
-}
 
 /*
-@include trans-colors;
+  In order for rml to parse the base style sheet and combine with this one, any style needs to at least be present.
+  If you add styles to this file later, you can clear the current contents of this file.
 */
-/*
-@include trans-colors-opa;
-*/
-/*
-@include trans-colors-svg;
-*/
-/*
-@include trans-colors-border;
-*/
-.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-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .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-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .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-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .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;
-}
-
-/*
-@include set-color(COLOR);
-*/
-/* stylelint-disable color-no-hex, color-hex-length */
-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-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .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;
-}
-
-/*
-@include trans-colors;
-*/
-/*
-@include trans-colors-opa;
-*/
-/*
-@include trans-colors-svg;
-*/
-/*
-@include trans-colors-border;
-*/
-.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-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .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-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .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-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .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;
-}
-
-/*
-@include set-color(COLOR);
-*/
-/* stylelint-disable color-no-hex */
-/* stylelint-disable selector-max-id */
-* {
-  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 { 
-    focus:none;
-    tab-index:none;
-} */
-div#window {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  border-color: rgba(255, 255, 255, 0.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 {
-  /* color: #333; */
-  /* font-size: 13dp */
-  height: auto;
-}
-
-table input.text {
-  box-sizing: border-box;
-  width: 100%;
-  height: auto;
-  /* height: 18dp; */
-  margin: 0;
-  border-width: 1.1dp;
-  border-color: #000;
-  background-color: #fff;
-  font-size: 15dp;
-  /* padding: 0 5dp; */
-  line-height: 1;
-  decorator: none;
-  /* vertical-align: center; */
-}
-
-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: 0.05;
-}
-scrollbarvertical sliderbar, scrollbarhorizontal sliderbar {
-  border-radius: 5dp;
-  background: #DABAF7;
-  opacity: 0.1;
-}
-scrollbarvertical sliderbar:hover:not(:active), scrollbarhorizontal sliderbar:hover:not(:active) {
-  opacity: 0.2;
-}
-scrollbarvertical sliderbar:active, scrollbarhorizontal sliderbar:active {
-  opacity: 0.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, 0.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, 0.2);
-  background: rgba(8, 7, 13, 0.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: #CCCCCC;
-  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.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: #CCCCCC;
-}
-.control-option svg {
-  transition: image-color 0.05s linear-in-out, background-color 0.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, 0.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: 0.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: #CCCCCC;
-  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.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, 0.1);
-  background-color: rgba(190, 184, 219, 0.1);
-}
-.control-option__binding svg {
-  image-color: #CCCCCC;
-}
-.control-option__binding svg {
-  transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out;
-}
-.control-option__binding:focus, .control-option__binding:hover {
-  color: #F2F2F2;
-  border-color: #F2F2F2;
-  background-color: rgba(255, 255, 255, 0.1);
-}
-.control-option__binding:focus svg, .control-option__binding:hover svg {
-  image-color: #F2F2F2;
-}
-.control-option__binding:active {
-  color: rgb(244.6, 244.6, 244.6);
-}
-.control-option__binding:active svg {
-  image-color: rgb(244.6, 244.6, 244.6);
-}
-.control-option__binding:disabled, .control-option__binding[disabled] {
-  color: #CCCCCC;
-  opacity: 0.5;
-}
-.control-option__binding:disabled svg, .control-option__binding[disabled] svg {
-  image-color: #CCCCCC;
-}
-.control-option__binding:not([disabled]) {
-  cursor: pointer;
-}
-
-.control-option__binding-icon {
-  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.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 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.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;
-}
-
-/*
-    Example:
-        <tab class="tab">
-            <div>Graphics</div>
-            <div class="tab__indicator"></div>
-        </tab>
-*/
-.tabs tabs {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.tab {
-  display: block;
-  position: relative;
-  margin: 0;
-  padding: 20dp 24dp;
-  opacity: 0.9;
-  background-color: rgba(0, 0, 0, 0);
-  color: rgba(255, 255, 255, 0.6);
-}
-.tab:selected {
-  color: #F2F2F2;
-}
-.tab:selected .tab__indicator {
-  background-color: rgba(255, 255, 255, 0.6);
-}
-.tab:selected:hover {
-  cursor: default;
-}
-.rmlui-window:not([mouse-active]) .tab:focus {
-  transition: none;
-  animation: blue-pulse 0.75s infinite;
-}
-.rmlui-window:not([mouse-active]) .tab:focus:selected .tab__indicator {
-  animation: blue-pulse-background 0.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, 0.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, 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, 0.35);
-}
-
-.config__header {
-  border-bottom-width: 1.1dp;
-  border-bottom-color: rgba(255, 255, 255, 0.1);
-  padding: 12dp 20dp;
-}
-
-.config__footer {
-  border-top-width: 1.1dp;
-  border-top-color: rgba(255, 255, 255, 0.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 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
-  display: block;
-  position: relative;
-  height: auto;
-  margin: 4dp 12dp 0;
-  padding: 8dp 0;
-  color: rgba(255, 255, 255, 0.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 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
-  width: 32dp;
-  height: 32dp;
-  margin: 4dp 12dp 0;
-  border-radius: 8dp;
-  opacity: 0.5;
-  background-color: rgba(190, 184, 219, 0.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: #3333FF;
-}
-.config-option__radio-tabs .config-option__checkbox,
-.config-option__list .config-option__checkbox {
-  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
-  visibility: visible;
-  width: 0;
-  height: 0;
-}
-.config-option__radio-tabs input.radio,
-.config-option__list input.radio {
-  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.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 0.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: 0.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 0.05s linear-in-out, background-color 0.05s linear-in-out;
-  height: 2dp;
-  margin-top: 8dp;
-  background-color: rgba(255, 255, 255, 0.2);
-}
-.config-option__radio-tabs input.range sliderbar,
-.config-option__list input.range sliderbar {
-  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
-  width: 16dp;
-  height: 16dp;
-  margin-top: 1dp;
-  margin-right: -8dp;
-  margin-left: -8dp;
-  transition: background-color 0.05s linear-in-out;
-  border-radius: 8dp;
-  background-color: #CCCCCC;
-}
-.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: #3333FF;
-  animation: blue-pulse-background 0.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-color {
-  width: 100%;
-  max-width: 360dp;
-  height: auto;
-  margin-top: 4dp;
-  margin-left: 12dp;
-  padding: 0;
-}
-.config-option-color__preview-wrapper {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 72dp;
-}
-.config-option-color__preview-block {
-  display: block;
-  width: 88dp;
-  height: 100%;
-  border-width: 1.1dp;
-  border-radius: 16dp;
-  border-color: rgba(255, 255, 255, 0.2);
-}
-.config-option-color__hsv-wrapper {
-  display: flex;
-  flex: 1 1 100%;
-  flex-direction: column;
-  width: auto;
-  height: auto;
-  padding-left: 8dp;
-}
-.config-option-color__hsv-wrapper .config-option-range {
-  flex: 1 1 auto;
-}
-.config-option-color__hsv-wrapper .config-option-range label {
-  min-width: 72dp;
-}
-.config-option-color__hsv-wrapper .config-option-range input {
-  flex: 1 1 auto;
-}
-
-.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 0.05s linear-in-out, background-color 0.05s linear-in-out;
-  height: 2dp;
-  margin-top: 8dp;
-  background-color: rgba(255, 255, 255, 0.2);
-}
-.config-option-range__range-input sliderbar {
-  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
-  width: 16dp;
-  height: 16dp;
-  margin-top: 1dp;
-  margin-right: -8dp;
-  margin-left: -8dp;
-  transition: background-color 0.05s linear-in-out;
-  border-radius: 8dp;
-  background-color: #CCCCCC;
-}
-.rmlui-window:not([mouse-active]) .config-option-range__range-input sliderbar:focus {
-  border-width: 1.1dp;
-  border-color: #3333FF;
-  animation: blue-pulse-background 0.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-option-dropdown, .config-option-textfield {
-  display: flex;
-  position: relative;
-  flex: 1 1 100%;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  width: auto;
-  height: auto;
-  padding: 8dp 24dp 8dp 12dp;
-}
-.config-option-dropdown__select, .config-option-textfield__select {
-  display: block;
-  height: 48dp;
-  padding: 14dp;
-  cursor: pointer;
-}
-.config-option-dropdown__wrapper, .config-option-textfield__wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  height: auto;
-  padding: 2dp 0 12dp;
-  cursor: text;
-}
-.config-option-dropdown__wrapper input, .config-option-textfield__wrapper input {
-  width: 100%;
-  height: auto;
-  vertical-align: middle;
-}
-.config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper {
-  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.05s linear-in-out;
-  border-width: 1.1dp;
-  border-color: rgba(255, 255, 255, 0.5);
-  position: relative;
-  box-sizing: border-box;
-  flex: 1 1 100%;
-  width: auto;
-  border-radius: 12dp;
-  background-color: rgba(255, 255, 255, 0.05);
-}
-.config-option-dropdown__select svg, .config-option-dropdown__wrapper svg, .config-option-textfield__select svg, .config-option-textfield__wrapper svg {
-  transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out;
-}
-.config-option-dropdown__select:hover, .config-option-dropdown__select:focus, .config-option-dropdown__wrapper:hover, .config-option-dropdown__wrapper:focus, .config-option-textfield__select:hover, .config-option-textfield__select:focus, .config-option-textfield__wrapper:hover, .config-option-textfield__wrapper:focus {
-  border-width: 1.1dp;
-  border-color: rgba(255, 255, 255, 0.8);
-  background-color: rgba(255, 255, 255, 0.2);
-}
-.config-option-dropdown__select selectvalue, .config-option-dropdown__wrapper selectvalue, .config-option-textfield__select selectvalue, .config-option-textfield__wrapper selectvalue {
-  display: inline;
-  height: auto;
-  margin: auto 0;
-}
-.config-option-dropdown__select selectbox, .config-option-dropdown__wrapper selectbox, .config-option-textfield__select selectbox, .config-option-textfield__wrapper selectbox {
-  border-width: 1.1dp;
-  border-color: rgba(255, 255, 255, 0.2);
-  margin-top: 2dp;
-  padding: 4dp 0;
-  border-radius: 12dp;
-  background-color: #191622;
-}
-.config-option-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option {
-  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
-  padding: 8dp 12dp;
-  background-color: rgba(0, 0, 0, 0);
-  color: #CCCCCC;
-  font-weight: 400;
-}
-.config-option-dropdown__select selectbox option:hover, .config-option-dropdown__select selectbox option:focus, .config-option-dropdown__wrapper selectbox option:hover, .config-option-dropdown__wrapper selectbox option:focus, .config-option-textfield__select selectbox option:hover, .config-option-textfield__select selectbox option:focus, .config-option-textfield__wrapper selectbox option:hover, .config-option-textfield__wrapper selectbox option:focus {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-.config-option-dropdown__select selectbox option:hover:not(:checked), .config-option-dropdown__wrapper selectbox option:hover:not(:checked), .config-option-textfield__select selectbox option:hover:not(:checked), .config-option-textfield__wrapper selectbox option:hover:not(:checked) {
-  cursor: pointer;
-}
-.config-option-dropdown__select selectbox option:checked, .config-option-dropdown__wrapper selectbox option:checked, .config-option-textfield__select selectbox option:checked, .config-option-textfield__wrapper selectbox option:checked {
-  background-color: rgba(255, 255, 255, 0.05);
-  color: #FFFFFF;
-}
-
-.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, 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, 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, 0.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 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.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: 0.25;
-}
-[cur-input=A] .input-viz[visual-input~=A] {
-  opacity: 1;
-}
-
-.input-viz[visual-input~=B] {
-  opacity: 0.25;
-}
-[cur-input=B] .input-viz[visual-input~=B] {
-  opacity: 1;
-}
-
-.input-viz[visual-input~=Z] {
-  opacity: 0.25;
-}
-[cur-input=Z] .input-viz[visual-input~=Z] {
-  opacity: 1;
-}
-
-.input-viz[visual-input~=START] {
-  opacity: 0.25;
-}
-[cur-input=START] .input-viz[visual-input~=START] {
-  opacity: 1;
-}
-
-.input-viz[visual-input~=DPAD_UP] {
-  opacity: 0.25;
-}
-[cur-input=DPAD_UP] .input-viz[visual-input~=DPAD_UP] {
-  opacity: 1;
-}
-
-.input-viz[visual-input~=DPAD_DOWN] {
-  opacity: 0.25;
-}
-[cur-input=DPAD_DOWN] .input-viz[visual-input~=DPAD_DOWN] {
-  opacity: 1;
-}
-
-.input-viz[visual-input~=DPAD_LEFT] {
-  opacity: 0.25;
-}
-[cur-input=DPAD_LEFT] .input-viz[visual-input~=DPAD_LEFT] {
-  opacity: 1;
-}
-
-.input-viz[visual-input~=DPAD_RIGHT] {
-  opacity: 0.25;
-}
-[cur-input=DPAD_RIGHT] .input-viz[visual-input~=DPAD_RIGHT] {
-  opacity: 1;
-}
-
-.input-viz[visual-input~=L] {
-  opacity: 0.25;
-}
-[cur-input=L] .input-viz[visual-input~=L] {
-  opacity: 1;
-}
-
-.input-viz[visual-input~=R] {
-  opacity: 0.25;
-}
-[cur-input=R] .input-viz[visual-input~=R] {
-  opacity: 1;
-}
-
-.input-viz[visual-input~=C_UP] {
-  opacity: 0.25;
-}
-[cur-input=C_UP] .input-viz[visual-input~=C_UP] {
-  opacity: 1;
-}
-
-.input-viz[visual-input~=C_DOWN] {
-  opacity: 0.25;
-}
-[cur-input=C_DOWN] .input-viz[visual-input~=C_DOWN] {
-  opacity: 1;
-}
-
-.input-viz[visual-input~=C_LEFT] {
-  opacity: 0.25;
-}
-[cur-input=C_LEFT] .input-viz[visual-input~=C_LEFT] {
-  opacity: 1;
-}
-
-.input-viz[visual-input~=C_RIGHT] {
-  opacity: 0.25;
-}
-[cur-input=C_RIGHT] .input-viz[visual-input~=C_RIGHT] {
-  opacity: 1;
-}
-
-.input-viz[visual-input~=X_AXIS_NEG] {
-  opacity: 0.25;
-}
-[cur-input=X_AXIS_NEG] .input-viz[visual-input~=X_AXIS_NEG] {
-  opacity: 1;
-}
-
-.input-viz[visual-input~=X_AXIS_POS] {
-  opacity: 0.25;
-}
-[cur-input=X_AXIS_POS] .input-viz[visual-input~=X_AXIS_POS] {
-  opacity: 1;
-}
-
-.input-viz[visual-input~=Y_AXIS_NEG] {
-  opacity: 0.25;
-}
-[cur-input=Y_AXIS_NEG] .input-viz[visual-input~=Y_AXIS_NEG] {
-  opacity: 1;
-}
-
-.input-viz[visual-input~=Y_AXIS_POS] {
-  opacity: 0.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: #3333FF;
-}
-.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, 0.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: #FFFFFF;
-}
-.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;
-  min-width: 1dp;
-  height: 128dp;
-  margin-right: 10dp;
-}
-
-.button {
-  border-color: rgba(185, 125, 242, 0.8);
-  background-color: rgba(185, 125, 242, 0.05);
-  color: #CCCCCC;
-  transition: color 0.05s linear-in-out, background-color 0.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, 0.3);
-  color: #F2F2F2;
-}
-.button:disabled, .button[disabled] {
-  color: rgba(255, 255, 255, 0.6);
-}
-.button:active {
-  background-color: rgba(185, 125, 242, 0.2);
-  color: rgb(244.6, 244.6, 244.6);
-}
-.button--primary {
-  border-color: rgba(185, 125, 242, 0.8);
-  background-color: rgba(185, 125, 242, 0.05);
-  color: #CCCCCC;
-}
-.button--primary:focus, .button--primary:hover {
-  border-color: #B97DF2;
-  background-color: rgba(185, 125, 242, 0.3);
-  color: #F2F2F2;
-}
-.button--primary:disabled, .button--primary[disabled] {
-  color: rgba(255, 255, 255, 0.6);
-}
-.button--primary:active {
-  background-color: rgba(185, 125, 242, 0.2);
-  color: rgb(244.6, 244.6, 244.6);
-}
-.button--secondary {
-  border-color: rgba(23, 214, 232, 0.8);
-  background-color: rgba(23, 214, 232, 0.05);
-  color: #CCCCCC;
-}
-.button--secondary:focus, .button--secondary:hover {
-  border-color: #17D6E8;
-  background-color: rgba(23, 214, 232, 0.3);
-  color: #F2F2F2;
-}
-.button--secondary:disabled, .button--secondary[disabled] {
-  color: rgba(255, 255, 255, 0.6);
-}
-.button--secondary:active {
-  background-color: rgba(23, 214, 232, 0.2);
-  color: rgb(244.6, 244.6, 244.6);
-}
-.button--tertiary {
-  border-color: rgba(242, 242, 242, 0.8);
-  background-color: rgba(242, 242, 242, 0.05);
-  color: #CCCCCC;
-}
-.button--tertiary:focus, .button--tertiary:hover {
-  border-color: #F2F2F2;
-  background-color: rgba(242, 242, 242, 0.3);
-  color: #F2F2F2;
-}
-.button--tertiary:disabled, .button--tertiary[disabled] {
-  color: rgba(255, 255, 255, 0.6);
-}
-.button--tertiary:active {
-  background-color: rgba(242, 242, 242, 0.2);
-  color: rgb(244.6, 244.6, 244.6);
-}
-.button--success {
-  border-color: rgba(69, 208, 67, 0.8);
-  background-color: rgba(69, 208, 67, 0.05);
-  color: #CCCCCC;
-}
-.button--success:focus, .button--success:hover {
-  border-color: #45D043;
-  background-color: rgba(69, 208, 67, 0.3);
-  color: #F2F2F2;
-}
-.button--success:disabled, .button--success[disabled] {
-  color: rgba(255, 255, 255, 0.6);
-}
-.button--success:active {
-  background-color: rgba(69, 208, 67, 0.2);
-  color: rgb(244.6, 244.6, 244.6);
-}
-.button--error {
-  border-color: rgba(248, 96, 57, 0.8);
-  background-color: rgba(248, 96, 57, 0.05);
-  color: #CCCCCC;
-}
-.button--error:focus, .button--error:hover {
-  border-color: #F86039;
-  background-color: rgba(248, 96, 57, 0.3);
-  color: #F2F2F2;
-}
-.button--error:disabled, .button--error[disabled] {
-  color: rgba(255, 255, 255, 0.6);
-}
-.button--error:active {
-  background-color: rgba(248, 96, 57, 0.2);
-  color: rgb(244.6, 244.6, 244.6);
-}
-.button--warning {
-  border-color: rgba(233, 205, 53, 0.8);
-  background-color: rgba(233, 205, 53, 0.05);
-  color: #CCCCCC;
-}
-.button--warning:focus, .button--warning:hover {
-  border-color: #E9CD35;
-  background-color: rgba(233, 205, 53, 0.3);
-  color: #F2F2F2;
-}
-.button--warning:disabled, .button--warning[disabled] {
-  color: rgba(255, 255, 255, 0.6);
-}
-.button--warning:active {
-  background-color: rgba(233, 205, 53, 0.2);
-  color: rgb(244.6, 244.6, 244.6);
-}
-.button:not([disabled]) {
-  cursor: pointer;
-}
-.button:disabled, .button[disabled] {
-  opacity: 0.5;
-}
-.button__label {
-  width: auto;
-  height: auto;
-}
-
-/*
-    <button
-        class="icon-button icon-button--error"
-    >
-        <svg src="icons/Trash.svg" />
-    </button>
-*/
-.icon-button {
-  color: #CCCCCC;
-  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.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: #CCCCCC;
-}
-.icon-button svg {
-  transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out;
-}
-.icon-button:focus, .icon-button:hover {
-  color: #F2F2F2;
-  background-color: rgba(255, 255, 255, 0.2);
-}
-.icon-button:focus svg, .icon-button:hover svg {
-  image-color: #F2F2F2;
-}
-.icon-button:active {
-  color: rgb(244.6, 244.6, 244.6);
-  background-color: rgba(255, 255, 255, 0.1);
-}
-.icon-button:active svg {
-  image-color: rgb(244.6, 244.6, 244.6);
-}
-.icon-button:disabled, .icon-button[disabled] {
-  color: #CCCCCC;
-  opacity: 0.5;
-}
-.icon-button:disabled svg, .icon-button[disabled] svg {
-  image-color: #CCCCCC;
-}
-.icon-button:not([disabled]) {
-  cursor: pointer;
-}
-.icon-button svg {
-  width: 32dp;
-  height: 32dp;
-}
-.icon-button--primary {
-  border-color: rgba(185, 125, 242, 0.8);
-  background-color: rgba(185, 125, 242, 0.05);
-}
-.icon-button--primary:focus, .icon-button--primary:hover {
-  border-color: #B97DF2;
-  background-color: rgba(185, 125, 242, 0.3);
-}
-.icon-button--primary:active {
-  background-color: rgba(185, 125, 242, 0.2);
-}
-.icon-button--secondary {
-  border-color: rgba(23, 214, 232, 0.8);
-  background-color: rgba(23, 214, 232, 0.05);
-}
-.icon-button--secondary:focus, .icon-button--secondary:hover {
-  border-color: #17D6E8;
-  background-color: rgba(23, 214, 232, 0.3);
-}
-.icon-button--secondary:active {
-  background-color: rgba(23, 214, 232, 0.2);
-}
-.icon-button--tertiary {
-  border-color: rgba(242, 242, 242, 0.8);
-  background-color: rgba(242, 242, 242, 0.05);
-}
-.icon-button--tertiary:focus, .icon-button--tertiary:hover {
-  border-color: #F2F2F2;
-  background-color: rgba(242, 242, 242, 0.3);
-}
-.icon-button--tertiary:active {
-  background-color: rgba(242, 242, 242, 0.2);
-}
-.icon-button--success {
-  border-color: rgba(69, 208, 67, 0.8);
-  background-color: rgba(69, 208, 67, 0.05);
-}
-.icon-button--success:focus, .icon-button--success:hover {
-  border-color: #45D043;
-  background-color: rgba(69, 208, 67, 0.3);
-}
-.icon-button--success:active {
-  background-color: rgba(69, 208, 67, 0.2);
-}
-.icon-button--error {
-  border-color: rgba(248, 96, 57, 0.8);
-  background-color: rgba(248, 96, 57, 0.05);
-}
-.icon-button--error:focus, .icon-button--error:hover {
-  border-color: #F86039;
-  background-color: rgba(248, 96, 57, 0.3);
-}
-.icon-button--error:active {
-  background-color: rgba(248, 96, 57, 0.2);
-}
-.icon-button--warning {
-  border-color: rgba(233, 205, 53, 0.8);
-  background-color: rgba(233, 205, 53, 0.05);
-}
-.icon-button--warning:focus, .icon-button--warning:hover {
-  border-color: #E9CD35;
-  background-color: rgba(233, 205, 53, 0.3);
-}
-.icon-button--warning:active {
-  background-color: rgba(233, 205, 53, 0.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: 0.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: 0.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;
-}
-
-/*
-    Example layout:
-        <button class="menu-list-item menu-list-item--right">
-            <div class="menu-list-item__bullet">•</div>
-            <div class="menu-list-item__label">Setup controls</div>
-        </button>
-    - Variants:
-        .menu-list-item--right (align to right side)
-    - Optional:
-        - <div class="subtitle-title__disclaimer">Coming Soon™</div>
-
-*/
-.menu-list-item {
-  color: #CCCCCC;
-  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: #CCCCCC;
-}
-.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: 0.5;
-  tab-index: none;
-  cursor: default;
-}
-
-.menu-list-item__bullet {
-  margin-right: 12dp;
-  opacity: 0;
-}
-
-/*
-    Example layout:
-
-        <button class="subtitle-title" disabled>
-            <h3>Zelda 64: Recompiled</h3>
-            <h1>Ocarina of Time</h1>
-            <div class="subtitle-title__disclaimer">Coming Soon™</div>
-        </button>
-    - Variants:
-        .subtitle-title--right (align to right side)
-    - Optional:
-        - <div class="subtitle-title__disclaimer">Coming Soon™</div>
-
-*/
-.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: #CCCCCC;
-  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: 0.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 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.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: 0.9;
-  background: rgba(0, 0, 0, 0);
-  cursor: pointer;
-}
-.toggle:hover, .toggle:focus-visible, .toggle:focus {
-  opacity: 1;
-  background-color: rgba(23, 214, 232, 0.3);
-}
-.toggle:active {
-  opacity: 1;
-  background-color: rgba(23, 214, 232, 0.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: 0.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 0.05s linear-in-out, background-color 0.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, 0.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, 0.2);
-  background: rgba(8, 7, 13, 0.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, 0.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: #CCCCCC;
-  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
-  border-bottom-width: 1.1dp;
-  border-bottom-color: rgba(255, 255, 255, 0.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: #CCCCCC;
-}
-.config-debug-option svg {
-  transition: image-color 0.05s linear-in-out, background-color 0.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, 0.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: 0.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 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.05s linear-in-out;
-  border-width: 1.1dp;
-  border-color: rgba(255, 255, 255, 0.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, 0.05);
-  cursor: pointer;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 14dp;
-}
-.config-debug__select-wrapper select svg {
-  transition: image-color 0.05s linear-in-out, background-color 0.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, 0.8);
-  background-color: rgba(255, 255, 255, 0.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, 0.8);
-  background-color: #191622;
-  padding: 4dp 0;
-  margin-top: 2dp;
-  border-radius: 12dp;
-}
-.config-debug__select-wrapper select selectbox option {
-  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
-  padding: 8dp 12dp;
-  background-color: rgba(0, 0, 0, 0);
-  color: #CCCCCC;
-  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, 0.2);
-}
-.config-debug__select-wrapper select selectbox option:hover:not(:checked) {
-  cursor: pointer;
-}
-.config-debug__select-wrapper select selectbox option:checked {
-  color: #FFFFFF;
-  background-color: rgba(255, 255, 255, 0.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;
-  }
-}
+.rml-needs-something-in-this-file {}
diff --git a/lib/RecompFrontend b/lib/RecompFrontend
index b1a1477..b2c5c18 160000
--- a/lib/RecompFrontend
+++ b/lib/RecompFrontend
@@ -1 +1 @@
-Subproject commit b1a1477c6556aeb7ed45defbfb5924f721efebc1
+Subproject commit b2c5c18d73054416c844486611fd2c2b9d8a4927
diff --git a/src/main/launcher.cpp b/src/main/launcher.cpp
index c9592b1..04f616a 100644
--- a/src/main/launcher.cpp
+++ b/src/main/launcher.cpp
@@ -1,6 +1,7 @@
 #include "recompui/recompui.h"
 #include "zelda_game.h"
 #include "zelda_launcher.h"
+#include "hlsl++.h"
 
 // UI Components
 namespace {
@@ -127,6 +128,7 @@ namespace {
         Element *root;
         Element *title_wrapper;
         Element *content_wrapper;
+        GameOptionsMenu *game_options_menu;
         SubtitleTitleButton *title_button;
         zelda64::Game game;
         std::string name;
@@ -197,6 +199,116 @@ namespace {
             }
         }
 
+        struct GameOptionExtraData {
+            Element *bullet = nullptr;
+            float anim_progress = 0;
+            float anim_goal = 0;
+        };
+
+        std::vector<GameOptionExtraData> game_option_data;
+
+        bool handle_game_option_event(int index, const Event& e) {
+            GameOption *option = game_options_menu->get_options()[index];
+            GameOptionExtraData &data = game_option_data[index];
+            switch (e.type) {
+            case EventType::Click:
+                break;
+            case EventType::Hover:
+            {
+                bool hovering = std::get<EventHover>(e.variant).active && option->is_enabled();
+                if (hovering) {
+                    data.anim_goal = 1.0f;
+                } else {
+                    data.anim_goal = 0.0f;
+                }
+                option->queue_update();
+                break;
+            }
+            case EventType::Enable:
+                break;
+            case EventType::Focus: {
+                bool active = std::get<EventFocus>(e.variant).active;
+                if (active) {
+                    data.anim_goal = 1.0f;
+                } else {
+                    data.anim_goal = 0.0f;
+                }
+                option->queue_update();
+                
+                break;
+            }
+            case EventType::Update:
+                if (data.anim_goal != data.anim_progress) {
+                    float sign = (data.anim_goal > data.anim_progress) ? 1.0f : -1.0f;
+                    float diff1 = fabsf(data.anim_goal - data.anim_progress);
+                    float change_rate = std::max(0.02f, diff1 * 0.08f);
+
+                    data.anim_progress += change_rate * sign;
+                    data.anim_progress = std::clamp(data.anim_progress, 0.0f, 1.0f);
+                    float diff = fabsf(data.anim_goal - data.anim_progress);
+                    if (diff < 0.01f) {
+                        data.anim_progress = data.anim_goal;
+                    }
+                    float smooth_val = hlslpp::smoothstep(hlslpp::float1(0.0f), 1.0f, data.anim_progress);
+                    data.bullet->set_opacity(smooth_val);
+                    data.bullet->set_translate_2D((1.0f - smooth_val) * (right ? 50.0f : -50.0f), -50.0f, Unit::Percent);
+                    int opa = static_cast<int>(40.0f * smooth_val);
+                    option->set_decorator_horizontal_gradient(
+                        theme::color::PrimaryL,
+                        theme::color::PrimaryL,
+                        right ? 0 : opa,
+                        right ? opa : 0
+                    );
+
+                    option->queue_update();
+                }
+                break;
+            default:
+                assert(false && "Unknown event type.");
+                break;
+            }
+
+            return false;
+        }
+
+        void style_game_options() {
+            std::vector<recompui::GameOption *> &options = game_options_menu->get_options();
+            auto context = get_current_context();
+
+            size_t num_options = options.size();
+            game_option_data.clear();
+            game_option_data.resize(num_options);
+
+            for (size_t i = 0; i < num_options; i++) {
+                options[i]->set_position(Position::Relative);
+                if (right) {
+                    options[i]->set_padding_right(44);
+                } else {
+                    options[i]->set_padding_left(44);
+                }
+                options[i]->set_background_color(theme::color::Transparent);
+                options[i]->hover_style.set_background_color(theme::color::Transparent);
+                options[i]->focus_style.set_background_color(theme::color::Transparent);
+                options[i]->set_decorator_horizontal_gradient(theme::color::PrimaryL, theme::color::PrimaryL, 0, 0);
+                options[i]->set_event_callback([this, i](const Event& e) {
+                    return handle_game_option_event(i, e);
+                });
+
+                game_option_data[i].bullet = context.create_element<Label>(options[i], "•", theme::Typography::LabelLG);
+                game_option_data[i].bullet->set_opacity(0);
+                game_option_data[i].bullet->set_position(Position::Absolute);
+                game_option_data[i].bullet->set_width(16);
+                game_option_data[i].bullet->set_top(50, Unit::Percent);
+                game_option_data[i].bullet->set_translate_2D(0, -50, Unit::Percent);
+
+                if (right) {
+                    game_option_data[i].bullet->set_right(16);
+                } else {
+                    game_option_data[i].bullet->set_left(16);
+                }
+            }
+        }
+
     public:
         GameHalf(zelda64::Game game, const std::string &name, bool right = false, bool soon = false) : game(game), name(name), right(right), soon(soon) {};
 
@@ -204,22 +316,24 @@ namespace {
             root = root_element;
             root->clear_children();
             style_vertical_split(); 
-            auto context = recompui::get_current_context();
+            auto context = get_current_context();
 
             add_title_wrapper();
             title_button = context.create_element<SubtitleTitleButton>(title_wrapper, name, right, soon);
             add_content_wrapper();
 
             const recomp::GameEntry &game_entry = zelda64::get_game_entry(game);
-            auto game_options_menu = context.create_element<GameOptionsMenu>(content_wrapper,
+            game_options_menu = context.create_element<GameOptionsMenu>(content_wrapper,
                 game_entry.game_id,
                 game_entry.mod_game_id,
                 game_entry.display_name,
                 game_entry.thumbnail_bytes,
-                right ? recompui::GameOptionsMenuLayout::Right : recompui::GameOptionsMenuLayout::Left
+                right ? GameOptionsMenuLayout::Right : GameOptionsMenuLayout::Left
             );
-            game_options_menu->set_as_navigation_container(recompui::NavigationType::Vertical);
+            game_options_menu->set_width(100, Unit::Percent);
+            game_options_menu->set_as_navigation_container(NavigationType::Vertical);
             game_options_menu->add_default_options();
+            style_game_options();
 
             title_button->set_exposed_contents(game_options_menu);
         }