@keyframes shake {
    0% {
        transform: translate(-14px)
    }

    10% {
        transform: translate(14px)
    }

    20% {
        transform: translate(-12px)
    }

    30% {
        transform: translate(12px)
    }

    40% {
        transform: translate(-10px)
    }

    50% {
        transform: translate(10px)
    }

    60% {
        transform: translate(-6px)
    }

    70% {
        transform: translate(6px)
    }

    80% {
        transform: translate(-4px)
    }

    90% {
        transform: translate(4px)
    }

    to {
        transform: translate(0)
    }
}

@keyframes fusion-core {
    0% {
        transform: scale(0);
        opacity: 1
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes fusion-core-come-back {
    0% {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes fusion-core-out {
    0% {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(0);
        opacity: 1
    }
}

@keyframes fusion-secondary {
    0% {
        transform: scale(0)
    }

    to {
        transform: scale(1.6)
    }
}

@keyframes fusion-secondary-opacity {
    0% {
        opacity: 1
    }

    60% {
        opacity: 0
    }
}

@keyframes fusion-ring {
    0% {
        transform: scale(0);
        opacity: .3
    }

    to {
        transform: scale(1.3);
        opacity: 0
    }
}

@keyframes fusion-charge {
    0% {
        transform: scale(1.8);
        opacity: 0
    }

    to {
        transform: scale(0);
        opacity: .3
    }
}

@keyframes pulse {
    0% {
        transform: scaleX(1)
    }

    50% {
        transform: scale3d(1.05,1.05,1)
    }

    to {
        transform: scaleX(1)
    }
}

@keyframes element-highlight-click {
    0% {
        transform: scale(1.4);
        opacity: 1
    }

    to {
        transform: scale(1.8);
        opacity: 0
    }
}

@keyframes materialize-core-in {
    0% {
        transform: scale(1);
        opacity: .001
    }

    1% {
        transform: scale(0);
        opacity: 1
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes materialize-core-2-in {
    0% {
        transform: scale(1);
        opacity: .001
    }

    1% {
        transform: scale(0);
        opacity: 1
    }

    to {
        transform: scale(1.2);
        opacity: 1
    }
}

@keyframes materialize-core-out {
    0% {
        transform: scale(1.2);
        opacity: 1
    }

    to {
        transform: scale(0);
        opacity: 0
    }
}

@keyframes materialize-core-2-out {
    0% {
        transform: scale(1.2);
        opacity: 1
    }

    to {
        transform: scale(0);
        opacity: 0
    }
}

@keyframes dematerialize-core-in {
    0% {
        transform: scale(0);
        opacity: 1
    }

    to {
        transform: scale(1.4);
        opacity: 1
    }
}

@keyframes dematerialize-core-out {
    0% {
        opacity: 1;
        transform: scale(1.4)
    }

    to {
        opacity: 0;
        transform: scale(1.8)
    }
}

@keyframes dematerialize-ring-opacity {
    0% {
        opacity: 0
    }

    30% {
        opacity: .5
    }

    to {
        opacity: 0
    }
}

@keyframes dematerialize-ring-scale {
    0% {
        transform: scale(0)
    }

    to {
        transform: scale(1.6)
    }
}

@keyframes final-item-ring-opacity {
    0% {
        opacity: 0
    }

    2% {
        opacity: .5
    }

    10% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

@keyframes final-item-ring-scale {
    0% {
        transform: scale(0)
    }

    10% {
        transform: scale(1.7)
    }

    to {
        transform: scale(1.7)
    }
}

@keyframes exhausted-library-item-opacity {
    0% {
        opacity: .1
    }

    30% {
        opacity: .5
    }

    40% {
        opacity: .5
    }

    70% {
        opacity: .1
    }

    to {
        opacity: .1
    }
}

@media only screen and (max-width: 499px) {
    .already-made-container.js-active .already-made-1-1 {
        transform:scale(1) translateY(-48px)
    }
}

@media only screen and (max-height: 499px) {
    .already-made-container.js-active .already-made-1-1 {
        transform:scale(1) translateY(-48px)
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .already-made-container.js-active .already-made-1-1 {
        transform:scale(1) translateY(-62px)
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .already-made-container.js-active .already-made-1-1 {
        transform:scale(1) translateY(-83px)
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .already-made-container.js-active .already-made-1-1 {
        transform:scale(1) translateY(-108px)
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .already-made-container.js-active .already-made-1-1 {
        transform:scale(1) translateY(-142px)
    }
}

@media only screen and (max-width: 499px) {
    .already-made-container.js-active .already-made-2-1 {
        transform:scale(1) translate(28px,-40px)
    }
}

@media only screen and (max-height: 499px) {
    .already-made-container.js-active .already-made-2-1 {
        transform:scale(1) translate(28px,-40px)
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .already-made-container.js-active .already-made-2-1 {
        transform:scale(1) translate(35px,-51px)
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .already-made-container.js-active .already-made-2-1 {
        transform:scale(1) translate(48px,-68px)
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .already-made-container.js-active .already-made-2-1 {
        transform:scale(1) translate(62px,-89px)
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .already-made-container.js-active .already-made-2-1 {
        transform:scale(1) translate(81px,-116px)
    }
}

@media only screen and (max-width: 499px) {
    .already-made-container.js-active .already-made-2-2 {
        transform:scale(1) translate(-28px,-40px)
    }
}

@media only screen and (max-height: 499px) {
    .already-made-container.js-active .already-made-2-2 {
        transform:scale(1) translate(-28px,-40px)
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .already-made-container.js-active .already-made-2-2 {
        transform:scale(1) translate(-35px,-51px)
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .already-made-container.js-active .already-made-2-2 {
        transform:scale(1) translate(-48px,-68px)
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .already-made-container.js-active .already-made-2-2 {
        transform:scale(1) translate(-62px,-89px)
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .already-made-container.js-active .already-made-2-2 {
        transform:scale(1) translate(-81px,-116px)
    }
}

@media only screen and (max-width: 499px) {
    .already-made-container.js-active .already-made-3-1 {
        transform:scale(1) translate(35px,-33px)
    }
}

@media only screen and (max-height: 499px) {
    .already-made-container.js-active .already-made-3-1 {
        transform:scale(1) translate(35px,-33px)
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .already-made-container.js-active .already-made-3-1 {
        transform:scale(1) translate(45px,-42px)
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .already-made-container.js-active .already-made-3-1 {
        transform:scale(1) translate(61px,-57px)
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .already-made-container.js-active .already-made-3-1 {
        transform:scale(1) translate(79px,-74px)
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .already-made-container.js-active .already-made-3-1 {
        transform:scale(1) translate(103px,-97px)
    }
}

@media only screen and (max-width: 499px) {
    .already-made-container.js-active .already-made-3-2 {
        transform:scale(1) translateY(-48px)
    }
}

@media only screen and (max-height: 499px) {
    .already-made-container.js-active .already-made-3-2 {
        transform:scale(1) translateY(-48px)
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .already-made-container.js-active .already-made-3-2 {
        transform:scale(1) translateY(-62px)
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .already-made-container.js-active .already-made-3-2 {
        transform:scale(1) translateY(-83px)
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .already-made-container.js-active .already-made-3-2 {
        transform:scale(1) translateY(-108px)
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .already-made-container.js-active .already-made-3-2 {
        transform:scale(1) translateY(-142px)
    }
}

@media only screen and (max-width: 499px) {
    .already-made-container.js-active .already-made-3-3 {
        transform:scale(1) translate(-35px,-33px)
    }
}

@media only screen and (max-height: 499px) {
    .already-made-container.js-active .already-made-3-3 {
        transform:scale(1) translate(-35px,-33px)
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .already-made-container.js-active .already-made-3-3 {
        transform:scale(1) translate(-45px,-42px)
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .already-made-container.js-active .already-made-3-3 {
        transform:scale(1) translate(-61px,-57px)
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .already-made-container.js-active .already-made-3-3 {
        transform:scale(1) translate(-79px,-74px)
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .already-made-container.js-active .already-made-3-3 {
        transform:scale(1) translate(-103px,-97px)
    }
}

@media only screen and (max-width: 499px) {
    .already-made-container.js-active .already-made-4-1 {
        transform:scale(1) translate(38px,-29px)
    }
}

@media only screen and (max-height: 499px) {
    .already-made-container.js-active .already-made-4-1 {
        transform:scale(1) translate(38px,-29px)
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .already-made-container.js-active .already-made-4-1 {
        transform:scale(1) translate(49px,-38px)
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .already-made-container.js-active .already-made-4-1 {
        transform:scale(1) translate(66px,-51px)
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .already-made-container.js-active .already-made-4-1 {
        transform:scale(1) translate(86px,-66px)
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .already-made-container.js-active .already-made-4-1 {
        transform:scale(1) translate(112px,-86px)
    }
}

@media only screen and (max-width: 499px) {
    .already-made-container.js-active .already-made-4-2 {
        transform:scale(1) translate(15px,-46px)
    }
}

@media only screen and (max-height: 499px) {
    .already-made-container.js-active .already-made-4-2 {
        transform:scale(1) translate(15px,-46px)
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .already-made-container.js-active .already-made-4-2 {
        transform:scale(1) translate(19px,-59px)
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .already-made-container.js-active .already-made-4-2 {
        transform:scale(1) translate(25px,-79px)
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .already-made-container.js-active .already-made-4-2 {
        transform:scale(1) translate(33px,-103px)
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .already-made-container.js-active .already-made-4-2 {
        transform:scale(1) translate(43px,-135px)
    }
}

@media only screen and (max-width: 499px) {
    .already-made-container.js-active .already-made-4-3 {
        transform:scale(1) translate(-15px,-46px)
    }
}

@media only screen and (max-height: 499px) {
    .already-made-container.js-active .already-made-4-3 {
        transform:scale(1) translate(-15px,-46px)
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .already-made-container.js-active .already-made-4-3 {
        transform:scale(1) translate(-19px,-59px)
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .already-made-container.js-active .already-made-4-3 {
        transform:scale(1) translate(-25px,-79px)
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .already-made-container.js-active .already-made-4-3 {
        transform:scale(1) translate(-33px,-103px)
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .already-made-container.js-active .already-made-4-3 {
        transform:scale(1) translate(-43px,-135px)
    }
}

@media only screen and (max-width: 499px) {
    .already-made-container.js-active .already-made-4-4 {
        transform:scale(1) translate(-38px,-29px)
    }
}

@media only screen and (max-height: 499px) {
    .already-made-container.js-active .already-made-4-4 {
        transform:scale(1) translate(-38px,-29px)
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .already-made-container.js-active .already-made-4-4 {
        transform:scale(1) translate(-49px,-38px)
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .already-made-container.js-active .already-made-4-4 {
        transform:scale(1) translate(-66px,-51px)
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .already-made-container.js-active .already-made-4-4 {
        transform:scale(1) translate(-86px,-66px)
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .already-made-container.js-active .already-made-4-4 {
        transform:scale(1) translate(-112px,-86px)
    }
}

.audio-controls-container .audio-controls-switch label .switch-button,.btn,.modal .popup .close,.popup-button,.settings .popup-button,.switch label .switch-button,.text-tutorials-container .text-tutorials .close {
    box-sizing: border-box;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent
}

.audio-controls-container .audio-controls-switch label .switch-button:before,.btn:before,.modal .popup .close:before,.popup-button:before,.settings .popup-button:before,.switch label .switch-button:before,.text-tutorials-container .text-tutorials .close:before {
    content: "";
    width: 100%;
    height: calc(100% - 6px);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    border-radius: 8px;
    background-color: #694f9b
}

.audio-controls-container .audio-controls-switch label .switch-button:after,.btn:after,.modal .popup .close:after,.popup-button:after,.settings .popup-button:after,.switch label .switch-button:after,.text-tutorials-container .text-tutorials .close:after {
    content: "";
    width: 100%;
    height: calc(100% - 6px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
    border-radius: 7px;
    background-color: #927de4;
    transition: transform .04s ease-out .2s,background 0s .2s
}

.audio-controls-container .audio-controls-switch label .switch-button .label,.btn .label,.modal .popup .close .label,.popup-button .label,.switch label .switch-button .label,.text-tutorials-container .text-tutorials .close .label {
    height: calc(100% - 6px);
    display: flex;
    align-items: center;
    margin-top: -6px;
    position: relative;
    z-index: 300;
    font-weight: 600;
    font-size: 15px;
    color: #fffbe9;
    text-transform: uppercase;
    transition: transform .04s ease-out .2s;
    will-change: transform
}

.audio-controls-container .audio-controls-switch:active label .switch-button:after,.audio-controls-container .audio-controls-switch label .switch-button:active:after,.btn:active:after,.modal .popup .close:active:after,.popup-button:active:after,.switch:active label .switch-button:after,.switch label .switch-button:active:after,.text-tutorials-container .text-tutorials .close:active:after {
    transform: translateY(3px);
    background-color: #6c619a;
    border-radius: 8px;
    transition: transform 0s,background 0s .01s
}

.audio-controls-container .audio-controls-switch:active label .switch-button .label,.audio-controls-container .audio-controls-switch label .switch-button:active .label,.btn:active .label,.modal .popup .close:active .label,.popup-button:active .label,.switch:active label .switch-button .label,.switch label .switch-button:active .label,.text-tutorials-container .text-tutorials .close:active .label {
    transform: translateY(3px);
    color: #fffbe8;
    transition: transform 0s,background 0s .01s
}

.audio-controls-container .audio-controls-switch[disabled] label .switch-button,.audio-controls-container .audio-controls-switch label .switch-button[disabled],.btn[disabled],.modal .popup .close[disabled],.popup-button.js-disabled,.popup-button[disabled],.settings .popup-button.js-disabled,.switch[disabled] label .switch-button,.switch label .switch-button[disabled],.text-tutorials-container .text-tutorials .close[disabled] {
    cursor: default
}

.audio-controls-container .audio-controls-switch[disabled] label .switch-button:before,.audio-controls-container .audio-controls-switch label .switch-button[disabled]:before,.btn[disabled]:before,.modal .popup .close[disabled]:before,.popup-button.js-disabled:before,.popup-button[disabled]:before,.settings .popup-button.js-disabled:before,.switch[disabled] label .switch-button:before,.switch label .switch-button[disabled]:before,.text-tutorials-container .text-tutorials .close[disabled]:before {
    background-color: #999
}

.audio-controls-container .audio-controls-switch[disabled] label .switch-button:after,.audio-controls-container .audio-controls-switch label .switch-button[disabled]:after,.btn[disabled]:after,.modal .popup .close[disabled]:after,.popup-button.js-disabled:after,.popup-button[disabled]:after,.settings .popup-button.js-disabled:after,.switch[disabled] label .switch-button:after,.switch label .switch-button[disabled]:after,.text-tutorials-container .text-tutorials .close[disabled]:after {
    background-color: #ddd;
    transition: transform 0s,background 0s 0s
}

.audio-controls-container .audio-controls-switch[disabled] label .switch-button .label,.audio-controls-container .audio-controls-switch label .switch-button[disabled] .label,.btn[disabled] .label,.modal .popup .close[disabled] .label,.popup-button.js-disabled .label,.popup-button[disabled] .label,.switch[disabled] label .switch-button .label,.switch label .switch-button[disabled] .label,.text-tutorials-container .text-tutorials .close[disabled] .label {
    transition: transform 0s,background 0s 0s
}

.audio-controls-container .audio-controls-switch:active label .switch-button[disabled]:after,.audio-controls-container .audio-controls-switch[disabled]:active label .switch-button:after,.audio-controls-container .audio-controls-switch[disabled] label .switch-button:active:after,.audio-controls-container .audio-controls-switch label .switch-button[disabled]:active:after,.btn[disabled]:active:after,.modal .popup .close[disabled]:active:after,.popup-button.js-disabled:active:after,.popup-button[disabled]:active:after,.switch:active label .switch-button[disabled]:after,.switch[disabled]:active label .switch-button:after,.switch[disabled] label .switch-button:active:after,.switch label .switch-button[disabled]:active:after,.text-tutorials-container .text-tutorials .close[disabled]:active:after {
    transform: translatey(0);
    background-color: #ddd;
    transition: transform 0s,background 0s 0s
}

.audio-controls-container .audio-controls-switch:active label .switch-button[disabled] .label,.audio-controls-container .audio-controls-switch[disabled]:active label .switch-button .label,.audio-controls-container .audio-controls-switch[disabled] label .switch-button:active .label,.audio-controls-container .audio-controls-switch label .switch-button[disabled]:active .label,.btn[disabled]:active .label,.modal .popup .close[disabled]:active .label,.popup-button.js-disabled:active .label,.popup-button[disabled]:active .label,.switch:active label .switch-button[disabled] .label,.switch[disabled]:active label .switch-button .label,.switch[disabled] label .switch-button:active .label,.switch label .switch-button[disabled]:active .label,.text-tutorials-container .text-tutorials .close[disabled]:active .label {
    transform: translatey(0);
    transition: transform 0s,background 0s 0s
}

.audio-controls-container .audio-controls-switch label .border.switch-button,.border.popup-button,.btn.border,.modal .popup .border.close,.switch label .border.switch-button,.text-tutorials-container .text-tutorials .border.close {
    background: #1b001c;
    border: 2px solid #1b001c;
    border-radius: 9px
}

.audio-controls-container .audio-controls-switch input[type=checkbox],.switch input[type=checkbox] {
    display: none
}

.audio-controls-container .audio-controls-switch label,.switch label {
    display: flex;
    align-items: center;
    cursor: pointer
}

.audio-controls-container .audio-controls-switch label .switch-button,.switch label .switch-button {
    flex-shrink: 0;
    flex-grow: 0
}

.audio-controls-container .audio-controls-switch label .switch-label,.switch label .switch-label {
    color: #4d4131;
    font-weight: 600;
    margin-top: -6px;
    margin-left: 10px;
    font-size: 15px;
    text-transform: uppercase
}

.audio-controls-container .audio-controls-switch:active label,.switch:active label {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent
}

.audio-controls-container .audio-controls-switch[disabled] label,.switch[disabled] label {
    cursor: default
}

.flip-switch input[type=checkbox] {
    display: none
}

.flip-switch input[type=checkbox]:checked+label:before {
    opacity: 0
}

.flip-switch input[type=checkbox]:checked+label:after {
    transform: translateX(22px)
}

.flip-switch label {
    width: 46px;
    height: 18px;
    display: block;
    position: relative;
    cursor: pointer;
    background: #927de4;
    border-radius: 9px;
    box-shadow: inset 0 0 0 1px rgba(105,79,155,.4)
}

.flip-switch label:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background: #ddd;
    border-radius: 9px;
    transition: opacity .1s ease;
    box-shadow: inset 0 0 0 1px hsla(0,0%,60%,.4)
}

.flip-switch label:after {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #694f9b;
    position: absolute;
    left: 0;
    margin: -3px 0 -3px;
    transition: transform .1s ease
}

.visible {
    display: block
}

.hidden {
    display: none
}

body,html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden
}

body {
    position: fixed;
    font-family: Source Sans Pro,Arial,sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #d79f47;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    background-color: #260026
}

img {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent
}

.game {
    position: absolute;
    top: 0;
    left: 0
}

.game,.workspace {
    width: 100%;
    height: 100%
}

.workspace {
    overflow: hidden;
    background-color: #260026;
    box-sizing: border-box
}

.side {
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 990;
    background: #380028;
    transition: width .08s linear
}

@media only screen and (max-width: 499px) {
    .side {
        width:140px
    }
}

@media only screen and (min-width: 500px) {
    .side {
        width:200px
    }
}

@media only screen and (min-width: 750px) {
    .side {
        width:240px
    }
}

@media only screen and (min-width: 1000px) {
    .side {
        width:280px
    }
}

@media only screen and (min-width: 1200px) {
    .side {
        width:340px
    }
}

.side:before {
    content: "";
    width: 5px;
    height: 100%;
    position: absolute;
    background: #1b001c;
    margin-left: -5px;
    pointer-events: none
}

.outer-library {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.outer-library:after {
    height: calc(100% + 1px)
}

.library {
    min-height: 100%
}

.flex-row {
    display: flex;
    flex-direction: row
}

.flex-justify-content-center {
    justify-content: center
}

.text-center {
    text-align: center
}

.bold {
    font-weight: 700
}

.tight {
    letter-spacing: -.03em
}

.encyclopedia.any .popup {
    display: block;
    border-color: #faa620
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .encyclopedia.any .popup {
        width:100%;
        height: 100%
    }
}

.encyclopedia.any .popup .close.border {
    background-color: #faa620;
    border-color: #faa620
}

@media only screen and (max-height: 369px) {
    .encyclopedia.any .popup .close.border {
        display:none
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .encyclopedia.any .popup .close.border {
        display:none
    }
}

.encyclopedia.any .popup .popup-header {
    background-color: #faa620
}

@media only screen and (max-height: 369px) {
    .encyclopedia.any .popup .popup-header {
        display:none
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .encyclopedia.any .popup .popup-header {
        display:none
    }
}

.encyclopedia.any .popup .encyclopedia-container {
    width: 100%;
    height: 100%;
    height: calc(100% - 60px);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    position: relative
}

@media only screen and (max-height: 369px) {
    .encyclopedia.any .popup .encyclopedia-container {
        height:100%;
        border-radius: 0
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .encyclopedia.any .popup .encyclopedia-container {
        height:100%;
        border-radius: 0
    }
}

@media only screen and (max-width: 499px) {
    .encyclopedia.any .popup .encyclopedia-container {
        border-radius:0
    }
}

@media only screen and (max-height: 499px) {
    .encyclopedia.any .popup .encyclopedia-container {
        border-radius:0
    }
}

.encyclopedia.any .popup .encyclopedia-container iframe.encyclopedia {
    width: 100%;
    height: 100%;
    border: 0
}

.encyclopedia.any.js-hide .popup iframe.encyclopedia {
    transition: height 0s linear .2s;
    height: 0
}

.dematerialize {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transform: translate(-16.66666%,-16.66666%)
}

@media only screen and (max-width: 499px) {
    .dematerialize {
        width:87px;
        height: 87px
    }
}

@media only screen and (max-height: 499px) {
    .dematerialize {
        width:87px;
        height: 87px
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .dematerialize {
        width:111px;
        height: 111px
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .dematerialize {
        width:150px;
        height: 150px
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .dematerialize {
        width:195px;
        height: 195px
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .dematerialize {
        width:255px;
        height: 255px
    }
}

.dematerialize .core,.dematerialize .ring1,.dematerialize .ring2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    box-sizing: border-box;
    will-change: transform;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}

.dematerialize .core {
    background-color: #380028;
    animation-duration: .5s,.14s;
    animation-delay: .7s,1.5s;
    animation-timing-function: ease,linear;
    opacity: .001
}

.dematerialize .ring1,.dematerialize .ring2 {
    border-style: solid;
    border-color: #d79f47;
    opacity: 0
}

.dematerialize .ring1 {
    border-width: 20px;
    animation-duration: .7s,.6s;
    animation-delay: .2s,.2s;
    animation-timing-function: ease-in,linear
}

.dematerialize .ring2 {
    border-width: 5px;
    animation-duration: .4s,.3s;
    animation-delay: .2s,.2s;
    animation-timing-function: ease-out,linear
}

.dematerialize.js-active {
    opacity: 1;
    animation-name: dematerialize-timer;
    animation-duration: 1.5s;
    animation-delay: .2s
}

.dematerialize.js-active .core {
    animation-name: dematerialize-core-in,dematerialize-core-out
}

.dematerialize.js-active .ring1,.dematerialize.js-active .ring2 {
    animation-name: dematerialize-ring-scale,dematerialize-ring-opacity
}

.materialize-container {
    width: 0;
    height: 0;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none
}

.materialize-container .materialize {
    width: 70px;
    height: 70px;
    position: absolute;
    transform: translate(-50%,-50%);
    opacity: 0;
    z-index: 20
}

.materialize-container .materialize .core,.materialize-container .materialize .core2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    box-sizing: border-box;
    will-change: transform;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity: .001
}

.materialize-container .materialize .core {
    background-color: #260026;
    animation-duration: .1s,.01s,.2s;
    animation-delay: 0s,.3s,.6s;
    animation-timing-function: ease-out,linear,linear
}

.materialize-container .materialize .core2 {
    background-color: #380028;
    animation-duration: .2s,.2s;
    animation-delay: .1s,.4s;
    animation-timing-function: ease-out,ease
}

.materialize-container .materialize.js-active {
    opacity: 1
}

.materialize-container .materialize.js-active .core {
    animation-name: materialize-core-in,materialize-core-2-in,materialize-core-out
}

.materialize-container .materialize.js-active .core2 {
    animation-name: materialize-core-2-in,materialize-core-2-out
}

.workspace .element.js-final {
    z-index: 105
}

.workspace .element.js-final:before {
    transform: scale(1.4)
}

.workspace .element.js-final:after {
    content: "";
    width: 100%;
    height: 100%;
    border: 5px solid #d79f47;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border-radius: 50%;
    z-index: -10;
    opacity: 0;
    animation-name: final-item-ring-opacity,final-item-ring-scale;
    animation-duration: 8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: 2s
}

.library .element.js-exhausted img,.workspace .element.js-final img {
    animation-name: breathe;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease
}

.library .element.js-exhausted:before {
    transform: scaley(1);
    z-index: -20;
    opacity: .4;
    animation-name: exhausted-library-item-opacity;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite
}

.library .element.js-exhausted:after {
    content: "";
    position: absolute;
    border: 5px solid #d79f47;
    transform: scale(1.4);
    border-radius: 50%;
    box-sizing: border-box;
    animation-name: final-item-ring-opacity,final-item-ring-scale;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index: -10;
    opacity: 0
}

@media only screen and (max-width: 499px) {
    .library .element.js-exhausted:after {
        left:4px
    }
}

@media only screen and (min-width: 500px) {
    .library .element.js-exhausted:after {
        left:8px
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .library .element.js-exhausted:after {
        left:12px
    }
}

@media only screen and (max-width: 499px) {
    .library .element.js-exhausted:after {
        width:58px;
        height: 58px
    }
}

@media only screen and (max-height: 499px) {
    .library .element.js-exhausted:after {
        width:58px;
        height: 58px
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .library .element.js-exhausted:after {
        width:64px;
        height: 64px
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .library .element.js-exhausted:after {
        width:72px;
        height: 72px
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .library .element.js-exhausted:after {
        width:80px;
        height: 80px
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .library .element.js-exhausted:after {
        width:90px;
        height: 90px
    }
}

@keyframes dematerialize-timer {
    0% {
        outline: 0
    }

    to {
        outline: 0
    }
}

.fusion {
    width: 192px;
    height: 192px;
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    will-change: transform
}

@media only screen and (min-width: 700px) {
    .fusion {
        width:320px;
        height: 320px
    }
}

@media only screen and (max-width: 320px) {
    .fusion {
        width:137px;
        height: 137px
    }
}

.fusion .fusion-charge-ring,.fusion .fusion-core-dark,.fusion .fusion-core-light,.fusion .fusion-core-ring {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50%;
    box-sizing: border-box;
    will-change: transform
}

.fusion .fusion-core-dark {
    background-color: #260026
}

.fusion .fusion-core-light {
    background-color: #380028
}

.fusion .fusion-charge-ring,.fusion .fusion-core-ring {
    border-color: #d79f47;
    border-style: solid;
    border-width: 10px
}

.fusion.js-active {
    opacity: 1
}

.fusion.js-active .fusion-core-dark {
    animation-name: fusion-core,fusion-core-come-back,fusion-core-out;
    animation-delay: .2s,.5s,1.1s;
    animation-duration: .3s,.16s,.3s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.08,.57,.58,.99),cubic-bezier(0,0,.24,.98),ease;
    animation-fill-mode: forwards;
    opacity: .001
}

.fusion.js-active .fusion-core-light {
    animation-name: fusion-secondary,fusion-secondary-opacity;
    animation-delay: .5s,.5s;
    animation-duration: .8s,.6s;
    animation-iteration-count: 1;
    animation-timing-function: ease,linear;
    animation-fill-mode: forwards;
    opacity: .001
}

.fusion.js-active .fusion-core-ring {
    animation-name: fusion-ring;
    animation-delay: .4s;
    animation-duration: .3s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0,0,.24,.98);
    animation-fill-mode: forwards;
    opacity: .001
}

.fusion.js-active .fusion-charge-ring {
    animation-name: fusion-charge;
    animation-delay: .1s;
    animation-duration: .8s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0,0,.24,.98);
    animation-fill-mode: forwards;
    opacity: 0
}

svg {
    fill: #000
}

.svg-b,.svg-n {
    stroke: #000;
    stroke-width: 3px
}

.svg-n {
    fill: none
}

.svg-b,.svg-w {
    fill: #fff
}

.svg-m {
    stroke-miterlimit: 10
}

.svg-c {
    stroke-linecap: round
}

.svg-j {
    stroke-linejoin: round
}

svg {
    overflow: visible!important;
    cursor: pointer
}

.menu-button.js-in #icon-clear g {
    transform-origin: center center;
    animation: icClearBroom .25s linear forwards,icClearBroomBack .16667s .25s linear forwards
}

.menu-button.js-in #icon-clear circle {
    animation: icClearBall .25s linear forwards,icClearBallBack .16667s .25s linear forwards
}

@keyframes icClearBall {
    20% {
        transform: translateX(0)
    }

    30% {
        transform: translateX(10px)
    }

    80% {
        transform: translateX(10px);
        opacity: 1
    }

    to {
        transform: translateX(20px);
        opacity: 0
    }
}

@keyframes icClearBallBack {
    0% {
        transform: translateX(20px);
        opacity: 0
    }

    20% {
        transform: translateX(0)
    }

    90% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes icClearBroom {
    20% {
        transform: rotate(-30deg)
    }

    30% {
        transform: rotate(-40deg)
    }

    50% {
        transform: rotate(-30deg) translate(5px,5px)
    }

    to {
        transform: rotate(-40deg) translate(5px,5px)
    }
}

@keyframes icClearBroomBack {
    0% {
        transform: rotate(-40deg) translate(5px,5px)
    }

    to {
        transform: rotate(0deg) translate(0)
    }
}

#icon-encyclopedia .lines {
    position: relative
}

#icon-encyclopedia .lines path {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .125s linear
}

#icon-encyclopedia .bookmark {
    transition-delay: 0s;
    transform: translateY(-20px);
    transition: transform .16667s ease-in-out
}

.menu-button.js-in #icon-encyclopedia .lines path:first-of-type {
    transform: scaleX(1);
    transition-delay: .05s
}

.menu-button.js-in #icon-encyclopedia .lines path:nth-of-type(2) {
    transform: scaleX(1);
    transition-delay: .1s
}

.menu-button.js-in #icon-encyclopedia .lines path:nth-of-type(3) {
    transform: scaleX(1);
    transition-delay: .15s
}

.menu-button.js-in #icon-encyclopedia .lines path:nth-of-type(4) {
    transform: scaleX(1);
    transition-delay: .2s
}

.menu-button.js-in #icon-encyclopedia .lines path:nth-of-type(5) {
    transform: scaleX(1);
    transition-delay: .25s
}

.menu-button.js-in #icon-encyclopedia .lines path:nth-of-type(6) {
    transform: scaleX(1);
    transition-delay: .3s
}

.menu-button.js-in #icon-encyclopedia .lines path:nth-of-type(7) {
    transform: scaleX(1);
    transition-delay: .35s
}

.menu-button.js-in #icon-encyclopedia .lines path:nth-of-type(8) {
    transform: scaleX(1);
    transition-delay: .4s
}

.menu-button.js-in #icon-encyclopedia .bookmark {
    transform: translateY(0);
    transition-delay: .25s
}

#icon-hints .line-t {
    transform-origin: center top;
    transform: translateY(15px)
}

#icon-hints .line-lt {
    transform-origin: left top;
    transform: translate(15px,15px)
}

#icon-hints .line-rt {
    transform-origin: right top;
    transform: translate(-15px,15px)
}

#icon-hints .line-lb {
    transform-origin: left bottom;
    transform: translate(15px,-15px)
}

#icon-hints .line-rb {
    transform-origin: right bottom;
    transform: translate(-15px,-15px)
}

#icon-hints .line-l {
    transform-origin: left center;
    transform: translate(15px)
}

#icon-hints .line-r {
    transform-origin: right center;
    transform: translate(-15px)
}

#icon-hints .svg-b {
    stroke-width: 1px
}

.menu-button.js-in #icon-hints .lines path {
    animation: .5s linear forwards
}

.menu-button.js-in #icon-hints .lines .line-t {
    animation-name: icHintsLineTop
}

.menu-button.js-in #icon-hints .lines .line-lt {
    animation-name: icHintsLineLeftTop
}

.menu-button.js-in #icon-hints .lines .line-rt {
    animation-name: icHintsLineRightTop
}

.menu-button.js-in #icon-hints .lines .line-lb {
    animation-name: icHintsLineLeftBottom
}

.menu-button.js-in #icon-hints .lines .line-rb {
    animation-name: icHintsLineRightBottom
}

.menu-button.js-in #icon-hints .lines .line-l {
    animation-name: icHintsLineLeft
}

.menu-button.js-in #icon-hints .lines .line-r {
    animation-name: icHintsLineRight
}

@keyframes icHintsLineTop {
    65% {
        transform: translate(0)
    }

    to {
        transform: translate(0)
    }
}

@keyframes icHintsLineLeftTop {
    65% {
        transform: translate(0)
    }

    to {
        transform: translate(0)
    }
}

@keyframes icHintsLineRightTop {
    65% {
        transform: translate(0)
    }

    to {
        transform: translate(0)
    }
}

@keyframes icHintsLineLeftBottom {
    65% {
        transform: translate(0)
    }

    to {
        transform: translate(0)
    }
}

@keyframes icHintsLineRightBottom {
    65% {
        transform: translate(0)
    }

    to {
        transform: translate(0)
    }
}

@keyframes icHintsLineLeft {
    65% {
        transform: translate(0)
    }

    to {
        transform: translate(0)
    }
}

@keyframes icHintsLineRight {
    65% {
        transform: translate(0)
    }

    to {
        transform: translate(0)
    }
}

.menu-button.js-in #icon-revert path:first-child {
    stroke-dasharray: 103;
    animation: .25s revertDashOffsetZero-Line linear forwards
}

.menu-button.js-in #icon-revert path:nth-child(2),.menu-button.js-in #icon-revert path:nth-child(3) {
    stroke-dasharray: 17;
    stroke-dashoffset: 17;
    animation: .125s .25s revertDashOffsetZero-Arrow linear forwards
}

@keyframes revertDashOffsetZero-Line {
    0% {
        stroke-dashoffset: 103
    }

    to {
        stroke-dashoffset: 0
    }
}

@keyframes revertDashOffsetZero-Arrow {
    0% {
        stroke-dashoffset: 17
    }

    to {
        stroke-dashoffset: 0
    }
}

#icon-search {
    transform-origin: center center;
    transition: transform .25s ease-in-out
}

#icon-search.js-in {
    transform: scale(1.2) rotate(-40deg)
}

#icon-settings ellipse {
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-direction: normal;
    animation-timing-function: linear
}

.menu-button.js-in #icon-settings ellipse:first-of-type {
    animation-name: icMenuCircleTopIn;
    animation-duration: .5s
}

.menu-button.js-in #icon-settings ellipse:nth-of-type(2) {
    animation-name: icMenuCircleMiddleIn;
    animation-duration: .5s
}

.menu-button.js-in #icon-settings ellipse:nth-of-type(3) {
    animation-name: icMenuCircleBottomIn;
    animation-duration: .5s
}

.menu-button #icon-settings ellipse:first-of-type,.menu-button.js-out #icon-settings ellipse:first-of-type {
    animation-name: icMenuCircleTopOut;
    animation-duration: .25s
}

.menu-button #icon-settings ellipse:nth-of-type(2),.menu-button.js-out #icon-settings ellipse:nth-of-type(2) {
    animation-name: icMenuCircleMiddleOut;
    animation-duration: .25s
}

.menu-button #icon-settings ellipse:nth-of-type(3),.menu-button.js-out #icon-settings ellipse:nth-of-type(3) {
    animation-name: icMenuCircleBottomOut;
    animation-duration: .25s
}

@keyframes icMenuCircleTopIn {
    0% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(20px)
    }

    50% {
        transform: translateX(20px)
    }

    to {
        transform: translateX(40px)
    }
}

@keyframes icMenuCircleMiddleIn {
    0% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(20px)
    }

    50% {
        transform: translateX(20px)
    }

    to {
        transform: translateX(0)
    }
}

@keyframes icMenuCircleBottomIn {
    0% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(-20px)
    }

    50% {
        transform: translateX(-20px)
    }

    to {
        transform: translateX(-40px)
    }
}

@keyframes icMenuCircleTopOut {
    0% {
        transform: translateX(40px)
    }

    to {
        transform: translateX(0)
    }
}

@keyframes icMenuCircleMiddleOut {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(0)
    }
}

@keyframes icMenuCircleBottomOut {
    0% {
        transform: translateX(-40px)
    }

    to {
        transform: translateX(0)
    }
}

#icon-store [class^=tile-] {
    animation-duration: .25s;
    animation-timing-function: ease;
    transform-origin: center top
}

.menu-button.js-in #icon-store .tile-1 {
    animation-delay: .11s;
    animation-name: storeTileScaleUp
}

.menu-button.js-in #icon-store .tile-2 {
    animation-delay: .16s;
    animation-name: storeTileScaleUp;
    animation-duration: .3s
}

.menu-button.js-in #icon-store .tile-3 {
    animation-delay: .21s;
    animation-name: storeTileScaleUp;
    animation-duration: .35s
}

.menu-button.js-in #icon-store .tile-4 {
    animation-delay: .26s;
    animation-name: storeTileScaleUp;
    animation-duration: .4s
}

.menu-button.js-in #icon-store .tile-5 {
    animation-delay: .31s;
    animation-name: storeTileScaleUp;
    animation-duration: .45s
}

@keyframes storeTileScaleUp {
    0% {
        transform: scaley(1)
    }

    50% {
        transform: scaley(1.2)
    }

    to {
        transform: scaley(1)
    }
}

.js-frozen .element,.js-frozen .element img {
    pointer-events: none
}

.library .element {
    width: 100%;
    position: relative;
    clear: both;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: opacity .3s ease 1s;
    position: absolute;
    top: 0;
    contain: layout;
    will-change: transform
}

.library .element img {
    display: block;
    float: left;
    transition: .08s linear;
    cursor: pointer
}

@media only screen and (max-width: 499px) {
    .library .element img {
        padding:0 4px
    }
}

@media only screen and (min-width: 500px) {
    .library .element img {
        padding:0 8px
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .library .element img {
        padding:0 12px 0 8px
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .library .element img {
        padding:0 16px 0 12px
    }
}

@media only screen and (max-width: 499px) {
    .library .element {
        height:62px;
        letter-spacing: -.03em
    }

    .library .element img {
        width: 58px;
        height: 58px
    }
}

@media only screen and (max-height: 499px) {
    .library .element {
        height:62px;
        letter-spacing: -.03em
    }

    .library .element img {
        width: 58px;
        height: 58px
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .library .element {
        height:70px
    }

    .library .element img {
        width: 64px;
        height: 64px
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .library .element {
        height:78px
    }

    .library .element img {
        width: 72px;
        height: 72px
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .library .element {
        height:86px
    }

    .library .element img {
        width: 80px;
        height: 80px
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .library .element {
        height:100px
    }

    .library .element img {
        width: 90px;
        height: 90px
    }
}

.library .element.js-inactive {
    pointer-events: none;
    cursor: default;
    opacity: .15;
    transition: opacity 0s ease 0s
}

.library .element:last-of-type {
    margin-bottom: 10px
}

.library .element .elementName {
    cursor: default
}

.library .element:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: #1b001c;
    transform: scaleX(0);
    transform-origin: left
}

@media only screen and (max-width: 499px) {
    .library .element:before {
        height:68px
    }
}

@media only screen and (max-height: 499px) {
    .library .element:before {
        height:68px
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .library .element:before {
        height:74px
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .library .element:before {
        height:82px
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .library .element:before {
        height:90px
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .library .element:before {
        height:100px
    }
}

.library .element.js-animate:before {
    transform: scaleY(1);
    opacity: 0;
    z-index: 10;
    animation-name: exhausted-library-item-overlay;
    animation-duration: .6s;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(.51,.12,.25,1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}

.library .element.js-animate {
    height: 0;
    overflow: hidden;
    transition: height .4s ease .6s
}

.workspace .element {
    width: 90px;
    height: 90px;
    z-index: 100;
    transition: z-index 0s linear .12s
}

.workspace .element img {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
    transition: transform .02s ease-out
}

@media only screen and (max-width: 499px) {
    .workspace .element {
        width:58px;
        height: 58px
    }
}

@media only screen and (max-height: 499px) {
    .workspace .element {
        width:58px;
        height: 58px
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .workspace .element {
        width:74px;
        height: 74px
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .workspace .element {
        width:100px;
        height: 100px
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .workspace .element {
        width:130px;
        height: 130px
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .workspace .element {
        width:170px;
        height: 170px
    }
}

.workspace .element:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -10;
    background-color: #380028;
    border-radius: 50%;
    transition: transform .14s ease .07s;
    transform: scale(0);
    pointer-events: none;
    will-change: transform
}

.workspace .element.is-dragging {
    z-index: 1000;
    transition: z-index 0s linear 0s
}

.workspace .element.is-dragging.dropped {
    z-index: 980;
    transition: z-index 0s linear .12s
}

.workspace .element.is-dragging.js-hover:before {
    animation-name: element-highlight-click;
    animation-duration: .14s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards
}

.workspace .element.is-dragging img {
    transform: scale(1.03)
}

.workspace .element.js-hover:before {
    transform: scale(1.4)
}

.workspace .element.is-dragging:before {
    transform: scale(0)
}

.workspace .element.js-pulse:before {
    transform: scale(1.4)
}

.workspace .element.js-hover,.workspace .element.js-pulse {
    z-index: 995
}

.workspace .element.js-exhausted {
    z-index: 40;
    pointer-events: none
}

.workspace .element.js-final.js-exhausted {
    pointer-events: auto
}

.workspace.js-cleanup .element {
    pointer-events: none
}

.already-made-container {
    position: absolute
}

@media only screen and (max-width: 499px) {
    .already-made-container {
        width:58px;
        height: 58px
    }
}

@media only screen and (max-height: 499px) {
    .already-made-container {
        width:58px;
        height: 58px
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .already-made-container {
        width:74px;
        height: 74px
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .already-made-container {
        width:100px;
        height: 100px
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .already-made-container {
        width:130px;
        height: 130px
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .already-made-container {
        width:170px;
        height: 170px
    }
}

.already-made-container .already-done {
    position: absolute;
    display: block;
    z-index: 1100;
    pointer-events: none;
    transition: transform 1.2s cubic-bezier(.2,.82,.32,1);
    transform: scale(.5) translate(0);
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0
}

@media only screen and (max-width: 499px) {
    .already-made-container .already-done {
        width:38.66667px;
        height: 38.66667px
    }
}

@media only screen and (max-height: 499px) {
    .already-made-container .already-done {
        width:38.66667px;
        height: 38.66667px
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .already-made-container .already-done {
        width:49.33333px;
        height: 49.33333px
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .already-made-container .already-done {
        width:66.66667px;
        height: 66.66667px
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .already-made-container .already-done {
        width:86.66667px;
        height: 86.66667px
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .already-made-container .already-done {
        width:113.33333px;
        height: 113.33333px
    }
}

.already-made-container.js-active .already-done {
    animation-name: already-doneOpacity;
    animation-duration: 1.8s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.79,.01,.45,.99)
}

.final-animation-container .element {
    width: 90px;
    height: 90px;
    z-index: 100;
    transition: z-index 0s linear .12s
}

@media only screen and (max-width: 499px) {
    .final-animation-container .element {
        width:58px;
        height: 58px
    }
}

@media only screen and (max-height: 499px) {
    .final-animation-container .element {
        width:58px;
        height: 58px
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .final-animation-container .element {
        width:74px;
        height: 74px
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .final-animation-container .element {
        width:100px;
        height: 100px
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .final-animation-container .element {
        width:130px;
        height: 130px
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .final-animation-container .element {
        width:170px;
        height: 170px
    }
}

.final-animation-container .element img {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
    transition: transform .02s ease-out
}

@keyframes exhausted-library-item-overlay {
    0% {
        transform: scalex(0);
        opacity: 1
    }

    to {
        transform: scalex(1);
        opacity: 1
    }
}

@keyframes already-doneOpacity {
    0% {
        opacity: 0
    }

    40% {
        opacity: 1
    }

    50% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.new-base-element {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-name: item-unlocked-hide;
    animation-duration: .2s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0,0,.38,1.01);
    animation-fill-mode: forwards
}

.new-base-element.js-active {
    animation-name: item-unlocked-show,breathe;
    animation-delay: 0s,.4s;
    animation-duration: .4s,4.5s;
    animation-iteration-count: 1,infinite;
    animation-timing-function: cubic-bezier(0,0,.38,1.01),linear;
    animation-fill-mode: forwards
}

.new-base-element .new-item-unlocked {
    display: inline-block;
    font-size: 50px;
    text-align: center
}

@keyframes item-unlocked-show {
    0% {
        transform: scale(.1);
        opacity: 0
    }

    65% {
        transform: scale(1.2);
        opacity: 1
    }

    to {
        transform: scale(1)
    }
}

@keyframes item-unlocked-hide {
    0% {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(0);
        opacity: 0
    }
}

.new-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12000;
    opacity: 0;
    pointer-events: none;
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent
}

.new-element .background {
    width: 1%;
    height: 1%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background-color: #260026;
    transform: scale(150);
    will-change: opacity;
    opacity: 1
}

.new-element .new-element-image-container {
    width: 200px;
    height: 200px;
    transform: scale(.1);
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    will-change: transform;
    transition: opacity .2s ease;
    opacity: 0
}

@media only screen and (max-height: 420px) {
    .new-element .new-element-image-container {
        width:100px;
        height: 100px
    }
}

.new-element .absolute-center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    height: 0
}

.new-element .description {
    max-width: 440px;
    margin: 120px auto 0 auto;
    padding: 20px 10px;
    background: rgba(38,0,38,.5);
    color: #d79f47;
    font-size: 16px;
    text-align: center;
    line-height: 1.5;
    transition: opacity .4s ease;
    opacity: 0
}

@media only screen and (max-height: 420px) {
    .new-element .description {
        margin-top:60px
    }
}

.new-element .description .dlc-marker {
    font-size: 12px;
    line-height: 1
}

.new-element .outer-name {
    will-change: transform;
    transform: scale(0);
    transition: opacity .4s linear;
    opacity: 0
}

.new-element .name {
    height: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: #d79f47;
    font-size: 50px;
    text-align: center;
    margin-top: -120px;
    will-change: transform;
    line-height: 1em;
    padding: 0 20px
}

@media only screen and (max-height: 420px) {
    .new-element .name {
        margin-top:-60px;
        font-size: 45px
    }
}

.new-element .type {
    color: #d79f47;
    font-size: 50px;
    position: absolute;
    margin-left: 10px
}

.new-element .new-element-rays-container {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-top: auto;
    margin-bottom: auto;
    transform: scale(0);
    opacity: 1
}

.new-element .new-element-image-container img {
    width: 100%;
    height: 100%;
    pointer-events: none;
    animation-name: breathe;
    animation-duration: 5.2s;
    animation-delay: .5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

.new-element .rays {
    will-change: transform;
    background-image: url(../img/concentric-light-purple.5182ce7b.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    width: 500px;
    height: 500px;
    width: 70vmax;
    height: 70vmax;
    max-width: 500px;
    max-height: 500px;
    transform: translate3d(-50%,-50%,0) scale(2)
}

.new-element.js-active {
    display: block;
    pointer-events: auto;
    opacity: 1
}

.new-element.js-active .background {
    animation-name: background-in;
    animation-duration: .3s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards
}

.new-element.js-active .new-element-image-container {
    animation-name: scale-up;
    animation-delay: .1s;
    animation-duration: .4s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0,0,.38,1.01);
    animation-fill-mode: forwards;
    transition-duration: .3s;
    transition-delay: .1s;
    opacity: 1
}

.new-element.js-active .description {
    opacity: 1;
    transition-duration: 1.5s;
    transition-delay: .2s;
    transition-timing-function: ease-out
}

.new-element.js-active .outer-name {
    animation-name: scale-up;
    animation-delay: .2s;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    transition-duration: .2s;
    transition-delay: .1s;
    opacity: 1
}

.new-element.js-active .name {
    animation-name: breathe;
    animation-duration: 4.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

.new-element.js-active .new-element-rays-container {
    transition: transform .3s ease .2s;
    transform: scale(1)
}

.new-element.js-active .rays {
    animation-name: rotate-clockwise;
    animation-duration: 34s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

.new-element.js-active.js-background-out .background {
    animation-name: background-out;
    animation-duration: .5s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards
}

.new-element.js-active.js-background-out .new-element-rays-container {
    transform: scale(0);
    opacity: 0;
    transition: transform .4s ease 0s,opacity .1s linear 0s
}

.new-element.js-active.js-background-out .new-element-image-container,.new-element.js-active.js-background-out .outer-name {
    animation-name: remove-popup-content,fade-out;
    animation-delay: 0s;
    animation-duration: .4s,.36s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in,ease;
    animation-fill-mode: forwards;
    transition-duration: 0s;
    transition-delay: .36s;
    opacity: 0
}

.new-element.js-active.js-hide-content .new-element-image-container {
    animation-name: hide-popup-content,hide-popup-content-timer;
    animation-delay: 0s;
    animation-duration: .4s,.5s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0,0,.38,1.01);
    animation-fill-mode: forwards;
    transition-duration: 0s;
    transition-delay: .4s;
    opacity: 0
}

.new-element.js-active.js-hide-content .outer-name {
    animation-name: hide-popup-content,hide-popup-content-timer;
    animation-delay: 0s;
    animation-duration: .4s,.5s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    transition-duration: 0s;
    transition-delay: .4s;
    opacity: 0
}

.new-element.js-active.js-hide-content .new-element-rays-container {
    transform: scale(0);
    opacity: 0;
    transition: transform .4s ease 0s,opacity .1s linear .1s
}

.inherit-new-item-animation-hide-description,.new-element.js-active.js-background-out .description,.new-element.js-active.js-hide-content .description {
    transition-duration: .1s;
    transition-delay: 0s;
    transition-timing-function: linear;
    opacity: 0
}

.inherit-new-item-animation-hide-rays,.new-element.js-active.js-background-out .new-element-rays-container,.new-element.js-active.js-hide-content .new-element-rays-container {
    transform: scale(0);
    opacity: 0
}

@keyframes rotate-clockwise {
    0% {
        transform: translate3d(-50%,-50%,0) rotate(0deg) scale(2)
    }

    to {
        transform: translate3d(-50%,-50%,0) rotate(1turn) scale(2)
    }
}

@keyframes rotate-clockwise-offset {
    0% {
        transform: translate3d(-50%,-50%,0) rotate(10deg) scale(2)
    }

    to {
        transform: translate3d(-50%,-50%,0) rotate(370deg) scale(2)
    }
}

@keyframes rotate-counterclockwise {
    0% {
        transform: rotate(1turn)
    }

    to {
        transform: rotate(0deg)
    }
}

@keyframes scale-up {
    0% {
        transform: scale(.1)
    }

    65% {
        transform: scale(1.2)
    }

    to {
        transform: scale(1)
    }
}

@keyframes hide-popup-content {
    0% {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(0);
        opacity: 0
    }
}

@keyframes hide-popup-content-timer {
    0% {
        outline: 0
    }

    to {
        outline: 0
    }
}

@keyframes remove-popup-content {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(18)
    }
}

@keyframes background-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes background-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes breathe {
    0% {
        transform: scale(1)
    }

    30% {
        transform: scale(1.05)
    }

    40% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }
}

.news-image {
    width: 100%;
    width: calc(100% + 40px);
    margin: -20px -20px 20px -20px
}

.news-image img {
    width: 100%;
    max-width: 540px;
    display: block;
    margin: 0 auto
}

.overlay {
    position: absolute;
    z-index: 10000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 1%;
    height: 1%;
    background: rgba(0,0,0,.5);
    transition: opacity .3s linear .1s;
    transform: scale(150);
    opacity: 0;
    pointer-events: none
}

.overlay.js-active {
    pointer-events: auto;
    opacity: 1;
    transition: opacity .2s ease-out 0s
}

.modal {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (max-width: 499px) {
    .modal.any {
        display:block
    }
}

@media only screen and (max-width: 499px) and (max-height:369px) {
    .modal.any {
        height:calc(100% - 60px)
    }
}

@media only screen and (max-width: 499px) and (max-width:599px) and (min-height:450px) {
    .modal.any {
        height:calc(100% - 60px)
    }
}

@media only screen and (max-height: 499px) {
    .modal.any {
        display:block
    }
}

@media only screen and (max-height: 499px) and (max-height:369px) {
    .modal.any {
        height:calc(100% - 60px)
    }
}

@media only screen and (max-height: 499px) and (max-width:599px) and (min-height:450px) {
    .modal.any {
        height:calc(100% - 60px)
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) and (max-height:369px) {
    .modal.any {
        height:calc(100% - 60px)
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) and (max-width:599px) and (min-height:450px) {
    .modal.any {
        height:calc(100% - 60px)
    }
}

@media only screen and (max-width: 499px) {
    .modal.any .popup {
        width:100%;
        height: 100%;
        position: absolute;
        top: 0;
        border: 0;
        border-radius: 0
    }

    .modal.any .popup .close {
        left: 4px
    }
}

@media only screen and (max-height: 499px) {
    .modal.any .popup {
        width:100%;
        height: 100%;
        position: absolute;
        top: 0;
        border: 0;
        border-radius: 0
    }

    .modal.any .popup .close {
        left: 4px
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .modal.any .popup {
        min-width:360px;
        max-width: 440px;
        max-height: 600px
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .modal.any .popup {
        max-width:500px;
        max-height: 700px
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .modal.any .popup {
        min-width:360px;
        max-width: 400px;
        max-height: 460px
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) and (max-height:369px) {
    .modal.any .popup {
        width:100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        position: absolute;
        top: 0;
        border: 0;
        border-radius: 0
    }

    .modal.any .popup .close {
        left: 4px
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) and (max-width:599px) and (min-height:450px) {
    .modal.any .popup {
        width:100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        position: absolute;
        top: 0;
        border: 0;
        border-radius: 0
    }

    .modal.any .popup .close {
        left: 4px
    }
}

@media only screen and (max-width: 499px) {
    .modal.any.js-show .popup {
        opacity:1;
        transform: translateX(0);
        transition: transform .3s ease
    }
}

@media only screen and (max-height: 499px) {
    .modal.any.js-show .popup {
        opacity:1;
        transform: translateX(0);
        transition: transform .3s ease
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .modal.any.js-show .popup {
        opacity:1;
        transform: scale(1);
        transition: transform .14s linear,opacity .1s linear
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) and (max-height:369px) {
    .modal.any.js-show .popup {
        opacity:1;
        transform: translateX(0);
        transition: transform .3s ease
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) and (max-width:599px) and (min-height:450px) {
    .modal.any.js-show .popup {
        opacity:1;
        transform: translateX(0);
        transition: transform .3s ease
    }
}

@media only screen and (max-width: 499px) {
    .modal.any.js-hide .popup {
        opacity:0;
        transform: translateX(-100%);
        transition: transform .2s ease,opacity 0s linear .4s
    }
}

@media only screen and (max-height: 499px) {
    .modal.any.js-hide .popup {
        opacity:0;
        transform: translateX(-100%);
        transition: transform .2s ease,opacity 0s linear .4s
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .modal.any.js-hide .popup {
        opacity:0;
        transform: scale(1.2);
        transition: transform .2s ease-in,opacity .14s linear;
        pointer-events: none
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) and (max-height:369px) {
    .modal.any.js-hide .popup {
        opacity:0;
        transform: translateX(-100%);
        transition: transform .2s ease,opacity 0s linear .4s
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) and (max-width:599px) and (min-height:450px) {
    .modal.any.js-hide .popup {
        opacity:0;
        transform: translateX(-100%);
        transition: transform .2s ease,opacity 0s linear .4s
    }
}

.modal.small {
    height: 100%;
    top: 0
}

@media only screen and (max-height: 369px) {
    .modal.small {
        height:calc(100% - 60px)
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .modal.small {
        height:calc(100% - 60px)
    }
}

@media only screen and (max-width: 499px) {
    .modal.small .popup {
        width:360px;
        max-width: 90%;
        max-height: 90%
    }
}

@media only screen and (max-height: 499px) {
    .modal.small .popup {
        width:360px;
        max-width: 90%;
        max-height: 90%
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .modal.small .popup {
        min-width:360px;
        max-width: 400px;
        max-height: 400px
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .modal.small .popup {
        max-width:440px;
        max-height: 600px
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .modal.small .popup {
        max-width:500px;
        max-height: 700px
    }
}

.modal.small.js-show .popup {
    opacity: 1;
    transform: scale(1);
    transition: transform .14s linear,opacity .1s linear
}

.modal.small.js-hide .popup {
    opacity: 0;
    transform: scale(1.2);
    transition: transform .2s ease-in,opacity .14s linear;
    pointer-events: none
}

.modal.js-hide {
    pointer-events: none
}

.modal .popup {
    z-index: 11000;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    font-size: 14px;
    color: #4d4131;
    background-color: #fcc46b;
    border: 2px solid #fcce84;
    border-radius: 10px;
    box-shadow: 0 16px rgba(0,0,0,.6);
    will-change: transform
}

.modal .popup .popup-header {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    margin: 0;
    padding: 20px 0;
    flex-shrink: 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 20px;
    font-weight: 700;
    background-color: #fcce84;
    border-radius: 8px 8px 0 0;
    cursor: default
}

.modal .popup .content {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.modal .popup .content input[type=email],.modal .popup .content input[type=password],.modal .popup .content input[type=text] {
    width: 100%;
    height: 58px;
    background: #fffbe9;
    color: #4d4131;
    border-radius: 8px;
    border: 0;
    padding: 18px 12px 8px 12px;
    box-sizing: border-box;
    transition: box-shadow .1s ease;
    margin-bottom: 20px
}

.modal .popup .content input[type=email]:focus,.modal .popup .content input[type=password]:focus,.modal .popup .content input[type=text]:focus {
    outline: 0;
    box-shadow: 0 6px #fbb039
}

.modal .popup .content .link {
    text-decoration: underline;
    cursor: pointer;
    color: #4d4131
}

.modal .popup .close {
    height: 50px;
    width: 50px;
    position: absolute;
    top: 6px;
    left: -10px
}

.modal .popup .close.border {
    background-color: #fcce84;
    border-color: #fcce84;
    z-index: 100
}

.modal .popup .close .label {
    width: 14px;
    height: 14px
}

.modal .popup .group {
    margin-bottom: 14px
}

.popup-button {
    height: 54px;
    min-width: 100px
}

.popup-button.full {
    width: 100%
}

.popup-button.center {
    margin: 0 auto
}

.popup-button .label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.button-group {
    width: 100%;
    margin: 7px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around
}

.button-group .popup-button {
    min-width: 140px;
    margin: 7px;
    flex-grow: 1;
    flex-shrink: 0
}

.error-container {
    width: 100%;
    height: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    color: #d79f47;
    opacity: 0;
    transition-duration: 1s;
    z-index: 100;
    box-sizing: border-box
}

.error-container div {
    background: #380028;
    border-radius: 28px;
    padding: 10px 20px;
    display: inline-block;
    transform: translateY(-100%);
    box-shadow: 0 2px 4px rgba(56,0,40,.5)
}

.error-container.js-visible {
    pointer-events: none;
    opacity: 1;
    transition: opacity .3s ease
}

.step {
    position: relative
}

.popup-input-label {
    position: absolute;
    margin: 4px 0 0 12px;
    font-size: 12px;
    color: #9b8363
}

.popup-2-buttons-sync {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px
}

.popup-2-buttons-sync .group {
    flex-basis: 0;
    flex-grow: 1
}

.popup-2-buttons-sync .group:first-of-type {
    margin-right: 10px
}

@media only screen and (max-width: 499px) {
    .popup-2-buttons-sync {
        display:block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px
    }

    .popup-2-buttons-sync .group {
        text-align: center
    }

    .popup-2-buttons-sync .group:first-of-type {
        margin-right: 0
    }

    .popup-2-buttons-sync .collapse-to-inline {
        display: inline-block
    }
}

@media only screen and (max-height: 499px) {
    .popup-2-buttons-sync {
        display:block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px
    }

    .popup-2-buttons-sync .group {
        text-align: center
    }

    .popup-2-buttons-sync .group:first-of-type {
        margin-right: 0
    }

    .popup-2-buttons-sync .collapse-to-inline {
        display: inline-block
    }
}

.troubles-signing-in {
    margin-top: 20px
}

.privacy-policy,.troubles-signing-in {
    text-align: center;
    text-decoration: underline;
    cursor: pointer
}

.privacy-policy a {
    color: #4d4131
}

.game {
    transition: transform .2s ease
}

@media only screen and (max-height: 369px) {
    .game.js-settings-shown {
        transform:translateY(-255px)
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .game.js-settings-shown {
        transform:translateY(-255px)
    }
}

.settings.modal {
    height: 100%
}

@media only screen and (max-height: 369px) {
    .settings.modal.js-hide .popup {
        opacity:0;
        transform: translateY(255px);
        transition: transform .2s ease,opacity 0s linear .3s
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .settings.modal.js-hide .popup {
        opacity:0;
        transform: translateY(255px);
        transition: transform .2s ease,opacity 0s linear .3s
    }
}

@media only screen and (max-height: 369px) {
    .settings.modal.js-show .popup {
        opacity:1;
        transform: translateY(0);
        transition: transform .2s ease
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .settings.modal.js-show .popup {
        opacity:1;
        transform: translateY(0);
        transition: transform .2s ease
    }
}

@media only screen and (max-height: 369px) {
    .settings.modal .popup {
        width:100%;
        height: 255px;
        max-width: 100%;
        max-height: 100%;
        position: absolute;
        top: auto;
        bottom: 0;
        border: 0;
        border-radius: 0;
        background-color: #fbb039;
        border-top: 5px solid #e28d05
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .settings.modal .popup {
        width:100%;
        height: 255px;
        max-width: 100%;
        max-height: 100%;
        position: absolute;
        top: auto;
        bottom: 0;
        border: 0;
        border-radius: 0;
        background-color: #fbb039;
        border-top: 5px solid #e28d05
    }
}

@media only screen and (max-height: 369px) {
    .settings.modal .popup .close,.settings.modal .popup .popup-header {
        display:none
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .settings.modal .popup .close,.settings.modal .popup .popup-header {
        display:none
    }
}

.settings.modal .popup .content {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (max-height: 369px) {
    .settings.modal .popup .content {
        width:100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 0;
        box-sizing: border-box
    }

    .settings.modal .popup .content .group {
        display: flex;
        flex-direction: row;
        margin-bottom: 14px
    }

    .settings.modal .popup .content .popup-button {
        margin-top: 0
    }

    .settings.modal .popup .content .popup-button:first-of-type {
        margin-right: 20px
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .settings.modal .popup .content {
        width:100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 0;
        box-sizing: border-box
    }

    .settings.modal .popup .content .group {
        display: flex;
        flex-direction: row;
        margin-bottom: 14px
    }

    .settings.modal .popup .content .popup-button {
        margin-top: 0
    }

    .settings.modal .popup .content .popup-button:first-of-type {
        margin-right: 20px
    }
}

@media only screen and (max-width: 320px) {
    .settings.modal .popup .popup-button .hide-small {
        display:none
    }
}

.settings.modal .build-id {
    margin-top: 5px;
    font-size: 12px;
    color: #fffbe9;
    text-align: center
}

.audio-controls-container {
    display: flex;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (max-height: 369px) {
    .audio-controls-container {
        max-width:unset;
        margin-left: unset;
        margin-right: unset
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .audio-controls-container {
        max-width:unset;
        margin-left: unset;
        margin-right: unset
    }
}

.audio-controls-container .audio-controls-switch {
    width: 50%;
    flex-grow: 1
}

.audio-controls-container .audio-controls-switch:first-of-type {
    margin-right: 20px
}

.audio-controls-container .audio-controls-switch .switch-button {
    width: 52px;
    height: 54px
}

.audio-controls-container .audio-controls-switch .switch-button .label {
    width: 24px;
    height: 24px
}

.audio-controls-container .audio-controls-switch .switch-button .label svg {
    width: 100%;
    height: 100%
}

.settings .popup-button {
    width: 100%;
    height: 54px;
    max-width: 400px;
    margin: 14px auto 0 auto
}

.settings .popup-button .label {
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis
}

.settings .popup-2-buttons-sync .popup-button {
    margin-top: 10px
}

.tutorials {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    pointer-events: none;
    transition: opacity .3s ease;
    opacity: 0
}

.tutorials.js-active {
    opacity: 1
}

.tutorial-window {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none
}

.tutorial-window * {
    box-sizing: border-box
}

.tutorial-window .hand,.tutorial-window.js-touch .cursor {
    display: none
}

.tutorial-window.js-touch .hand {
    display: block
}

.tutorial-window .click-container {
    width: 0;
    height: 0;
    position: absolute
}

@media only screen and (max-width: 499px) {
    .tutorial-window .click-container {
        top:39px;
        right: 111px
    }
}

@media only screen and (min-width: 500px) {
    .tutorial-window .click-container {
        top:42px;
        right: 168px
    }
}

@media only screen and (min-width: 750px) {
    .tutorial-window .click-container {
        top:46px;
        right: 204px
    }
}

@media only screen and (min-width: 1000px) {
    .tutorial-window .click-container {
        top:46px;
        right: 240px
    }
}

@media only screen and (min-width: 1200px) {
    .tutorial-window .click-container {
        top:55px;
        right: 295px
    }
}

.tutorial-window .click-container .click {
    width: .4vmax;
    position: absolute;
    top: 0;
    right: 0
}

.tutorial-window .click-container .click div {
    width: .8vmax;
    height: 2.5vmax;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fff;
    border: 2px solid rgba(0,0,0,.3);
    transform-origin: bottom
}

.tutorial-window .click-container .click div:first-of-type {
    transform: rotate(60deg) translatey(-.5vmax) scaley(0)
}

@keyframes click-effect-rectangle-1 {
    0% {
        transform: rotate(60deg) translatey(-.5vmax) scaley(0)
    }

    50% {
        transform: rotate(60deg) translatey(-.5vmax) scaley(.5)
    }

    to {
        transform: rotate(60deg) translatey(-1vmax) scaley(1)
    }
}

.tutorial-window .click-container .click div:nth-of-type(2) {
    transform: rotate(120deg) translatey(-.5vmax) scaley(0)
}

@keyframes click-effect-rectangle-2 {
    0% {
        transform: rotate(120deg) translatey(-.5vmax) scaley(0)
    }

    50% {
        transform: rotate(120deg) translatey(-.5vmax) scaley(.5)
    }

    to {
        transform: rotate(120deg) translatey(-1vmax) scaley(1)
    }
}

.tutorial-window .click-container .click div:nth-of-type(3) {
    transform: rotate(180deg) translatey(-.5vmax) scaley(0)
}

@keyframes click-effect-rectangle-3 {
    0% {
        transform: rotate(180deg) translatey(-.5vmax) scaley(0)
    }

    50% {
        transform: rotate(180deg) translatey(-.5vmax) scaley(.5)
    }

    to {
        transform: rotate(180deg) translatey(-1vmax) scaley(1)
    }
}

.tutorial-window .click-container .click div:nth-of-type(4) {
    transform: rotate(240deg) translatey(-.5vmax) scaley(0)
}

@keyframes click-effect-rectangle-4 {
    0% {
        transform: rotate(240deg) translatey(-.5vmax) scaley(0)
    }

    50% {
        transform: rotate(240deg) translatey(-.5vmax) scaley(.5)
    }

    to {
        transform: rotate(240deg) translatey(-1vmax) scaley(1)
    }
}

.tutorial-window .click-container .click div:nth-of-type(5) {
    transform: rotate(300deg) translatey(-.5vmax) scaley(0)
}

@keyframes click-effect-rectangle-5 {
    0% {
        transform: rotate(300deg) translatey(-.5vmax) scaley(0)
    }

    50% {
        transform: rotate(300deg) translatey(-.5vmax) scaley(.5)
    }

    to {
        transform: rotate(300deg) translatey(-1vmax) scaley(1)
    }
}

.tutorial-window .click-container .click div:nth-of-type(6) {
    transform: rotate(1turn) translatey(-.5vmax) scaley(0)
}

@keyframes click-effect-rectangle-6 {
    0% {
        transform: rotate(1turn) translatey(-.5vmax) scaley(0)
    }

    50% {
        transform: rotate(1turn) translatey(-.5vmax) scaley(.5)
    }

    to {
        transform: rotate(1turn) translatey(-1vmax) scaley(1)
    }
}

.tutorial-window .cursor {
    width: 7vmax;
    height: 7vmax;
    position: absolute;
    top: 0
}

@media only screen and (max-width: 499px) {
    .tutorial-window .cursor {
        top:39px;
        right: 111px
    }
}

@media only screen and (min-width: 500px) {
    .tutorial-window .cursor {
        top:42px;
        right: 168px
    }
}

@media only screen and (min-width: 750px) {
    .tutorial-window .cursor {
        top:46px;
        right: 204px
    }
}

@media only screen and (min-width: 1000px) {
    .tutorial-window .cursor {
        top:46px;
        right: 240px
    }
}

@media only screen and (min-width: 1200px) {
    .tutorial-window .cursor {
        top:55px;
        right: 295px
    }
}

.tutorial-window .cursor svg {
    width: 7vmax;
    height: 7vmax;
    position: absolute;
    top: 0;
    right: 0
}

.tutorial-window .cursor svg polygon {
    fill: #fff;
    stroke: #000;
    stroke-linejoin: round;
    stroke-width: 1vmax
}

.tutorial-window .hand {
    width: 14vmax;
    height: 14vmax;
    position: absolute;
    top: 0;
    right: 0
}

@media only screen and (max-width: 499px) {
    .tutorial-window .hand {
        top:39px;
        right: 111px
    }
}

@media only screen and (min-width: 500px) {
    .tutorial-window .hand {
        top:42px;
        right: 168px
    }
}

@media only screen and (min-width: 750px) {
    .tutorial-window .hand {
        top:46px;
        right: 204px
    }
}

@media only screen and (min-width: 1000px) {
    .tutorial-window .hand {
        top:46px;
        right: 240px
    }
}

@media only screen and (min-width: 1200px) {
    .tutorial-window .hand {
        top:55px;
        right: 295px
    }
}

.tutorial-window .hand svg {
    width: 14vmax;
    height: 14vmax;
    position: absolute;
    top: -1vmax;
    right: -1vmax
}

.tutorial-window .hand svg .hand-background {
    fill: #89694e;
    stroke: #000;
    stroke-linejoin: round;
    stroke-width: 1vmax
}

.tutorial-window .hand svg rect {
    stroke-width: 2;
    fill: #e2b491;
    stroke: #bf8b6d;
    stroke-miterlimit: 10
}

.tutorial-window .hand svg .hand-lines {
    stroke-width: 2px;
    fill: none;
    stroke: #7f614b;
    stroke-linecap: round;
    stroke-linejoin: round
}

.tutorial-window .icon-container .icon {
    position: absolute;
    border-radius: 15%;
    flex-shrink: 0;
    background-color: #ebf7fd;
    transform: translate(50%,-50%)
}

@media only screen and (max-width: 499px) {
    .tutorial-window .icon-container .icon {
        width:58px;
        height: 58px
    }
}

@media only screen and (max-height: 499px) {
    .tutorial-window .icon-container .icon {
        width:58px;
        height: 58px
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .tutorial-window .icon-container .icon {
        width:74px;
        height: 74px
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .tutorial-window .icon-container .icon {
        width:100px;
        height: 100px
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .tutorial-window .icon-container .icon {
        width:130px;
        height: 130px
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .tutorial-window .icon-container .icon {
        width:170px;
        height: 170px
    }
}

@media only screen and (max-width: 499px) {
    .tutorial-window .icon-container .icon {
        top:39px;
        right: 111px
    }
}

@media only screen and (min-width: 500px) {
    .tutorial-window .icon-container .icon {
        top:42px;
        right: 168px
    }
}

@media only screen and (min-width: 750px) {
    .tutorial-window .icon-container .icon {
        top:46px;
        right: 204px
    }
}

@media only screen and (min-width: 1000px) {
    .tutorial-window .icon-container .icon {
        top:46px;
        right: 240px
    }
}

@media only screen and (min-width: 1200px) {
    .tutorial-window .icon-container .icon {
        top:55px;
        right: 295px
    }
}

.tutorial-window .icon-container:first-of-type .icon {
    background-color: #ebf7fd;
    opacity: .5
}

.tutorial-window .icon-container:nth-of-type(2) .icon {
    background-color: #6e4945;
    opacity: .8
}

.tutorial-window.step-intro {
    animation-name: fade-in,fade-out,timer;
    animation-duration: .3s,.5s,0s;
    animation-delay: 0s,6.2s,10.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}

.tutorial-window.step-intro .icon-container {
    opacity: 0
}

.tutorial-window.step-intro .icon-container:first-of-type {
    animation-name: fade-in,move-step-intro-2,fade-out;
    animation-duration: 1ms,1s,1s;
    animation-delay: 2.75s,3.2s,5.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}

.tutorial-window.step-intro .icon-container:first-of-type .y-offset {
    position: relative;
    top: 100px;
    transform: translateY(-100px)
}

.tutorial-window.step-intro .cursor,.tutorial-window.step-intro .hand {
    animation-name: move-step-intro-1,move-step-intro-2;
    animation-duration: 1s,1s;
    animation-delay: 1.2s,3.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transform: translate(-18vmax,9vmax)
}

.tutorial-window.step-intro .cursor svg polygon {
    animation-name: cursor-hold;
    animation-duration: 2s;
    animation-delay: 2.7s;
    animation-iteration-count: 1
}

.tutorial-window.step-intro .hand svg .hand-background {
    animation-name: hand-hold;
    animation-duration: 2s;
    animation-delay: 2.7s;
    animation-iteration-count: 1
}

.tutorial-window.step-intro .cursor svg,.tutorial-window.step-intro .hand svg {
    animation-name: cursor-tilt;
    animation-duration: 2s;
    animation-delay: 2.7s;
    animation-iteration-count: 1
}

.tutorial-window.step-intro .click-container .click div {
    animation-duration: .1s;
    animation-delay: 2.75s;
    animation-timing-function: step-start;
    animation-iteration-count: 1
}

.tutorial-window.step-intro .click-container .click div:first-of-type {
    animation-name: click-effect-rectangle-1
}

.tutorial-window.step-intro .click-container .click div:nth-of-type(2) {
    animation-name: click-effect-rectangle-2
}

.tutorial-window.step-intro .click-container .click div:nth-of-type(3) {
    animation-name: click-effect-rectangle-3
}

.tutorial-window.step-intro .click-container .click div:nth-of-type(4) {
    animation-name: click-effect-rectangle-4
}

.tutorial-window.step-intro .click-container .click div:nth-of-type(5) {
    animation-name: click-effect-rectangle-5
}

.tutorial-window.step-intro .click-container .click div:nth-of-type(6) {
    animation-name: click-effect-rectangle-6
}

.tutorial-window.step-mix {
    animation-name: fade-in,fade-out,timer;
    animation-duration: .3s,.5s,0s;
    animation-delay: 0s,6.2s,10.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}

@media only screen and (max-width: 499px) {
    .tutorial-window.step-mix .y-offset {
        transform:translateY(58px)
    }
}

@media only screen and (max-height: 499px) {
    .tutorial-window.step-mix .y-offset {
        transform:translateY(58px)
    }
}

@media only screen and (min-width: 500px) and (min-height:500px) {
    .tutorial-window.step-mix .y-offset {
        transform:translateY(64px)
    }
}

@media only screen and (min-width: 750px) and (min-height:750px) {
    .tutorial-window.step-mix .y-offset {
        transform:translateY(72px)
    }
}

@media only screen and (min-width: 1000px) and (min-height:1000px) {
    .tutorial-window.step-mix .y-offset {
        transform:translateY(80px)
    }
}

@media only screen and (min-width: 1200px) and (min-height:1200px) {
    .tutorial-window.step-mix .y-offset {
        transform:translateY(90px)
    }
}

.tutorial-window.step-mix .icon-container:first-of-type {
    transform: translate(-18vmax,9vmax)
}

.tutorial-window.step-mix .icon-container:nth-of-type(2) {
    animation-name: fade-in,move-step-mix-2;
    animation-duration: 1ms,1s;
    animation-delay: 2.75s,3.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity: 0
}

.tutorial-window.step-mix .cursor,.tutorial-window.step-mix .hand {
    animation-name: move-step-mix-1,move-step-mix-2;
    animation-duration: 1s,1s;
    animation-delay: 1.2s,3.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transform: translate(-17.8vmax,9.2vmax)
}

.tutorial-window.step-mix .cursor svg polygon {
    animation-name: cursor-hold;
    animation-duration: 2s;
    animation-delay: 2.7s;
    animation-iteration-count: 1
}

.tutorial-window.step-mix .hand svg .hand-background {
    animation-name: hand-hold;
    animation-duration: 2s;
    animation-delay: 2.7s;
    animation-iteration-count: 1
}

.tutorial-window.step-mix .cursor svg,.tutorial-window.step-mix .hand svg {
    animation-name: cursor-tilt;
    animation-duration: 2s;
    animation-delay: 2.7s;
    animation-iteration-count: 1
}

.tutorial-window.step-mix .click-container .click div {
    animation-duration: .1s;
    animation-delay: 2.75s;
    animation-timing-function: step-start;
    animation-iteration-count: 1
}

.tutorial-window.step-mix .click-container .click div:first-of-type {
    animation-name: click-effect-rectangle-1
}

.tutorial-window.step-mix .click-container .click div:nth-of-type(2) {
    animation-name: click-effect-rectangle-2
}

.tutorial-window.step-mix .click-container .click div:nth-of-type(3) {
    animation-name: click-effect-rectangle-3
}

.tutorial-window.step-mix .click-container .click div:nth-of-type(4) {
    animation-name: click-effect-rectangle-4
}

.tutorial-window.step-mix .click-container .click div:nth-of-type(5) {
    animation-name: click-effect-rectangle-5
}

.tutorial-window.step-mix .click-container .click div:nth-of-type(6) {
    animation-name: click-effect-rectangle-6
}

.tutorial-window.step-guide {
    animation-name: fade-in,fade-out,timer;
    animation-duration: .3s,.5s,0s;
    animation-delay: 0s,6.2s,10.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}

.tutorial-window.step-guide .icon-container:first-of-type {
    transform: translate(-19.1vmax,12.9vmax)
}

.tutorial-window.step-guide .icon-container:nth-of-type(2) {
    transform: translate(-13vmax,15vmax);
    animation-name: move-step-guide-2;
    animation-duration: 1s;
    animation-delay: 3.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}

.tutorial-window.step-guide .cursor,.tutorial-window.step-guide .hand {
    animation-name: move-step-guide-1,move-step-guide-2;
    animation-duration: 1s,1s;
    animation-delay: 1.5s,3.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transform: translate(-19vmax,13vmax)
}

.tutorial-window.step-guide .cursor svg polygon {
    animation-name: cursor-hold;
    animation-duration: 2s;
    animation-delay: 2.7s;
    animation-iteration-count: 1
}

.tutorial-window.step-guide .hand svg polygon {
    animation-name: hand-hold;
    animation-duration: 2s;
    animation-delay: 2.7s;
    animation-iteration-count: 1
}

.tutorial-window.step-guide .cursor svg,.tutorial-window.step-guide .hand svg {
    animation-name: cursor-tilt;
    animation-duration: 2s;
    animation-delay: 2.7s;
    animation-iteration-count: 1
}

.tutorial-window.step-guide .click-container {
    transform: translate(-13vmax,15vmax)
}

.tutorial-window.step-guide .click-container .click div {
    animation-duration: .1s;
    animation-delay: 2.75s;
    animation-timing-function: step-start;
    animation-iteration-count: 1
}

.tutorial-window.step-guide .click-container .click div:first-of-type {
    animation-name: click-effect-rectangle-1
}

.tutorial-window.step-guide .click-container .click div:nth-of-type(2) {
    animation-name: click-effect-rectangle-2
}

.tutorial-window.step-guide .click-container .click div:nth-of-type(3) {
    animation-name: click-effect-rectangle-3
}

.tutorial-window.step-guide .click-container .click div:nth-of-type(4) {
    animation-name: click-effect-rectangle-4
}

.tutorial-window.step-guide .click-container .click div:nth-of-type(5) {
    animation-name: click-effect-rectangle-5
}

.tutorial-window.step-guide .click-container .click div:nth-of-type(6) {
    animation-name: click-effect-rectangle-6
}

@keyframes fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fade-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes timer {
    0% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

@keyframes cursor-hold {
    0% {
        fill: #ccc
    }

    to {
        fill: #ccc
    }
}

@keyframes hand-hold {
    0% {
        fill: #634936
    }

    to {
        fill: #634936
    }
}

@keyframes cursor-tilt {
    0% {
        transform: rotate(2deg)
    }

    to {
        transform: rotate(2deg)
    }
}

@keyframes move-step-intro-1 {
    0% {
        transform: translate(-18vmax,9vmax)
    }

    to {
        transform: translate(0)
    }
}

@keyframes move-step-intro-2 {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-18vmax,9vmax)
    }
}

@keyframes move-step-mix-1 {
    0% {
        transform: translate(-17.8vmax,9.2vmax)
    }

    to {
        transform: translate(0)
    }
}

@keyframes move-step-mix-2 {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-17.8vmax,9.2vmax)
    }
}

@keyframes move-step-guide-1 {
    0% {
        transform: translate(-19vmax,13vmax)
    }

    to {
        transform: translate(-13vmax,15vmax)
    }
}

@keyframes move-step-guide-2 {
    0% {
        transform: translate(-13vmax,15vmax)
    }

    to {
        transform: translate(-19vmax,13vmax)
    }
}

.text-tutorials-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    padding: 10vh 10vw;
    font-size: 14px;
    pointer-events: none
}

@media only screen and (max-height: 369px) {
    .text-tutorials-container {
        padding:10vh 10vw 79.99998px 10vw
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .text-tutorials-container {
        padding:10vh 10vw 79.99998px 10vw
    }
}

.text-tutorials-container.horizontal-left {
    justify-content: flex-start
}

@media only screen and (max-height: 369px) {
    .text-tutorials-container.horizontal-left {
        justify-content:center
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .text-tutorials-container.horizontal-left {
        justify-content:center
    }
}

.text-tutorials-container.horizontal-center {
    justify-content: center
}

.text-tutorials-container.horizontal-right {
    justify-content: flex-end
}

@media only screen and (max-height: 369px) {
    .text-tutorials-container.horizontal-right {
        justify-content:center
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .text-tutorials-container.horizontal-right {
        justify-content:center
    }
}

.text-tutorials-container.vertical-top {
    align-items: flex-start
}

.text-tutorials-container.vertical-center {
    align-items: center
}

.text-tutorials-container.vertical-bottom {
    align-items: flex-end
}

.text-tutorials-container .text-tutorials {
    min-width: 200px;
    max-width: 400px;
    z-index: 999;
    text-align: center;
    box-sizing: border-box;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity .14s ease,transform .2s ease;
    border-radius: 8px;
    flex-grow: 0
}

.text-tutorials-container .text-tutorials.js-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto
}

.text-tutorials-container .text-tutorials.js-active:before {
    animation-name: text-tutorial-pulse;
    animation-duration: 2s;
    animation-iteration-count: infinite
}

.text-tutorials-container .text-tutorials .close {
    width: 40px;
    height: 40px;
    position: absolute;
    border-radius: 8px;
    transform: translate(-50%,-30%);
    font-size: 2.3em;
    z-index: 1
}

.text-tutorials-container .text-tutorials .close:active:after {
    background-color: #faa011
}

.text-tutorials-container .text-tutorials .close:after {
    background-color: #faa620
}

.text-tutorials-container .text-tutorials .close:before {
    background-color: #d88705
}

.text-tutorials-container .text-tutorials .close.border {
    background-color: #1b001c;
    border-color: #1b001c;
    z-index: 100
}

.text-tutorials-container .text-tutorials .close .label {
    width: 14px;
    height: 14px
}

.text-tutorials-container .text-tutorials .content {
    background-color: #380028;
    border: 4px solid #1b001c;
    padding: 20px;
    position: relative;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 3px 3px 20px #1b001c;
    display: inline-block
}

.text-tutorials-container .text-tutorials:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    box-shadow: 0 0 0 #faa620;
    border-radius: 6px
}

@keyframes text-tutorial-pulse {
    0% {
        box-shadow: 0 0 0 0 #faa620,inset 0 0 0 10px #faa620;
        opacity: 0
    }

    30% {
        opacity: .1
    }

    to {
        box-shadow: 0 0 0 20px #faa620,inset 0 0 0 10px #faa620;
        opacity: 0
    }
}

.js-frozen .icon,.js-frozen .menu-button {
    pointer-events: none
}

@media only screen and (max-height: 369px) {
    .side,.workspace {
        max-height:calc(100% - 60px)
    }

    .side {
        bottom: 60px
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .side,.workspace {
        max-height:calc(100% - 60px)
    }

    .side {
        bottom: 60px
    }
}

.ui .icons {
    position: absolute;
    top: 0;
    left: 0;
    transition: left .24s ease;
    z-index: 50
}

.ui .icons .badge {
    background-color: #380028
}

@media only screen and (max-height: 369px) {
    .ui .icons {
        width:100%;
        height: 60px;
        top: auto;
        bottom: 0;
        z-index: 11000;
        background: #faa620;
        display: flex;
        flex-direction: row
    }

    .ui .icons .badge {
        background-color: #260026
    }

    .ui .icons svg {
        fill: #4d4131;
        will-change: transform
    }

    .ui .icons svg .svg-b,.ui .icons svg .svg-n {
        stroke: #4d4131
    }

    .ui .icons svg .svg-b {
        fill: #faa620
    }

    .ui .icons .close-icon {
        stroke: #4d4131;
        stroke-linecap: round;
        stroke-miterlimit: 10;
        stroke-width: 2.7px
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .ui .icons {
        width:100%;
        height: 60px;
        top: auto;
        bottom: 0;
        z-index: 11000;
        background: #faa620;
        display: flex;
        flex-direction: row
    }

    .ui .icons .badge {
        background-color: #260026
    }

    .ui .icons svg {
        fill: #4d4131;
        will-change: transform
    }

    .ui .icons svg .svg-b,.ui .icons svg .svg-n {
        stroke: #4d4131
    }

    .ui .icons svg .svg-b {
        fill: #faa620
    }

    .ui .icons .close-icon {
        stroke: #4d4131;
        stroke-linecap: round;
        stroke-miterlimit: 10;
        stroke-width: 2.7px
    }
}

.ui .icons .menu-button {
    text-align: center;
    width: 54px;
    height: 54px;
    padding: 10px;
    display: block;
    position: relative;
    color: #d79f47;
    font-size: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent
}

@media only screen and (max-height: 369px) {
    .ui .icons .menu-button {
        width:44px;
        height: 100%;
        box-sizing: border-box;
        flex-grow: 1
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .ui .icons .menu-button {
        width:44px;
        height: 100%;
        box-sizing: border-box;
        flex-grow: 1
    }
}

.ui .icons .menu-button.primary .menu-button-icon.primary,.ui .icons .menu-button.primary .menu-button-label.primary {
    transform: translate(0)
}

.ui .icons .menu-button.primary .menu-button-icon.secondary,.ui .icons .menu-button.primary .menu-button-label.secondary {
    opacity: 0
}

@media only screen and (max-height: 369px) {
    .ui .icons .menu-button.primary .menu-button-icon.secondary,.ui .icons .menu-button.primary .menu-button-label.secondary {
        opacity:1
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .ui .icons .menu-button.primary .menu-button-icon.secondary,.ui .icons .menu-button.primary .menu-button-label.secondary {
        opacity:1
    }
}

@media only screen and (max-height: 369px) {
    .ui .icons .menu-button.primary .menu-button-icon.secondary {
        transform:translatey(-107%)
    }

    .ui .icons .menu-button.primary .menu-button-label.secondary {
        transform: translatey(20px)
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .ui .icons .menu-button.primary .menu-button-icon.secondary {
        transform:translatey(-107%)
    }

    .ui .icons .menu-button.primary .menu-button-label.secondary {
        transform: translatey(20px)
    }
}

.ui .icons .menu-button.secondary .menu-button-icon.primary,.ui .icons .menu-button.secondary .menu-button-label.primary {
    transform: translate(0)
}

.ui .icons .menu-button.secondary .menu-button-icon.secondary,.ui .icons .menu-button.secondary .menu-button-label.secondary {
    opacity: 0
}

@media only screen and (max-height: 369px) {
    .ui .icons .menu-button.secondary .menu-button-icon.secondary,.ui .icons .menu-button.secondary .menu-button-label.secondary {
        opacity:1
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .ui .icons .menu-button.secondary .menu-button-icon.secondary,.ui .icons .menu-button.secondary .menu-button-label.secondary {
        opacity:1
    }
}

@media only screen and (max-height: 369px) {
    .ui .icons .menu-button.secondary {
        background-color:#fbb039
    }

    .ui .icons .menu-button.secondary.no-highlight {
        background-color: #faa620
    }

    .ui .icons .menu-button.secondary .menu-button-icon.primary {
        transform: translatex(-107%)
    }

    .ui .icons .menu-button.secondary .menu-button-label.primary {
        transform: translatey(20px)
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .ui .icons .menu-button.secondary {
        background-color:#fbb039
    }

    .ui .icons .menu-button.secondary.no-highlight {
        background-color: #faa620
    }

    .ui .icons .menu-button.secondary .menu-button-icon.primary {
        transform: translatex(-107%)
    }

    .ui .icons .menu-button.secondary .menu-button-label.primary {
        transform: translatey(20px)
    }
}

.ui .icons .menu-button .menu-button-icon-container {
    width: 35px;
    height: 35px;
    position: relative;
    margin: 0 auto;
    overflow: hidden
}

@media only screen and (max-height: 369px) {
    .ui .icons .menu-button .menu-button-icon-container {
        width:30px;
        height: 30px
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .ui .icons .menu-button .menu-button-icon-container {
        width:30px;
        height: 30px
    }
}

.ui .icons .menu-button .menu-button-icon-container .menu-button-icon {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transition: transform .2s ease
}

.ui .icons .menu-button .badge-container {
    height: 0
}

.ui .icons .menu-button .badge-container .badge {
    color: #fffbe9;
    position: relative;
    top: -3px;
    margin-left: 27px;
    padding: 2px 6px;
    border-radius: 10px;
    pointer-events: none;
    transition: opacity 0s ease 1s;
    letter-spacing: 0;
    z-index: 10
}

.ui .icons .menu-button .badge-container .badge.js-hide {
    opacity: 0;
    transition: opacity .1s ease 0s
}

.ui .icons .menu-button .menu-button-label-container {
    width: 140%;
    height: 15px;
    margin: 0 -20%;
    position: relative;
    overflow: hidden;
    text-align: center
}

.ui .icons .menu-button .menu-button-label-container .menu-button-label {
    width: 150%;
    margin: 0 -25%;
    position: absolute;
    transition: transform .16s ease .16s
}

@media only screen and (max-height: 369px) {
    .ui .icons .menu-button .menu-button-label-container .menu-button-label {
        color:rgba(77,65,49,.5)
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .ui .icons .menu-button .menu-button-label-container .menu-button-label {
        color:rgba(77,65,49,.5)
    }
}

.ui .icon {
    text-align: center;
    width: 54px;
    height: 54px;
    padding: 10px;
    display: block;
    position: relative;
    color: #d79f47;
    font-size: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent
}

@media only screen and (max-height: 369px) {
    .ui .icon {
        width:44px;
        height: 44px
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .ui .icon {
        width:44px;
        height: 44px
    }
}

.ui svg {
    fill: #faa620
}

.ui svg .svg-b,.ui svg .svg-n {
    stroke: #faa620;
    stroke-width: 3px
}

.ui svg .svg-n {
    fill: none
}

.ui svg .svg-b {
    fill: #260026
}

.ui svg .svg-m {
    stroke-miterlimit: 10
}

.ui svg .svg-c {
    stroke-linecap: round
}

.ui svg .svg-j {
    stroke-linejoin: round
}

.ui .search {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    z-index: 200;
    fill: #faa620
}

@media only screen and (max-width: 499px) {
    .ui .search {
        right:140px
    }
}

@media only screen and (min-width: 500px) {
    .ui .search {
        right:200px
    }
}

@media only screen and (min-width: 750px) {
    .ui .search {
        right:240px
    }
}

@media only screen and (min-width: 1000px) {
    .ui .search {
        right:280px
    }
}

@media only screen and (min-width: 1200px) {
    .ui .search {
        right:340px
    }
}

.ui .search.icon {
    transition: transform .1s ease,opacity .8s ease 1.5s;
    z-index: 1000
}

.ui .search.icon.js-hidden {
    opacity: 0;
    pointer-events: none
}

@media only screen and (max-width: 499px) {
    .search-bar.js-visible~.search.icon {
        transform:translate(4px) scale(.8)
    }
}

@media only screen and (min-width: 500px) {
    .search-bar.js-visible~.search.icon {
        transform:translate(-10px,24px)
    }
}

.search-bar {
    position: absolute;
    top: 0;
    background-color: #380028;
    border: 0;
    color: #d79f47;
    border-right: 5px solid #1b001c;
    outline: none;
    box-sizing: border-box;
    font-family: Source Sans Pro,sans-serif;
    font-size: 17px;
    font-weight: 400;
    z-index: 1000;
    transition: transform .1s ease;
    will-change: transform
}

@media only screen and (max-width: 499px) {
    .search-bar {
        right:140px;
        width: calc(100% - 140px);
        box-sizing: border-box;
        padding: 14px 38px 14px 14px
    }
}

@media only screen and (min-width: 500px) {
    .search-bar {
        right:200px;
        width: calc(100% - 200px);
        padding: 38px 56px 38px 20px
    }
}

@media only screen and (min-width: 750px) {
    .search-bar {
        right:240px;
        width: 240px
    }
}

@media only screen and (min-width: 1000px) {
    .search-bar {
        right:280px;
        width: 280px
    }
}

@media only screen and (min-width: 1200px) {
    .search-bar {
        right:340px;
        width: 340px
    }
}

.search-bar.js-visible {
    transform: translateY(0)
}

.search-bar.js-hidden {
    transform: translateY(-100%)
}

.ui .logo {
    position: absolute;
    bottom: 10px;
    width: 120px;
    opacity: .1;
    pointer-events: none
}

@media only screen and (max-width: 499px) {
    .ui .logo {
        right:150px
    }
}

@media only screen and (min-width: 500px) {
    .ui .logo {
        right:210px
    }
}

@media only screen and (min-width: 750px) {
    .ui .logo {
        right:250px
    }
}

@media only screen and (min-width: 1000px) {
    .ui .logo {
        right:290px
    }
}

@media only screen and (min-width: 1200px) {
    .ui .logo {
        right:350px
    }
}

@media only screen and (max-height: 369px) {
    .ui .logo {
        bottom:65px!important;
        opacity: .06!important
    }
}

@media only screen and (max-width: 599px) and (min-height:450px) {
    .ui .logo {
        bottom:65px!important;
        opacity: .06!important
    }
}

#workspace .workspace-cleanup {
    content: "";
    position: absolute;
    height: 1%;
    background-color: #1b001c;
    top: 0;
    opacity: 1;
    transform-origin: right top;
    transform: scaleX(0) scaleY(110);
    transition: transform 0s,opacity 0s;
    pointer-events: none
}

@media only screen and (max-width: 499px) {
    #workspace .workspace-cleanup {
        width:calc(100% - 140px);
        right: 140px
    }
}

@media only screen and (min-width: 500px) {
    #workspace .workspace-cleanup {
        width:calc(100% - 200px);
        right: 200px
    }
}

@media only screen and (min-width: 750px) {
    #workspace .workspace-cleanup {
        width:calc(100% - 240px);
        right: 240px
    }
}

@media only screen and (min-width: 1000px) {
    #workspace .workspace-cleanup {
        width:calc(100% - 280px);
        right: 280px
    }
}

@media only screen and (min-width: 1200px) {
    #workspace .workspace-cleanup {
        width:calc(100% - 340px);
        right: 340px
    }
}

#workspace.js-cleanup .workspace-cleanup,#workspace.js-exhausted .workspace-cleanup {
    transform: scaleX(1) scaleY(110);
    opacity: 0;
    transition: transform .6s cubic-bezier(.71,.06,.75,.88),opacity .3s linear 1s
}

#workspace.js-revert .workspace-cleanup {
    opacity: 1;
    transform: scaleX(0) scaleY(110);
    transition: transform .6s cubic-bezier(.79,.17,.54,.85) .3s,opacity .3s linear 0s
}

#workspace.js-exhausted .workspace-cleanup {
    z-index: 50
}

#workspace.js-cleanup .workspace-cleanup {
    z-index: 110
}

.newsletter-switch {
    margin: 0 8px 16px 0
}

.element img {
    -webkit-user-drag: none
}

.js-to-remove {
    pointer-events: none
}

#icon-audio-off,#icon-audio-on,#icon-music-off,#icon-music-on {
    z-index: 1000
}

#icon-audio-on,#icon-music-on {
    fill: #fffbe9
}

#icon-audio-off,#icon-music-off {
    fill: #4d4131
}

#icon-music-on .a {
    fill: #ffbc00
}

#icon-music-on .b {
    fill: none;
    stroke: #ffbc00;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 4px
}

#icon-music-off .a {
    fill: #ffbc00
}

#icon-music-off .b {
    fill: none;
    stroke: #ffbc00;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 4px
}

#icon-audio-on .a {
    fill: none;
    stroke: #ffbc00;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4px
}

#icon-audio-off .a,#icon-audio-off .b {
    fill: none;
    stroke: #ffbc00;
    stroke-linecap: round;
    stroke-width: 4px
}

#icon-audio-off .a {
    stroke-linejoin: round
}

#icon-audio-off .b {
    stroke-miterlimit: 10
}

.close-search-icon {
    stroke: #faa620
}

@keyframes dim {
    0% {
        opacity: 1
    }

    50% {
        opacity: .6
    }

    to {
        opacity: 1
    }
}

.js-mix-fail {
    animation-duration: .3s;
    animation-name: shake;
    animation-timing-function: steps(10,start)
}

.js-mix-mixed {
    animation-duration: .4s;
    animation-name: shake;
    animation-timing-function: steps(10,start)
}

.js-clone img {
    animation-name: item-clone;
    animation-duration: .14s;
    animation-delay: .08s;
    animation-fill-mode: forwards;
    opacity: 0
}

.js-cloned img {
    animation-name: item-cloned;
    animation-duration: .2s;
    animation-fill-mode: forwards
}

#workspace .element {
    will-change: transform
}

.loading {
    width: 100px;
    height: 100px
}

#outer-library.native {
    will-change: scroll-position
}

#outer-library.iscroll #library {
    will-change: translate
}

.library {
    overflow-x: hidden;
    overflow-y: hidden
}

.login-transition-enter-active,.login-transition-leave-active {
    transition: opacity .25s
}

.login-transition-enter,.login-transition-leave-to {
    opacity: 0
}

#auth-container .step {
    display: none
}

#auth-container .step.active {
    display: block
}

#auth-container .step .error-container {
    color: red;
    font-weight: 600
}

@keyframes item-clone {
    0% {
        transform: scale(.6);
        opacity: 1
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes item-cloned {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(.9)
    }

    to {
        transform: scale(1)
    }
}

#app {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}