.loading-component {
    color: #888;
    font-size: 32px;
    text-align: center;
    width: 75%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.loading-component__progress {
    display: block;
    margin-top: 16px;
    width: 100%;
    height: 40px;
    border: 2px solid #888;
    border-radius: 4px;
    position: relative
}

.loading-component__progress::-webkit-progress-bar {
    background: transparent
}

.loading-component__progress::-webkit-progress-value {
    background: linear-gradient(to top, red, #ff4d4d);
    border-radius: 4px
}

.loading-component__progress::-moz-progress-bar {
    background: linear-gradient(to top, red, #ff4d4d);
    border-radius: 4px
}

.compress-mpq {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    pointer-events: auto;
    border: 1px solid #888;
    padding: 12px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    background: #000
}

.compress-mpq__description,
.compress-mpq__message {
    margin: 10px 0
}

.compress-mpq__button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #fff;
    background: #000;
    font-size: 2em;
    padding: 4px 18px;
    cursor: pointer;
    margin-top: 6px;
    width: 8em
}

.compress-mpq__button:hover {
    background-color: #111
}

.save-list {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    pointer-events: auto;
    border: 1px solid #888;
    padding: 12px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    background: #000
}

.save-list__button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #fff;
    background: #000;
    font-size: 2em;
    padding: 4px 18px;
    cursor: pointer;
    margin-top: 6px;
    width: 8em
}

.save-list__button:hover {
    background-color: #111
}

.save-list__items {
    border: 1px solid #fff;
    text-align: left
}

.save-list__item {
    padding: 0 6px;
    display: flex;
    gap: 4px;
    justify-content: space-between
}

.save-list__player-info {
    color: #888;
    overflow-wrap: break-word
}

.save-list__buttons {
    display: flex
}

.save-list__button--remove {
    color: #800;
    cursor: pointer
}

.save-list__button--remove:hover {
    color: red
}

.save-list__button--download {
    color: #888;
    cursor: pointer
}

.save-list__button--download:hover {
    color: #fff
}

.save-list__item:hover {
    background-color: #444
}

.error-component {
    display: block;
    border: 1px solid #800;
    background: #300;
    padding: 12px;
    color: #f33;
    font-size: 18px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    pointer-events: auto
}

.error-component:hover {
    text-decoration: none
}

.error-component__header {
    font-weight: 700;
    font-size: 1.2em;
    margin-bottom: .3em
}

.error-component__body {
    font-family: monospace
}

.error-component__footer {
    margin-top: .5em;
    font-size: .8em
}

.start-screen {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    pointer-events: auto;
    border: 1px solid #888;
    padding: 12px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    background: #000
}

.start-screen__description {
    margin: 10px 0
}

.start-screen__button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #fff;
    background: #000;
    font-size: 2em;
    padding: 4px 18px;
    cursor: pointer;
    margin-top: 6px;
    width: 8em
}

.start-screen__button:hover {
    background-color: #111
}

.start-screen__manual-link {
    display: inline-block;
    color: #7070ff;
    text-decoration: none;
    cursor: pointer;
    margin-top: 15px
}

.start-screen__compress-link {
  display: inline-block;
  color: #7070ff;
  text-decoration: none;
  cursor: pointer;
}

body,
#root,
.app {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}

.app {
    background-color: #000
}

.app--dropping {
    background-color: #111
}

.app__body,
.app__body-v {
    position: absolute;
    top: 0;
    bottom: 0;
    height: auto
}

.app__body-v {
    position: absolute;
    top: 0;
    bottom: 0;
    height: auto;
    left: calc(50% - 200vh / 3);
    width: calc(400vh / 3)
}

.app__body .app__inner {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: url('diablo.gif');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center
}

@media (max-aspect-ratio: 640/480) {
    .app__body {
        left: 0;
        right: 0;
        width: auto;
        top: calc(50% - 37.5vw);
        height: 75vw
    }

    .app__body-v {
        left: 0;
        right: 0;
        width: auto
    }
}

.app__body-v {
    pointer-events: none
}

@media (min-aspect-ratio: 3/1) {
    .app--keyboard .app__body .app__inner {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 75vw;
        height: 56.25vw;
        transform: translate(-50%, -70%)
    }
}

.app canvas {
    width: 100%;
    height: 100%;
    cursor: none;
    visibility: hidden
}

.app--started canvas {
    visibility: visible
}

.app__keyboard {
    position: absolute;
    pointer-events: auto;
    background: #0000;
    color: #0000;
    border: none;
    outline: none;
    z-index: 100;
    display: none;
    cursor: none
}

.app__keyboard::selection {
    background: #0000;
    color: #0000
}

.app--keyboard .app__keyboard {
    display: block
}

.app a,
.app .link {
    display: inline-block;
    color: #7070ff;
    text-decoration: none;
    cursor: pointer
}

.app a:hover,
.app .link:hover {
    text-decoration: underline
}

.app__touch-ui {
    display: none;
    pointer-events: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 25vh
}

.app__touch-ui .app__touch-button {
    position: absolute;
    left: 50%;
    background-color: #444;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

.app__touch-ui .app__touch-button--active {
    background-color: #fff
}

.app__touch-ui .app__touch-button--0 {
    top: 15vh
}

.app__touch-ui .app__touch-button--1 {
    top: 35vh
}

.app__touch-ui .app__touch-button--2 {
    top: 55vh
}

.app__touch-ui .app__touch-button--3 {
    top: 70vh;
    left: 5vw
}

.app__touch-ui .app__touch-button--4 {
    top: 70vh;
    left: 11vw
}

.app__touch-ui .app__touch-button--5 {
    top: 85vh;
    left: 5vw
}

.app__touch-ui .app__touch-button--6 {
    top: 85vh;
    left: 11vw
}

.app__touch-ui--mods {
    left: 0
}

.app__touch-ui--mods .app__touch-button {
    width: 15vh;
    height: 15vh;
    border-radius: 10vh
}

.app__touch-ui--mods .app__touch-button--0 {
    -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz4NCjxzdmcgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNjQwIDY0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQo8ZGVmcz4NCjxwYXRoIGlkPSJiIiBkPSJtMzI2Ljg4IDI5OC44OGMtMTIuMTMgMC0yMS45Ni05Ljg0LTIxLjk2LTIxLjk3di0zNy43N2MwLTEyLjEzIDkuODMtMjEuOTcgMjEuOTYtMjEuOTcgMTIuMTQgMCAyMS45NyA5Ljg0IDIxLjk3IDIxLjk3djM3Ljc3Yy02LjU1IDE0LjY1LTEzLjg4IDIxLjk3LTIxLjk3IDIxLjk3eiIvPg0KPHBhdGggaWQ9ImQiIGQ9Im0zNjAuNDYgMjMyLjIydjUyLjM4YzAgMTIuMzMtOC4wOCAyMi45NS0xOS43IDI3Ljc0djI4LjE2aDExMy4zMXYtOTQuNTdjMC01My41Ni00NC44Ny05Ni45Ny0xMDAuMjEtOTYuOTdoLTEzLjF2NTUuNTJjMTMuMTMgMTAuMjcgMTkuNyAxOS41MiAxOS43IDI3Ljc0eiIvPg0KPHBhdGggaWQ9ImMiIGQ9Im0xOTkuNyA0MjEuOTdjMCA1My41NiA0NC44NyA5Ni45NyAxMDAuMjEgOTYuOTdoNTMuOTVjNTUuMzQgMCAxMDAuMjEtNDMuNDEgMTAwLjIxLTk2Ljk3di03My4zOGgtMjU0LjM3djczLjM4eiIvPg0KPHBhdGggaWQ9ImEiIGQ9Im0zMTMuMDEgMzEyLjM0Yy0xMS42Mi00Ljc5LTE5LjctMTUuNDEtMTkuNy0yNy43NHYtNTIuMzhjMC0xMi4zMyA4LjA4LTIyLjk1IDE5LjctMjcuNzR2LTU1LjUyaC0xMy4xYy01NS4zNCAwLTEwMC4yMSA0My40MS0xMDAuMjEgOTYuOTd2OTQuNTdoMTEzLjMxdi0yOC4xNnoiLz4NCjxwYXRoIGlkPSJmIiBkPSJtNDk0LjQzIDI2OS41IDY4LjkyIDcxLTY4LjkyIDcxdi00NS4wMWgtMzIuNTF2LTUyLjFoMzIuNTF2LTQ0Ljg5eiIvPg0KPHBhdGggaWQ9ImUiIGQ9Im0xNTguOTcgMjY5LjUtNjguOTEgNzEgNjguOTEgNzF2LTQ1LjAxaDMyLjUydi01Mi4xaC0zMi41MnYtNDQuODl6Ii8+DQo8cGF0aCBpZD0iaCIgZD0ibTM5Ny44OSAxMTAuOS03MS4wMS02OC45MS03MSA2OC45MWg0NS4wMnYzMi41Mmg1Mi4wOXYtMzIuNTJoNDQuOXoiLz4NCjxwYXRoIGlkPSJnIiBkPSJtMzk3LjQxIDU1Ni4yMS03MSA2OC45Mi03MS02OC45Mmg0NS4wMXYtMzIuNTFoNTIuMXYzMi41MWg0NC44OXoiLz4NCjwvZGVmcz4NCjx1c2UgZmlsbD0iIzAyMDIwMiIgeGxpbms6aHJlZj0iI2IiLz4NCjx1c2UgZmlsbC1vcGFjaXR5PSIwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1vcGFjaXR5PSIwIiB4bGluazpocmVmPSIjYiIvPg0KPHVzZSBmaWxsPSIjMDIwMjAyIiB4bGluazpocmVmPSIjZCIvPg0KPHVzZSBmaWxsLW9wYWNpdHk9IjAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAiIHhsaW5rOmhyZWY9IiNkIi8+DQo8dXNlIGZpbGw9IiMwMjAyMDIiIHhsaW5rOmhyZWY9IiNjIi8+DQo8dXNlIGZpbGwtb3BhY2l0eT0iMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utb3BhY2l0eT0iMCIgeGxpbms6aHJlZj0iI2MiLz4NCjx1c2UgZmlsbD0iIzAyMDIwMiIgeGxpbms6aHJlZj0iI2EiLz4NCjx1c2UgZmlsbC1vcGFjaXR5PSIwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1vcGFjaXR5PSIwIiB4bGluazpocmVmPSIjYSIvPg0KPHVzZSBmaWxsPSIjMDAwMDAwIiB4bGluazpocmVmPSIjZiIvPg0KPHVzZSBmaWxsPSIjMDAwMDAwIiB4bGluazpocmVmPSIjZSIvPg0KPHVzZSBmaWxsPSIjMDAwMDAwIiB4bGluazpocmVmPSIjaCIvPg0KPHVzZSBmaWxsPSIjMDAwMDAwIiB4bGluazpocmVmPSIjZyIvPg0KPC9zdmc+DQo=);
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz4NCjxzdmcgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNjQwIDY0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQo8ZGVmcz4NCjxwYXRoIGlkPSJiIiBkPSJtMzI2Ljg4IDI5OC44OGMtMTIuMTMgMC0yMS45Ni05Ljg0LTIxLjk2LTIxLjk3di0zNy43N2MwLTEyLjEzIDkuODMtMjEuOTcgMjEuOTYtMjEuOTcgMTIuMTQgMCAyMS45NyA5Ljg0IDIxLjk3IDIxLjk3djM3Ljc3Yy02LjU1IDE0LjY1LTEzLjg4IDIxLjk3LTIxLjk3IDIxLjk3eiIvPg0KPHBhdGggaWQ9ImQiIGQ9Im0zNjAuNDYgMjMyLjIydjUyLjM4YzAgMTIuMzMtOC4wOCAyMi45NS0xOS43IDI3Ljc0djI4LjE2aDExMy4zMXYtOTQuNTdjMC01My41Ni00NC44Ny05Ni45Ny0xMDAuMjEtOTYuOTdoLTEzLjF2NTUuNTJjMTMuMTMgMTAuMjcgMTkuNyAxOS41MiAxOS43IDI3Ljc0eiIvPg0KPHBhdGggaWQ9ImMiIGQ9Im0xOTkuNyA0MjEuOTdjMCA1My41NiA0NC44NyA5Ni45NyAxMDAuMjEgOTYuOTdoNTMuOTVjNTUuMzQgMCAxMDAuMjEtNDMuNDEgMTAwLjIxLTk2Ljk3di03My4zOGgtMjU0LjM3djczLjM4eiIvPg0KPHBhdGggaWQ9ImEiIGQ9Im0zMTMuMDEgMzEyLjM0Yy0xMS42Mi00Ljc5LTE5LjctMTUuNDEtMTkuNy0yNy43NHYtNTIuMzhjMC0xMi4zMyA4LjA4LTIyLjk1IDE5LjctMjcuNzR2LTU1LjUyaC0xMy4xYy01NS4zNCAwLTEwMC4yMSA0My40MS0xMDAuMjEgOTYuOTd2OTQuNTdoMTEzLjMxdi0yOC4xNnoiLz4NCjxwYXRoIGlkPSJmIiBkPSJtNDk0LjQzIDI2OS41IDY4LjkyIDcxLTY4LjkyIDcxdi00NS4wMWgtMzIuNTF2LTUyLjFoMzIuNTF2LTQ0Ljg5eiIvPg0KPHBhdGggaWQ9ImUiIGQ9Im0xNTguOTcgMjY5LjUtNjguOTEgNzEgNjguOTEgNzF2LTQ1LjAxaDMyLjUydi01Mi4xaC0zMi41MnYtNDQuODl6Ii8+DQo8cGF0aCBpZD0iaCIgZD0ibTM5Ny44OSAxMTAuOS03MS4wMS02OC45MS03MSA2OC45MWg0NS4wMnYzMi41Mmg1Mi4wOXYtMzIuNTJoNDQuOXoiLz4NCjxwYXRoIGlkPSJnIiBkPSJtMzk3LjQxIDU1Ni4yMS03MSA2OC45Mi03MS02OC45Mmg0NS4wMXYtMzIuNTFoNTIuMXYzMi41MWg0NC44OXoiLz4NCjwvZGVmcz4NCjx1c2UgZmlsbD0iIzAyMDIwMiIgeGxpbms6aHJlZj0iI2IiLz4NCjx1c2UgZmlsbC1vcGFjaXR5PSIwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1vcGFjaXR5PSIwIiB4bGluazpocmVmPSIjYiIvPg0KPHVzZSBmaWxsPSIjMDIwMjAyIiB4bGluazpocmVmPSIjZCIvPg0KPHVzZSBmaWxsLW9wYWNpdHk9IjAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAiIHhsaW5rOmhyZWY9IiNkIi8+DQo8dXNlIGZpbGw9IiMwMjAyMDIiIHhsaW5rOmhyZWY9IiNjIi8+DQo8dXNlIGZpbGwtb3BhY2l0eT0iMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utb3BhY2l0eT0iMCIgeGxpbms6aHJlZj0iI2MiLz4NCjx1c2UgZmlsbD0iIzAyMDIwMiIgeGxpbms6aHJlZj0iI2EiLz4NCjx1c2UgZmlsbC1vcGFjaXR5PSIwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1vcGFjaXR5PSIwIiB4bGluazpocmVmPSIjYSIvPg0KPHVzZSBmaWxsPSIjMDAwMDAwIiB4bGluazpocmVmPSIjZiIvPg0KPHVzZSBmaWxsPSIjMDAwMDAwIiB4bGluazpocmVmPSIjZSIvPg0KPHVzZSBmaWxsPSIjMDAwMDAwIiB4bGluazpocmVmPSIjaCIvPg0KPHVzZSBmaWxsPSIjMDAwMDAwIiB4bGluazpocmVmPSIjZyIvPg0KPC9zdmc+DQo=)
}

.app__touch-ui--mods .app__touch-button--1 {
    -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz4NCjxzdmcgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNjQwIDY0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQo8ZGVmcz4NCjxwYXRoIGlkPSJhIiBkPSJtMzEzLjI1IDI3Ni45OWMtMTQuODggMC0yNi45NC0xMi4wNi0yNi45NC0yNi45NHYtNDYuMzJjMC0xNC44OCAxMi4wNi0yNi45NCAyNi45NC0yNi45NHMyNi45NCAxMi4wNiAyNi45NCAyNi45NHY0Ni4zMmMtOC4wNCAxNy45Ni0xNy4wMiAyNi45NC0yNi45NCAyNi45NHoiLz4NCjxwYXRoIGlkPSJkIiBkPSJtMzU0LjQyIDE5NS4yNXY2NC4yM2MwIDE1LjEzLTkuOTEgMjguMTQtMjQuMTYgMzQuMDJ2MzQuNTNoMTM4Ljk2di0xMTUuOTdjMC02NS42OC01NS4wMi0xMTguOTMtMTIyLjg5LTExOC45M2gtMTYuMDd2NjguMWMxNi4xMSAxMi41OSAyNC4xNiAyMy45MyAyNC4xNiAzNC4wMnoiLz4NCjxjbGlwUGF0aCBpZD0iZSI+DQo8dXNlIHhsaW5rOmhyZWY9IiNkIi8+DQo8L2NsaXBQYXRoPg0KPHBhdGggaWQ9ImMiIGQ9Im0xNTcuMjggNDI3Ljk0YzAgNjUuNjggNTUuMDIgMTE4LjkzIDEyMi44OCAxMTguOTNoNjYuMTdjNjcuODcgMCAxMjIuODktNTMuMjUgMTIyLjg5LTExOC45M3YtODkuOThoLTMxMS45NHY4OS45OHoiLz4NCjxwYXRoIGlkPSJiIiBkPSJtMjk2LjIzIDI5My41Yy0xNC4yNC01Ljg4LTI0LjE1LTE4Ljg5LTI0LjE1LTM0LjAydi02NC4yM2MwLTE1LjEzIDkuOTEtMjguMTQgMjQuMTUtMzQuMDJ2LTY4LjFoLTE2LjA3Yy02Ny44NiAwLTEyMi44OCA1My4yNS0xMjIuODggMTE4LjkzdjExNS45N2gxMzguOTV2LTM0LjUzeiIvPg0KPC9kZWZzPg0KPHVzZSBmaWxsPSIjMDIwMjAyIiB4bGluazpocmVmPSIjYSIvPg0KPHVzZSBmaWxsLW9wYWNpdHk9IjAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAiIHhsaW5rOmhyZWY9IiNhIi8+DQo8ZyBjbGlwLXBhdGg9InVybCgjZSkiPg0KPHVzZSBmaWxsLW9wYWNpdHk9IjAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyNiIgeGxpbms6aHJlZj0iI2QiLz4NCjwvZz4NCjx1c2UgZmlsbD0iIzAyMDIwMiIgeGxpbms6aHJlZj0iI2MiLz4NCjx1c2UgZmlsbC1vcGFjaXR5PSIwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1vcGFjaXR5PSIwIiB4bGluazpocmVmPSIjYyIvPg0KPHVzZSBmaWxsPSIjMDIwMjAyIiB4bGluazpocmVmPSIjYiIvPg0KPHVzZSBmaWxsLW9wYWNpdHk9IjAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAiIHhsaW5rOmhyZWY9IiNiIi8+DQo8L3N2Zz4NCg==);
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz4NCjxzdmcgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNjQwIDY0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQo8ZGVmcz4NCjxwYXRoIGlkPSJhIiBkPSJtMzEzLjI1IDI3Ni45OWMtMTQuODggMC0yNi45NC0xMi4wNi0yNi45NC0yNi45NHYtNDYuMzJjMC0xNC44OCAxMi4wNi0yNi45NCAyNi45NC0yNi45NHMyNi45NCAxMi4wNiAyNi45NCAyNi45NHY0Ni4zMmMtOC4wNCAxNy45Ni0xNy4wMiAyNi45NC0yNi45NCAyNi45NHoiLz4NCjxwYXRoIGlkPSJkIiBkPSJtMzU0LjQyIDE5NS4yNXY2NC4yM2MwIDE1LjEzLTkuOTEgMjguMTQtMjQuMTYgMzQuMDJ2MzQuNTNoMTM4Ljk2di0xMTUuOTdjMC02NS42OC01NS4wMi0xMTguOTMtMTIyLjg5LTExOC45M2gtMTYuMDd2NjguMWMxNi4xMSAxMi41OSAyNC4xNiAyMy45MyAyNC4xNiAzNC4wMnoiLz4NCjxjbGlwUGF0aCBpZD0iZSI+DQo8dXNlIHhsaW5rOmhyZWY9IiNkIi8+DQo8L2NsaXBQYXRoPg0KPHBhdGggaWQ9ImMiIGQ9Im0xNTcuMjggNDI3Ljk0YzAgNjUuNjggNTUuMDIgMTE4LjkzIDEyMi44OCAxMTguOTNoNjYuMTdjNjcuODcgMCAxMjIuODktNTMuMjUgMTIyLjg5LTExOC45M3YtODkuOThoLTMxMS45NHY4OS45OHoiLz4NCjxwYXRoIGlkPSJiIiBkPSJtMjk2LjIzIDI5My41Yy0xNC4yNC01Ljg4LTI0LjE1LTE4Ljg5LTI0LjE1LTM0LjAydi02NC4yM2MwLTE1LjEzIDkuOTEtMjguMTQgMjQuMTUtMzQuMDJ2LTY4LjFoLTE2LjA3Yy02Ny44NiAwLTEyMi44OCA1My4yNS0xMjIuODggMTE4LjkzdjExNS45N2gxMzguOTV2LTM0LjUzeiIvPg0KPC9kZWZzPg0KPHVzZSBmaWxsPSIjMDIwMjAyIiB4bGluazpocmVmPSIjYSIvPg0KPHVzZSBmaWxsLW9wYWNpdHk9IjAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAiIHhsaW5rOmhyZWY9IiNhIi8+DQo8ZyBjbGlwLXBhdGg9InVybCgjZSkiPg0KPHVzZSBmaWxsLW9wYWNpdHk9IjAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyNiIgeGxpbms6aHJlZj0iI2QiLz4NCjwvZz4NCjx1c2UgZmlsbD0iIzAyMDIwMiIgeGxpbms6aHJlZj0iI2MiLz4NCjx1c2UgZmlsbC1vcGFjaXR5PSIwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1vcGFjaXR5PSIwIiB4bGluazpocmVmPSIjYyIvPg0KPHVzZSBmaWxsPSIjMDIwMjAyIiB4bGluazpocmVmPSIjYiIvPg0KPHVzZSBmaWxsLW9wYWNpdHk9IjAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAiIHhsaW5rOmhyZWY9IiNiIi8+DQo8L3N2Zz4NCg==)
}

.app__touch-ui--mods .app__touch-button--2 {
    -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz4NCjxzdmcgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNjQwIDY0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQo8ZGVmcz4NCjxwYXRoIGlkPSJhIiBkPSJtNDM5LjUyIDEwOC4wNGMzNy41NCAwIDY3Ljk4IDMwLjQzIDY3Ljk4IDY3Ljk4djI0My41NWMwIDQyLjIzLTM0LjI0IDc2LjQ3LTc2LjQ3IDc2LjQ3aC0yMjcuMDFjLTM5LjUgMC03MS41Mi0zMi4wMi03MS41Mi03MS41MnYtMjQxLjQzYzAtNDEuNDUgMzMuNi03NS4wNSA3NS4wNS03NS4wNWgyMzEuOTd6Ii8+DQo8Y2xpcFBhdGggaWQ9ImMiPg0KPHVzZSB4bGluazpocmVmPSIjYSIvPg0KPC9jbGlwUGF0aD4NCjxwYXRoIGlkPSJiIiBkPSJtMzY2IDM0OS41Ny04NC04MS41My04NCA4MS41M2g1My4yNXY2Ni40N2g2MS42NHYtNjYuNDdoNTMuMTF6Ii8+DQo8L2RlZnM+DQo8ZyBjbGlwLXBhdGg9InVybCgjYykiPg0KPHVzZSBmaWxsLW9wYWNpdHk9IjAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSI1MiIgeGxpbms6aHJlZj0iI2EiLz4NCjwvZz4NCjx1c2UgZmlsbD0iIzAwMDAwMCIgeGxpbms6aHJlZj0iI2IiLz4NCjwvc3ZnPg0K);
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz4NCjxzdmcgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNjQwIDY0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQo8ZGVmcz4NCjxwYXRoIGlkPSJhIiBkPSJtNDM5LjUyIDEwOC4wNGMzNy41NCAwIDY3Ljk4IDMwLjQzIDY3Ljk4IDY3Ljk4djI0My41NWMwIDQyLjIzLTM0LjI0IDc2LjQ3LTc2LjQ3IDc2LjQ3aC0yMjcuMDFjLTM5LjUgMC03MS41Mi0zMi4wMi03MS41Mi03MS41MnYtMjQxLjQzYzAtNDEuNDUgMzMuNi03NS4wNSA3NS4wNS03NS4wNWgyMzEuOTd6Ii8+DQo8Y2xpcFBhdGggaWQ9ImMiPg0KPHVzZSB4bGluazpocmVmPSIjYSIvPg0KPC9jbGlwUGF0aD4NCjxwYXRoIGlkPSJiIiBkPSJtMzY2IDM0OS41Ny04NC04MS41My04NCA4MS41M2g1My4yNXY2Ni40N2g2MS42NHYtNjYuNDdoNTMuMTF6Ii8+DQo8L2RlZnM+DQo8ZyBjbGlwLXBhdGg9InVybCgjYykiPg0KPHVzZSBmaWxsLW9wYWNpdHk9IjAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSI1MiIgeGxpbms6aHJlZj0iI2EiLz4NCjwvZz4NCjx1c2UgZmlsbD0iIzAwMDAwMCIgeGxpbms6aHJlZj0iI2IiLz4NCjwvc3ZnPg0K)
}

.app__touch-ui--mods .app__touch-button--3 {
    -webkit-mask-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20baseProfile='tiny-ps'%20version='1.2'%20viewBox='0%200%20128%20128'%20xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3e.shp0{fill:%23000}%3c/style%3e%3cpath%20class='shp0'%20d='M26.6%2059.8h-3.82V38.3c0-6.87%207.57-16.9%2018.62-16.9%2011.2%200%2019.6.2%2019.6.2v3.62S49%2025%2041.5%2025c-6.82%200-14.7%206.68-14.7%2013.2%200%201.28-.2%2021.6-.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M101.6%2059.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2%200-27.24.2-27.24.2l-.16%203.62S82.08%2025%2087.9%2025c6.82%200%2013.5%206.68%2013.5%2013.2%200%201.28.2%2021.6.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M26.42%2059.4H22.6v30.1c0%206.87%207.57%2016.9%2018.62%2016.9%2011.2%200%2019.6-.2%2019.6-.2v-3.62s-12%20.22-19.5.22c-6.82%200-14.7-6.68-14.7-13.2%200-1.28-.2-30.2-.2-30.2z'/%3e%3cpath%20class='shp0'%20d='M101.42%2059.6h3.82v29.9c0%206.87-6.36%2016.9-17.42%2016.9-11.2%200-27.24-.2-27.24-.2l-.16-3.62s21.48.22%2027.3.22c6.83%200%2013.5-6.68%2013.5-13.2%200-1.28.2-30%20.2-30z'/%3e%3cpath%20class='shp0'%20d='M61.4%2048.99v-3.96H43.61V83h4.72V65.92h11.71v-3.96H48.33V48.99H61.4zm22.73%2025.44v-5.86c0-6.02-3.69-8.46-8.95-8.46h-1.69V49.1h9.82v-4.07H68.88v19.15h6.57c2.33%200%203.96%201.52%203.96%203.9v6.89c0%202.77-1.25%203.96-4.02%203.96h-7.05V83h6.56c6.51%200%209.23-2.6%209.23-8.57z'/%3e%3c/svg%3e");
    mask-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20baseProfile='tiny-ps'%20version='1.2'%20viewBox='0%200%20128%20128'%20xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3e.shp0{fill:%23000}%3c/style%3e%3cpath%20class='shp0'%20d='M26.6%2059.8h-3.82V38.3c0-6.87%207.57-16.9%2018.62-16.9%2011.2%200%2019.6.2%2019.6.2v3.62S49%2025%2041.5%2025c-6.82%200-14.7%206.68-14.7%2013.2%200%201.28-.2%2021.6-.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M101.6%2059.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2%200-27.24.2-27.24.2l-.16%203.62S82.08%2025%2087.9%2025c6.82%200%2013.5%206.68%2013.5%2013.2%200%201.28.2%2021.6.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M26.42%2059.4H22.6v30.1c0%206.87%207.57%2016.9%2018.62%2016.9%2011.2%200%2019.6-.2%2019.6-.2v-3.62s-12%20.22-19.5.22c-6.82%200-14.7-6.68-14.7-13.2%200-1.28-.2-30.2-.2-30.2z'/%3e%3cpath%20class='shp0'%20d='M101.42%2059.6h3.82v29.9c0%206.87-6.36%2016.9-17.42%2016.9-11.2%200-27.24-.2-27.24-.2l-.16-3.62s21.48.22%2027.3.22c6.83%200%2013.5-6.68%2013.5-13.2%200-1.28.2-30%20.2-30z'/%3e%3cpath%20class='shp0'%20d='M61.4%2048.99v-3.96H43.61V83h4.72V65.92h11.71v-3.96H48.33V48.99H61.4zm22.73%2025.44v-5.86c0-6.02-3.69-8.46-8.95-8.46h-1.69V49.1h9.82v-4.07H68.88v19.15h6.57c2.33%200%203.96%201.52%203.96%203.9v6.89c0%202.77-1.25%203.96-4.02%203.96h-7.05V83h6.56c6.51%200%209.23-2.6%209.23-8.57z'/%3e%3c/svg%3e")
}

.app__touch-ui--mods .app__touch-button--4 {
    -webkit-mask-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20baseProfile='tiny-ps'%20version='1.2'%20viewBox='0%200%20128%20128'%20xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3e.shp0{fill:%23000}%3c/style%3e%3cpath%20class='shp0'%20d='M26.6%2059.8h-3.82V38.3c0-6.87%207.57-16.9%2018.62-16.9%2011.2%200%2019.6.2%2019.6.2v3.62S49%2025%2041.5%2025c-6.82%200-14.7%206.68-14.7%2013.2%200%201.28-.2%2021.6-.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M101.6%2059.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2%200-27.24.2-27.24.2l-.16%203.62S82.08%2025%2087.9%2025c6.82%200%2013.5%206.68%2013.5%2013.2%200%201.28.2%2021.6.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M26.42%2059.4H22.6v30.1c0%206.87%207.57%2016.9%2018.62%2016.9%2011.2%200%2019.6-.2%2019.6-.2v-3.62s-12%20.22-19.5.22c-6.82%200-14.7-6.68-14.7-13.2%200-1.28-.2-30.2-.2-30.2z'/%3e%3cpath%20class='shp0'%20d='M101.42%2059.6h3.82v29.9c0%206.87-6.36%2016.9-17.42%2016.9-11.2%200-27.24-.2-27.24-.2l-.16-3.62s21.48.22%2027.3.22c6.83%200%2013.5-6.68%2013.5-13.2%200-1.28.2-30%20.2-30z'/%3e%3cpath%20class='shp0'%20d='M48.33%2048.99v12.97h11.71v3.96H48.33V83h-4.72V45.03H61.4v3.96H48.33zM77.24%2083h-1.36c-4.61%200-8.57-3.04-8.57-9.22V54.25c0-6.18%203.42-9.22%209.66-9.22h6.23v4.13h-6.78c-2.71%200-4.5%201.89-4.5%204.06v5.92h4.77c6.13%200%209.12%202.49%209.12%208.67v5.97c0%206.18-3.96%209.22-8.57%209.22zm-5.32-19.8v11.61c0%202.17%201.52%204.12%204.23%204.12h.82c2.71%200%204.23-1.95%204.23-4.12v-8.03c0-2.17-1.25-3.58-3.96-3.58h-5.32z'%20fill-rule='evenodd'/%3e%3c/svg%3e");
    mask-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20baseProfile='tiny-ps'%20version='1.2'%20viewBox='0%200%20128%20128'%20xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3e.shp0{fill:%23000}%3c/style%3e%3cpath%20class='shp0'%20d='M26.6%2059.8h-3.82V38.3c0-6.87%207.57-16.9%2018.62-16.9%2011.2%200%2019.6.2%2019.6.2v3.62S49%2025%2041.5%2025c-6.82%200-14.7%206.68-14.7%2013.2%200%201.28-.2%2021.6-.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M101.6%2059.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2%200-27.24.2-27.24.2l-.16%203.62S82.08%2025%2087.9%2025c6.82%200%2013.5%206.68%2013.5%2013.2%200%201.28.2%2021.6.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M26.42%2059.4H22.6v30.1c0%206.87%207.57%2016.9%2018.62%2016.9%2011.2%200%2019.6-.2%2019.6-.2v-3.62s-12%20.22-19.5.22c-6.82%200-14.7-6.68-14.7-13.2%200-1.28-.2-30.2-.2-30.2z'/%3e%3cpath%20class='shp0'%20d='M101.42%2059.6h3.82v29.9c0%206.87-6.36%2016.9-17.42%2016.9-11.2%200-27.24-.2-27.24-.2l-.16-3.62s21.48.22%2027.3.22c6.83%200%2013.5-6.68%2013.5-13.2%200-1.28.2-30%20.2-30z'/%3e%3cpath%20class='shp0'%20d='M48.33%2048.99v12.97h11.71v3.96H48.33V83h-4.72V45.03H61.4v3.96H48.33zM77.24%2083h-1.36c-4.61%200-8.57-3.04-8.57-9.22V54.25c0-6.18%203.42-9.22%209.66-9.22h6.23v4.13h-6.78c-2.71%200-4.5%201.89-4.5%204.06v5.92h4.77c6.13%200%209.12%202.49%209.12%208.67v5.97c0%206.18-3.96%209.22-8.57%209.22zm-5.32-19.8v11.61c0%202.17%201.52%204.12%204.23%204.12h.82c2.71%200%204.23-1.95%204.23-4.12v-8.03c0-2.17-1.25-3.58-3.96-3.58h-5.32z'%20fill-rule='evenodd'/%3e%3c/svg%3e")
}

.app__touch-ui--belt {
    right: 0
}

.app__touch-ui--belt .app__touch-button {
    width: 12vh;
    height: 12vh;
    font-size: 1vh;
    border-radius: 20%;
    overflow: hidden;
    background-color: #000;
    border: 2px solid #444
}

.app__touch-ui--belt .app__touch-button canvas {
    position: absolute;
    left: 5%;
    top: 5%;
    width: 90%;
    height: 90%
}

.app__touch-ui--belt .app__touch-button:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 20%;
    box-shadow: inset 0 0 1em 1.5em #000
}

.app__touch-ui--fkeys-left {
    left: 0;
    top: auto;
    bottom: 0;
    height: 35vh
}

.app__touch-ui--fkeys-left .app__touch-button {
    width: 15vh;
    height: 15vh;
    position: absolute;
    left: 50%;
    background-color: #444;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

.app__touch-ui--fkeys-left .app__touch-button--active {
    background-color: #fff
}

.app__touch-ui--fkeys-left .app__touch-button--3 {
    top: 0;
    transform: translate(-50%);
    -webkit-mask-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20baseProfile='tiny-ps'%20version='1.2'%20viewBox='0%200%20128%20128'%20xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3e.shp0{fill:%23000}%3c/style%3e%3cpath%20class='shp0'%20d='M26.6%2059.8h-3.82V38.3c0-6.87%207.57-16.9%2018.62-16.9%2011.2%200%2019.6.2%2019.6.2v3.62S49%2025%2041.5%2025c-6.82%200-14.7%206.68-14.7%2013.2%200%201.28-.2%2021.6-.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M101.6%2059.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2%200-27.24.2-27.24.2l-.16%203.62S82.08%2025%2087.9%2025c6.82%200%2013.5%206.68%2013.5%2013.2%200%201.28.2%2021.6.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M26.42%2059.4H22.6v30.1c0%206.87%207.57%2016.9%2018.62%2016.9%2011.2%200%2019.6-.2%2019.6-.2v-3.62s-12%20.22-19.5.22c-6.82%200-14.7-6.68-14.7-13.2%200-1.28-.2-30.2-.2-30.2z'/%3e%3cpath%20class='shp0'%20d='M101.42%2059.6h3.82v29.9c0%206.87-6.36%2016.9-17.42%2016.9-11.2%200-27.24-.2-27.24-.2l-.16-3.62s21.48.22%2027.3.22c6.83%200%2013.5-6.68%2013.5-13.2%200-1.28.2-30%20.2-30z'/%3e%3cpath%20class='shp0'%20d='M61.4%2048.99v-3.96H43.61V83h4.72V65.92h11.71v-3.96H48.33V48.99H61.4zm22.73%2025.44v-5.86c0-6.02-3.69-8.46-8.95-8.46h-1.69V49.1h9.82v-4.07H68.88v19.15h6.57c2.33%200%203.96%201.52%203.96%203.9v6.89c0%202.77-1.25%203.96-4.02%203.96h-7.05V83h6.56c6.51%200%209.23-2.6%209.23-8.57z'/%3e%3c/svg%3e");
    mask-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20baseProfile='tiny-ps'%20version='1.2'%20viewBox='0%200%20128%20128'%20xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3e.shp0{fill:%23000}%3c/style%3e%3cpath%20class='shp0'%20d='M26.6%2059.8h-3.82V38.3c0-6.87%207.57-16.9%2018.62-16.9%2011.2%200%2019.6.2%2019.6.2v3.62S49%2025%2041.5%2025c-6.82%200-14.7%206.68-14.7%2013.2%200%201.28-.2%2021.6-.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M101.6%2059.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2%200-27.24.2-27.24.2l-.16%203.62S82.08%2025%2087.9%2025c6.82%200%2013.5%206.68%2013.5%2013.2%200%201.28.2%2021.6.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M26.42%2059.4H22.6v30.1c0%206.87%207.57%2016.9%2018.62%2016.9%2011.2%200%2019.6-.2%2019.6-.2v-3.62s-12%20.22-19.5.22c-6.82%200-14.7-6.68-14.7-13.2%200-1.28-.2-30.2-.2-30.2z'/%3e%3cpath%20class='shp0'%20d='M101.42%2059.6h3.82v29.9c0%206.87-6.36%2016.9-17.42%2016.9-11.2%200-27.24-.2-27.24-.2l-.16-3.62s21.48.22%2027.3.22c6.83%200%2013.5-6.68%2013.5-13.2%200-1.28.2-30%20.2-30z'/%3e%3cpath%20class='shp0'%20d='M61.4%2048.99v-3.96H43.61V83h4.72V65.92h11.71v-3.96H48.33V48.99H61.4zm22.73%2025.44v-5.86c0-6.02-3.69-8.46-8.95-8.46h-1.69V49.1h9.82v-4.07H68.88v19.15h6.57c2.33%200%203.96%201.52%203.96%203.9v6.89c0%202.77-1.25%203.96-4.02%203.96h-7.05V83h6.56c6.51%200%209.23-2.6%209.23-8.57z'/%3e%3c/svg%3e")
}

.app__touch-ui--fkeys-left .app__touch-button--4 {
    top: 60%;
    -webkit-mask-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20baseProfile='tiny-ps'%20version='1.2'%20viewBox='0%200%20128%20128'%20xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3e.shp0{fill:%23000}%3c/style%3e%3cpath%20class='shp0'%20d='M26.6%2059.8h-3.82V38.3c0-6.87%207.57-16.9%2018.62-16.9%2011.2%200%2019.6.2%2019.6.2v3.62S49%2025%2041.5%2025c-6.82%200-14.7%206.68-14.7%2013.2%200%201.28-.2%2021.6-.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M101.6%2059.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2%200-27.24.2-27.24.2l-.16%203.62S82.08%2025%2087.9%2025c6.82%200%2013.5%206.68%2013.5%2013.2%200%201.28.2%2021.6.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M26.42%2059.4H22.6v30.1c0%206.87%207.57%2016.9%2018.62%2016.9%2011.2%200%2019.6-.2%2019.6-.2v-3.62s-12%20.22-19.5.22c-6.82%200-14.7-6.68-14.7-13.2%200-1.28-.2-30.2-.2-30.2z'/%3e%3cpath%20class='shp0'%20d='M101.42%2059.6h3.82v29.9c0%206.87-6.36%2016.9-17.42%2016.9-11.2%200-27.24-.2-27.24-.2l-.16-3.62s21.48.22%2027.3.22c6.83%200%2013.5-6.68%2013.5-13.2%200-1.28.2-30%20.2-30z'/%3e%3cpath%20class='shp0'%20d='M48.33%2048.99v12.97h11.71v3.96H48.33V83h-4.72V45.03H61.4v3.96H48.33zM77.24%2083h-1.36c-4.61%200-8.57-3.04-8.57-9.22V54.25c0-6.18%203.42-9.22%209.66-9.22h6.23v4.13h-6.78c-2.71%200-4.5%201.89-4.5%204.06v5.92h4.77c6.13%200%209.12%202.49%209.12%208.67v5.97c0%206.18-3.96%209.22-8.57%209.22zm-5.32-19.8v11.61c0%202.17%201.52%204.12%204.23%204.12h.82c2.71%200%204.23-1.95%204.23-4.12v-8.03c0-2.17-1.25-3.58-3.96-3.58h-5.32z'%20fill-rule='evenodd'/%3e%3c/svg%3e");
    mask-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20baseProfile='tiny-ps'%20version='1.2'%20viewBox='0%200%20128%20128'%20xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3e.shp0{fill:%23000}%3c/style%3e%3cpath%20class='shp0'%20d='M26.6%2059.8h-3.82V38.3c0-6.87%207.57-16.9%2018.62-16.9%2011.2%200%2019.6.2%2019.6.2v3.62S49%2025%2041.5%2025c-6.82%200-14.7%206.68-14.7%2013.2%200%201.28-.2%2021.6-.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M101.6%2059.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2%200-27.24.2-27.24.2l-.16%203.62S82.08%2025%2087.9%2025c6.82%200%2013.5%206.68%2013.5%2013.2%200%201.28.2%2021.6.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M26.42%2059.4H22.6v30.1c0%206.87%207.57%2016.9%2018.62%2016.9%2011.2%200%2019.6-.2%2019.6-.2v-3.62s-12%20.22-19.5.22c-6.82%200-14.7-6.68-14.7-13.2%200-1.28-.2-30.2-.2-30.2z'/%3e%3cpath%20class='shp0'%20d='M101.42%2059.6h3.82v29.9c0%206.87-6.36%2016.9-17.42%2016.9-11.2%200-27.24-.2-27.24-.2l-.16-3.62s21.48.22%2027.3.22c6.83%200%2013.5-6.68%2013.5-13.2%200-1.28.2-30%20.2-30z'/%3e%3cpath%20class='shp0'%20d='M48.33%2048.99v12.97h11.71v3.96H48.33V83h-4.72V45.03H61.4v3.96H48.33zM77.24%2083h-1.36c-4.61%200-8.57-3.04-8.57-9.22V54.25c0-6.18%203.42-9.22%209.66-9.22h6.23v4.13h-6.78c-2.71%200-4.5%201.89-4.5%204.06v5.92h4.77c6.13%200%209.12%202.49%209.12%208.67v5.97c0%206.18-3.96%209.22-8.57%209.22zm-5.32-19.8v11.61c0%202.17%201.52%204.12%204.23%204.12h.82c2.71%200%204.23-1.95%204.23-4.12v-8.03c0-2.17-1.25-3.58-3.96-3.58h-5.32z'%20fill-rule='evenodd'/%3e%3c/svg%3e")
}

.app__touch-ui--fkeys-right {
    left: auto;
    top: auto;
    right: 0;
    bottom: 0;
    height: 35vh
}

.app__touch-ui--fkeys-right .app__touch-button {
    width: 15vh;
    height: 15vh;
    position: absolute;
    left: 50%;
    background-color: #444;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

.app__touch-ui--fkeys-right .app__touch-button--active {
    background-color: #fff
}

.app__touch-ui--fkeys-right .app__touch-button--5 {
    top: 0;
    transform: translate(-50%);
    -webkit-mask-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20baseProfile='tiny-ps'%20version='1.2'%20viewBox='0%200%20128%20128'%20xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3e.shp0{fill:%23000}%3c/style%3e%3cpath%20class='shp0'%20d='M26.6%2059.8h-3.82V38.3c0-6.87%207.57-16.9%2018.62-16.9%2011.2%200%2019.6.2%2019.6.2v3.62S49%2025%2041.5%2025c-6.82%200-14.7%206.68-14.7%2013.2%200%201.28-.2%2021.6-.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M101.6%2059.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2%200-27.24.2-27.24.2l-.16%203.62S82.08%2025%2087.9%2025c6.82%200%2013.5%206.68%2013.5%2013.2%200%201.28.2%2021.6.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M26.42%2059.4H22.6v30.1c0%206.87%207.57%2016.9%2018.62%2016.9%2011.2%200%2019.6-.2%2019.6-.2v-3.62s-12%20.22-19.5.22c-6.82%200-14.7-6.68-14.7-13.2%200-1.28-.2-30.2-.2-30.2z'/%3e%3cpath%20class='shp0'%20d='M101.42%2059.6h3.82v29.9c0%206.87-6.36%2016.9-17.42%2016.9-11.2%200-27.24-.2-27.24-.2l-.16-3.62s21.48.22%2027.3.22c6.83%200%2013.5-6.68%2013.5-13.2%200-1.28.2-30%20.2-30z'/%3e%3cpath%20class='shp0'%20d='M61.4%2048.99v-3.96H43.61V83h4.72V65.92h11.71v-3.96H48.33V48.99H61.4zm22.67%201.31v-5.27H67.53v4.07h12.04L70.51%2083h4.83l8.73-32.7z'/%3e%3c/svg%3e");
    mask-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20baseProfile='tiny-ps'%20version='1.2'%20viewBox='0%200%20128%20128'%20xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3e.shp0{fill:%23000}%3c/style%3e%3cpath%20class='shp0'%20d='M26.6%2059.8h-3.82V38.3c0-6.87%207.57-16.9%2018.62-16.9%2011.2%200%2019.6.2%2019.6.2v3.62S49%2025%2041.5%2025c-6.82%200-14.7%206.68-14.7%2013.2%200%201.28-.2%2021.6-.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M101.6%2059.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2%200-27.24.2-27.24.2l-.16%203.62S82.08%2025%2087.9%2025c6.82%200%2013.5%206.68%2013.5%2013.2%200%201.28.2%2021.6.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M26.42%2059.4H22.6v30.1c0%206.87%207.57%2016.9%2018.62%2016.9%2011.2%200%2019.6-.2%2019.6-.2v-3.62s-12%20.22-19.5.22c-6.82%200-14.7-6.68-14.7-13.2%200-1.28-.2-30.2-.2-30.2z'/%3e%3cpath%20class='shp0'%20d='M101.42%2059.6h3.82v29.9c0%206.87-6.36%2016.9-17.42%2016.9-11.2%200-27.24-.2-27.24-.2l-.16-3.62s21.48.22%2027.3.22c6.83%200%2013.5-6.68%2013.5-13.2%200-1.28.2-30%20.2-30z'/%3e%3cpath%20class='shp0'%20d='M61.4%2048.99v-3.96H43.61V83h4.72V65.92h11.71v-3.96H48.33V48.99H61.4zm22.67%201.31v-5.27H67.53v4.07h12.04L70.51%2083h4.83l8.73-32.7z'/%3e%3c/svg%3e")
}

.app__touch-ui--fkeys-right .app__touch-button--6 {
    top: 60%;
    -webkit-mask-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20baseProfile='tiny-ps'%20version='1.2'%20viewBox='0%200%20128%20128'%20xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3e.shp0{fill:%23000}%3c/style%3e%3cpath%20class='shp0'%20d='M26.6%2059.8h-3.82V38.3c0-6.87%207.57-16.9%2018.62-16.9%2011.2%200%2019.6.2%2019.6.2v3.62S49%2025%2041.5%2025c-6.82%200-14.7%206.68-14.7%2013.2%200%201.28-.2%2021.6-.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M101.6%2059.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2%200-27.24.2-27.24.2l-.16%203.62S82.08%2025%2087.9%2025c6.82%200%2013.5%206.68%2013.5%2013.2%200%201.28.2%2021.6.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M26.42%2059.4H22.6v30.1c0%206.87%207.57%2016.9%2018.62%2016.9%2011.2%200%2019.6-.2%2019.6-.2v-3.62s-12%20.22-19.5.22c-6.82%200-14.7-6.68-14.7-13.2%200-1.28-.2-30.2-.2-30.2z'/%3e%3cpath%20class='shp0'%20d='M101.42%2059.6h3.82v29.9c0%206.87-6.36%2016.9-17.42%2016.9-11.2%200-27.24-.2-27.24-.2l-.16-3.62s21.48.22%2027.3.22c6.83%200%2013.5-6.68%2013.5-13.2%200-1.28.2-30%20.2-30z'/%3e%3cpath%20class='shp0'%20d='M48.33%2048.99v12.97h11.71v3.96H48.33V83h-4.72V45.03H61.4v3.96H48.33zM77.07%2083h-.97c-6.51%200-9.22-2.6-9.22-8.57v-4.56c0-3.25%201.25-5.42%203.52-6.67-1.84-1.3-2.87-3.41-2.87-6.29V53.5c0-5.97%203.36-8.47%208.79-8.47h.54c5.42%200%208.78%202.5%208.78%208.47v3.41c0%202.88-1.03%204.99-2.87%206.29%202.28%201.25%203.52%203.42%203.52%206.67v4.56c0%205.97-2.71%208.57-9.22%208.57zm.55-17.52h-2.06c-2.34%200-3.96%201.52-3.96%203.91v5.58c0%202.66%201.08%203.96%203.58%203.96h2.38c2.77%200%204.02-1.19%204.02-3.96v-5.58c0-2.39-1.63-3.91-3.96-3.91zM75.66%2049.1c-2.44%200-3.41%201.36-3.41%203.91v4.44c0%202.34%201.52%203.86%203.52%203.96h1.3c2.17%200%203.86-1.51%203.86-3.96v-4.44c0-2.77-1.14-3.91-3.86-3.91h-1.41z'%20fill-rule='evenodd'/%3e%3c/svg%3e");
    mask-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20baseProfile='tiny-ps'%20version='1.2'%20viewBox='0%200%20128%20128'%20xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3e.shp0{fill:%23000}%3c/style%3e%3cpath%20class='shp0'%20d='M26.6%2059.8h-3.82V38.3c0-6.87%207.57-16.9%2018.62-16.9%2011.2%200%2019.6.2%2019.6.2v3.62S49%2025%2041.5%2025c-6.82%200-14.7%206.68-14.7%2013.2%200%201.28-.2%2021.6-.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M101.6%2059.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2%200-27.24.2-27.24.2l-.16%203.62S82.08%2025%2087.9%2025c6.82%200%2013.5%206.68%2013.5%2013.2%200%201.28.2%2021.6.2%2021.6z'/%3e%3cpath%20class='shp0'%20d='M26.42%2059.4H22.6v30.1c0%206.87%207.57%2016.9%2018.62%2016.9%2011.2%200%2019.6-.2%2019.6-.2v-3.62s-12%20.22-19.5.22c-6.82%200-14.7-6.68-14.7-13.2%200-1.28-.2-30.2-.2-30.2z'/%3e%3cpath%20class='shp0'%20d='M101.42%2059.6h3.82v29.9c0%206.87-6.36%2016.9-17.42%2016.9-11.2%200-27.24-.2-27.24-.2l-.16-3.62s21.48.22%2027.3.22c6.83%200%2013.5-6.68%2013.5-13.2%200-1.28.2-30%20.2-30z'/%3e%3cpath%20class='shp0'%20d='M48.33%2048.99v12.97h11.71v3.96H48.33V83h-4.72V45.03H61.4v3.96H48.33zM77.07%2083h-.97c-6.51%200-9.22-2.6-9.22-8.57v-4.56c0-3.25%201.25-5.42%203.52-6.67-1.84-1.3-2.87-3.41-2.87-6.29V53.5c0-5.97%203.36-8.47%208.79-8.47h.54c5.42%200%208.78%202.5%208.78%208.47v3.41c0%202.88-1.03%204.99-2.87%206.29%202.28%201.25%203.52%203.42%203.52%206.67v4.56c0%205.97-2.71%208.57-9.22%208.57zm.55-17.52h-2.06c-2.34%200-3.96%201.52-3.96%203.91v5.58c0%202.66%201.08%203.96%203.58%203.96h2.38c2.77%200%204.02-1.19%204.02-3.96v-5.58c0-2.39-1.63-3.91-3.96-3.91zM75.66%2049.1c-2.44%200-3.41%201.36-3.41%203.91v4.44c0%202.34%201.52%203.86%203.52%203.96h1.3c2.17%200%203.86-1.51%203.86-3.96v-4.44c0-2.77-1.14-3.91-3.86-3.91h-1.41z'%20fill-rule='evenodd'/%3e%3c/svg%3e")
}

.app--touch .app__touch-ui {
    display: block
}

.app--touch.app--keyboard .app__touch-ui {
    display: none
}

@media (max-aspect-ratio: 880/480) {
    .app__touch-ui {
        width: calc(50vw - 200vh / 3)
    }
}

@media (max-aspect-ratio: 832/480) {
    .app__touch-ui {
        width: 20vh
    }
}

@media (max-aspect-ratio: 640/480) {
    .app__touch-ui {
        width: auto;
        height: 20vw
    }

    .app__touch-ui .app__touch-button {
        top: 55%
    }

    .app__touch-ui .app__touch-button--0 {
        left: 16.7vw
    }

    .app__touch-ui .app__touch-button--1 {
        left: 50vw
    }

    .app__touch-ui .app__touch-button--2 {
        left: 83.3vw
    }

    .app__touch-ui--mods {
        top: auto;
        right: 0
    }

    .app__touch-ui--mods .app__touch-button {
        width: 20vw;
        height: 20vw;
        border-radius: 10vw
    }

    .app__touch-ui--belt {
        bottom: auto;
        left: 0
    }

    .app__touch-ui--belt .app__touch-button {
        width: 14vw;
        height: 14vw;
        font-size: 1vw
    }

    .app__touch-ui--fkeys-left {
        left: 0;
        bottom: 15vh;
        width: 50%;
        height: 12vh
    }

    .app__touch-ui--fkeys-left .app__touch-button {
        height: 12vh;
        width: 12vh
    }

    .app__touch-ui--fkeys-left .app__touch-button--3 {
        left: 25%
    }

    .app__touch-ui--fkeys-left .app__touch-button--4 {
        top: 50%;
        left: 75%
    }

    .app__touch-ui--fkeys-right {
        left: auto;
        right: 0;
        bottom: 15vh;
        width: 50%;
        height: 12vh
    }

    .app__touch-ui--fkeys-right .app__touch-button {
        height: 12vh;
        width: 12vh
    }

    .app__touch-ui--fkeys-right .app__touch-button--5 {
        left: 25%
    }

    .app__touch-ui--fkeys-right .app__touch-button--6 {
        top: 50%;
        left: 75%
    }
}

@media (max-aspect-ratio: 640/736) {
    .app__touch-ui {
        height: calc(50vh - 37.5vw)
    }
}

@media (max-aspect-ratio: 640/800) {
    .app__touch-ui {
        height: 35vw
    }
}

.app__inner--wide {
    width: 100vw;
    height: 100vh
}

.app__inner--narrow {
    width: calc(400vh / 3);
    max-height: 56.25vw
}

.app__body--wide {
    left: 0
}

.app__body--narrow {
    left: calc(50% - 200vh / 3)
}

*,
*:before,
*:after {
    box-sizing: border-box
}

* {
    margin: 0;
    padding: 0
}

ul,
ol {
    list-style: none
}

html:focus-within {
    scroll-behavior: smooth
}

a:not([class]) {
    text-decoration-skip-ink: auto
}

img,
picture,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover
}

input,
button,
textarea,
select {
    font: inherit
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
        transition: none
    }
}

body,
html {
    height: 100%;
    scroll-behavior: smooth
}