@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");@import url("https://use.fontawesome.com/releases/v5.12.1/css/all.css");:root{--color-primary: hsl(300, 70%, 35%);--color-0: hsl(0, 100%, 45%);--color-1: hsl(300, 100%, 25%);--color-2: hsl(120, 100%, 25%)}aside{position:absolute;top:80px;left:0;width:320px;height:calc(100% - 64px);background-color:white;box-shadow:4px 0 8px rgba(0,0,0,0.05);display:flex;flex-flow:column wrap;z-index:1;transform:translateX(-100%);transition:transform 1.5s 0.5s cubic-bezier(0.85, 0, 0.15, 1)}aside.visible{transform:none}aside .bot{padding-bottom:64px}aside .user{padding-top:64px}aside .bot,aside .user{flex:1;display:flex;justify-content:center;align-items:center}aside .bot:nth-child(1),aside .user:nth-child(1){border-bottom:2px solid #eeeeee}aside .bot h2,aside .user h2{font-size:1.25rem;margin-bottom:.5em;text-align:center}aside .bot p,aside .user p{color:#999999;text-align:center}aside .bot .sets-wrapper,aside .user .sets-wrapper{position:relative;height:174px;width:132px;margin:0 auto;background-color:#f6f6f6;border-radius:8px;margin-top:32px}aside .bot .sets-wrapper .card:nth-last-child(n+6) .card-inner,aside .user .sets-wrapper .card:nth-last-child(n+6) .card-inner{box-shadow:none}aside .bot .sets-wrapper .card.away,aside .user .sets-wrapper .card.away{top:200%}aside .bot .difficulty,aside .user .difficulty{margin-top:2em;text-align:center}aside .bot .difficulty p,aside .user .difficulty p{margin-bottom:.5em}aside .bot .difficulty ul,aside .user .difficulty ul{list-style:none;display:flex}aside .bot .difficulty ul li,aside .user .difficulty ul li{display:block;margin:0 8px;color:#aaaaaa;cursor:pointer;font-weight:bold;letter-spacing:.02em}aside .bot .difficulty ul li.selected,aside .user .difficulty ul li.selected{color:var(--color-primary)}aside .buttons{position:absolute;top:50%;left:50%;transform:translateX(-50%);margin-top:-32px}aside .buttons button{position:relative;display:block;margin:0 auto;border:none;background:none;font-size:1rem}aside .buttons button:not(:disabled){cursor:pointer}aside .buttons button:focus{outline:none}aside .buttons button:not(:last-child){margin-bottom:1em}aside .buttons button.main{background:linear-gradient(#ac39ac, var(--color-primary));color:white;border-radius:8px;padding:16px;width:260px;height:68px;font-size:1.25rem;letter-spacing:.05em;font-weight:600;box-shadow:0 4px 8px rgba(0,0,0,0.2);transition:all .1s ease;text-shadow:0 2px 4px rgba(0,0,0,0.2)}aside .buttons button.main span{display:block;font-size:.725rem;font-weight:normal;letter-spacing:0;opacity:.7}aside .buttons button.main:active:not(:disabled),aside .buttons button.main.active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 8px rgba(0,0,0,0.2)}aside .buttons button.main::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(255,255,255,0.25);transform:scaleX(0);transform-origin:right;transition:opacity .3s ease, transform 0s .5s linear;opacity:0}aside .buttons button.main.waiting::before{opacity:1;animation:countdown 10s linear}aside .buttons button.main:disabled{text-shadow:none;overflow:hidden;cursor:default}aside .buttons button.main:disabled:not(.waiting)::before{transform:scaleX(1);opacity:1}aside .buttons button.secondary{color:#999;font-weight:bold;transition:color .1s ease;color:#ad1fad}aside .buttons button.secondary:disabled{color:#d9d9d9;cursor:default}@keyframes countdown{from{transform:scaleX(0)}to{transform:scaleX(1)}}main{position:absolute;top:80px;left:0;width:100%;height:calc(100% - 80px);display:flex;padding:24px 0 80px 0}main.set .card:not(.locked) .card-inner{opacity:.3;transition:top .5s ease-in-out, left .5s ease-in-out, transform .3s ease, opacity .3s ease}main.waiting .card{cursor:pointer}main.waiting .card:hover{transform:scale(1.05)}main.waiting .card.selected{transform:scale(1.1)}main.waiting .card.selected .card-inner{transform:none !important;box-shadow:0 2px 2px rgba(0,0,0,0.1),0 0 0 4px #f6eeee,0 0 0 6px var(--color-primary)}main .pause{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.5);z-index:100;opacity:0;pointer-events:none;transition:opacity .3s ease}main .pause .content{text-align:center;background-color:white;padding:24px 64px;max-width:calc(100% - 32px);border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,0.05)}main .pause .content h2,main .pause .content p{margin-bottom:1em}main .pause .content p{color:#666666}main .pause .content input,main .pause .content label{cursor:pointer;color:var(--color-primary);font-weight:bold}main .pause .content input{appearance:none;-webkit-appearance:none;width:24px;height:24px;border:2px solid var(--color-primary);border-radius:4px;vertical-align:2px;margin-right:4px}main .pause .content input::after{content:"\f00c";font-family:"Font Awesome 5 Free";font-size:.75rem;color:white;font-weight:bold;width:100%;height:100%;display:flex;justify-content:center;align-items:center}main .pause .content input:not(:checked){opacity:.5}main .pause .content input:not(:checked)+label{opacity:.5}main .pause .content input:checked{background-color:var(--color-primary)}main .pause .content input:focus{outline:none;box-shadow:0 0 0 2px white,0 0 0 4px var(--color-primary)}main .pause .content button{margin-top:2em}main.paused .pause{opacity:1;pointer-events:all}main.paused .card{pointer-events:none}main.paused:not(.shown) .card svg{opacity:0}.card{position:absolute;top:0;left:0;height:176px;width:128px;transition:top .5s ease-in-out, left .5s ease-in-out, transform .2s ease}.card .card-inner{width:100%;height:100%;display:inline-flex;flex-flow:column;justify-content:center;align-items:center;background-color:#ffffff;border-radius:5px;box-shadow:0 2px 2px rgba(0,0,0,0.1);transition:transform .3s ease, opacity .3s ease, box-shadow .1s ease, margin-top .3s ease;backface-visibility:hidden}.card.new .card-inner{margin-top:40px;opacity:0;transform:scale(1.05) !important}.card.locked:not(.set){transform:scale(0.8) !important}.card.locked:not(.set) .card-inner{transform:none}.card.locked.set .card-inner{transform:scale(1.1) !important}.card svg{display:inline-block;width:80px;fill:transparent;stroke-width:.3}.card.c0{color:var(--color-0)}.card.c0.f0 svg{fill:var(--color-0)}.card.c0.f1 svg{stroke:var(--color-0)}.card.c0.f2 svg{stroke:var(--color-0);fill:url(#stripes-c0)}.card.c1{color:var(--color-1)}.card.c1.f0 svg{fill:var(--color-1)}.card.c1.f1 svg{stroke:var(--color-1)}.card.c1.f2 svg{stroke:var(--color-1);fill:url(#stripes-c1)}.card.c2{color:var(--color-2)}.card.c2.f0 svg{fill:var(--color-2)}.card.c2.f1 svg{stroke:var(--color-2)}.card.c2.f2 svg{stroke:var(--color-2);fill:url(#stripes-c2)}.card.set .card-inner{box-shadow:0 10px 10px rgba(0,0,0,0.05)}*{margin:0;padding:0;box-sizing:border-box;touch-action:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{height:100%;width:100%;position:fixed;overflow:hidden}body{background-color:#f6eeee;font-family:sans-serif;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}header{position:fixed;top:0;left:0;width:100%;height:80px;z-index:100;background-color:white;box-shadow:0 4px 8px rgba(0,0,0,0.05);display:flex;align-items:center;padding:0 16px}header a{text-decoration:none}h1{font-size:1.5rem;text-transform:uppercase;letter-spacing:.5rem;color:var(--color-primary);user-select:none}h1 span{display:inline-flex;height:2em;width:1.5em;justify-content:center;align-items:center;border:2px solid var(--color-primary);border-radius:6px;margin:0 4px;padding-left:.35em;background-color:white;box-shadow:0 4px 8px rgba(0,0,0,0.05)}a{text-decoration:none;color:var(--color-primary)}button{display:block;margin:0 auto;border:none;font-size:1em;background:none;cursor:pointer;user-select:none}button:not(:last-child){margin-bottom:1em}button:focus{outline:none}button.primary{color:white;font-weight:bold;letter-spacing:.05rem;background:linear-gradient(#ac39ac, var(--color-primary));padding:16px 40px;border-radius:8px;box-shadow:0 8px 16px rgba(0,0,0,0.2);text-shadow:0 2px 2px rgba(0,0,0,0.2);transition:transform .2s ease, box-shadow .2s ease}button.primary:active{transform:none !important;box-shadow:0 4px 8px rgba(0,0,0,0.2)}button.secondary{color:var(--color-primary);font-weight:bold;border:2px solid var(--color-primary);border-radius:8px}button.tertiary{color:#999999;font-weight:bold;transition:color .2s ease}button.tertiary:hover{color:var(--color-primary)}.controls{position:fixed;top:22px;right:32px;z-index:200;display:flex}.controls div{cursor:pointer;padding:8px;transition:opacity .3s ease}.controls div:not(:last-child){margin-right:32px}.controls div.hidden{opacity:0;pointer-events:none}.controls div i{color:#aaaaaa;margin-right:4px}.controls div span{color:#666666}.controls div.sound span{display:inline-block;width:80px}.controls div.sound i{width:16px}.controls div:hover i{color:var(--color-primary)}.controls div:hover span{color:var(--color-primary)}.controls .sound i.hidden{display:none}.about{position:absolute;top:0;left:0;width:100%;height:100%;z-index:300;background-color:rgba(0,0,0,0.5);transition:opacity .3s ease;display:flex;padding:16px 0;overflow:auto;touch-action:auto}.about *{touch-action:auto}.about.hidden{opacity:0;pointer-events:none}.about.hidden .content{transform:translateY(40px)}.about .content{background-color:white;padding:32px;border-radius:8px;box-shadow:0 8px 16px rgba(0,0,0,0.1);transition:transform .5s ease;width:800px;max-width:calc(100% - 32px);text-align:center;margin:auto}.about .content h1{margin-bottom:1em}.about .content h2{font-size:1.25rem;font-weight:bold;margin-bottom:1.5em}.about .content p{color:#666666;line-height:1.6em;max-width:680px;margin:0 auto 1.5em auto}.about .content p.small{font-size:.75rem}.about .content button{margin-top:2em}.toasts{position:absolute;right:16px;bottom:16px;z-index:10}.toasts .toast{position:absolute;right:0;bottom:0;background-color:white;box-shadow:0 4px 8px rgba(0,0,0,0.05);border-radius:4px;border:1px solid #cccccc;padding:8px 16px;font-size:.875rem;width:360px;max-width:calc(100vw - 32px);transition:transform .2s ease, margin .2s ease}.toasts .toast.hidden{transform:translateY(calc(100% + 8px))}.toasts .toast:nth-last-child(1){margin-bottom:0px}.toasts .toast:nth-last-child(2){margin-bottom:64px}.toasts .toast:nth-last-child(3){margin-bottom:128px}.toasts .toast:nth-last-child(4){margin-bottom:192px}.toasts .toast:nth-last-child(5){margin-bottom:256px}.toasts .toast:nth-last-child(6){margin-bottom:320px}.toasts .toast:nth-last-child(7){margin-bottom:384px}.toasts .toast:nth-last-child(8){margin-bottom:448px}.toasts .toast:nth-last-child(9){margin-bottom:512px}.toasts .toast:nth-last-child(10){margin-bottom:576px}.toasts .toast:nth-last-child(11){margin-bottom:640px}.toasts .toast:nth-last-child(12){margin-bottom:704px}.toasts .toast:nth-last-child(13){margin-bottom:768px}.toasts .toast:nth-last-child(14){margin-bottom:832px}.toasts .toast:nth-last-child(15){margin-bottom:896px}.toasts .toast:nth-last-child(16){margin-bottom:960px}.toasts .toast:nth-last-child(17){margin-bottom:1024px}.toasts .toast:nth-last-child(18){margin-bottom:1088px}.toasts .toast:nth-last-child(19){margin-bottom:1152px}.toasts .toast:nth-last-child(20){margin-bottom:1216px}.toasts .toast .row{display:flex}.toasts .toast .row i{flex:0 0 32px;width:32px;height:32px;align-self:center;margin-right:16px;border-radius:50%;background-color:#f6eeee;display:flex;justify-content:center;align-items:center;color:var(--color-primary)}.toasts .toast p{font-size:.75rem;line-height:1.6em}.toasts .toast p.small{color:#666666}.toasts .toast p .color{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-2px}.toasts .toast p .color:not(:last-child){margin-right:4px}.end{position:absolute;left:0;top:0;width:100%;height:100%;transition:opacity .3s ease;display:flex;justify-content:center;align-items:center;z-index:10}.end.hidden{opacity:0}.end.hidden .content{transform:translateY(32px)}.end .content{padding:32px;background-color:white;border-radius:8px;width:600px;max-width:calc(100% - 32px);text-align:center;transition:transform .3s ease;box-shadow:0 4px 8px rgba(0,0,0,0.05)}.end .content h1{font-size:3rem;letter-spacing:-.02em;margin-bottom:.5rem}.end .content h2{margin-bottom:.5em;transition:transform .3s ease, opacity .3s ease}.end .content h2.hidden{transform:translateY(16px);opacity:0}.end .content .icon{display:block;height:24px;transition:transform .3s ease, opacity .3s ease;color:var(--color-primary);font-size:.875rem}.end .content .icon.hidden{transform:translateY(8px);opacity:0}.end .content h3{color:var(--color-primary);font-size:.875rem;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:.5em}.end .content h4{font-size:.875rem;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:.5em}.end .content p{font-size:.875rem;color:#666666}.end .content p span.valid{font-weight:bold;color:green}.end .content p span.error{font-weight:bold;color:#c00}.end .content .row{display:flex;justify-content:center}.end .content .row>*{flex:1}.end .content button{margin:0 auto;transition:transform .3s ease, opacity .3s ease}.end .content button.hidden{transform:translateY(16px);opacity:0;pointer-events:none}.end .content button.primary{margin-top:2em;margin-bottom:1.5em;width:240px}.end .content button.primary:hover{transform:translateY(-4px)}.helpers .shapes{display:none}.palettes{position:fixed;top:92px;right:160px;background-color:white;border-radius:4px;box-shadow:0 4px 8px rgba(0,0,0,0.1);width:288px;transition:all .3s ease;z-index:300}.palettes:before{content:"";position:absolute;top:-8px;right:74px;border-bottom:8px solid white;border-right:8px solid transparent;border-left:8px solid transparent}.palettes.hidden{transform:translateY(32px);opacity:0;pointer-events:none}.palettes p{color:#666666;font-size:.875rem;padding:16px;text-align:center}.palettes ul{list-style:none;border-top:1px solid #dddddd}.palettes ul li{display:flex;align-items:center;cursor:pointer;padding:16px;color:#999999;font-weight:bold;user-select:none}.palettes ul li:not(:last-child){border-bottom:1px solid #dddddd}.palettes ul li div{width:12px;height:12px;border-radius:50%}.palettes ul li div:not(:last-of-type){margin-right:4px}.palettes ul li div:last-of-type{margin-right:12px}.palettes ul li span{position:relative;padding-right:24px;font-size:.875rem}.palettes ul li.selected{color:var(--color-primary);font-weight:bold;background-color:#f5f0f5}.palettes ul li.selected span::after{content:"\f00c";font-family:"Font Awesome 5 Free";font-weight:bold;font-size:.75rem;position:absolute;top:2px;right:4px}.palettes div.custom{border-top:1px solid #dddddd;padding:16px}.palettes div.custom.hidden{display:none}.palettes div.custom p{padding:0 0 24px 0;font-size:.75rem}.palettes div.custom>div{display:flex}.palettes div.custom>div div{flex:1;display:flex;flex-flow:column;align-items:center}.palettes div.custom>div div input[type="color"]{appearance:none;border:none;padding:0;margin:0;background-color:transparent;color:transparent;width:32px;height:32px;border-radius:50%;overflow:hidden}.palettes div.custom>div div input[type="color"]:focus{outline:none}.palettes div.custom>div div input[type="color"]::-webkit-color-swatch-wrapper{padding:0}.palettes div.custom>div div input[type="color"]::-webkit-color-swatch{border:none}.palettes div.custom>div div span{display:block;margin-top:12px;font-size:.75rem;color:#666666}.palettes .buttons{margin-top:1.5em}.palettes .buttons button{font-size:.875rem;color:#999999}.palettes .buttons button:hover{color:var(--color-primary)}.palettes .buttons button i{font-size:.75rem;margin-right:8px}.palettes .buttons button:not(:last-child){margin-bottom:0}main .background{position:absolute;top:0;right:0;width:866px;height:783px;background:url("/img/background.png");background-position:left -120px;background-repeat:no-repeat;opacity:.8}main section{position:relative;background-color:white;border-radius:8px;padding:40px 32px 240px 32px;box-shadow:0 4px 8px rgba(0,0,0,0.05);width:940px;max-width:calc(100% - 80px);margin:auto}main section h1{text-align:center;font-size:2.25rem;margin-bottom:2rem}main section h1 span{padding-left:.25em;border-width:3px;margin:0 6px}main section p{line-height:1.6em;color:#666666;text-align:center;max-width:680px;margin:0 auto 2em auto}main section .modes{position:absolute;width:calc(100% - 64px);display:flex;margin-top:2em;justify-content:center}main section .modes .mode{perspective:1000px;transition:transform .3s ease;transform-style:preserve-3d;backface-visibility:hidden}main section .modes .mode>div{flex:1;position:relative;height:240px;border-radius:8px;text-align:center;padding:32px 24px;box-shadow:0 0 8px rgba(0,0,0,0.1);background-color:white;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .2s ease}main section .modes .mode>div i{display:inline-flex;justify-content:center;align-items:center;width:64px;height:64px;font-size:1.5em;background-color:#f0dbf0;color:#a112a1;border-radius:50%;margin-bottom:1rem}main section .modes .mode>div i.fa-bolt::before,main section .modes .mode>div i.fa-mug-hot::before{margin-left:4px}main section .modes .mode>div p{margin-bottom:1em}main section .modes .mode>div h2{font-size:1rem;font-weight:bold;color:var(--color-primary);margin-bottom:1em}main section .modes .mode>div button{transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;transform:translateZ(8px);padding:16px 32px;width:180px}main section .modes .mode:not(.soon){cursor:pointer}main section .modes .mode:not(.soon):hover button{filter:hue-rotate(10deg)}main section .modes .mode.soon div{overflow:hidden}main section .modes .mode.soon div::before{content:"Soon";position:absolute;top:8px;right:-68px;padding:4px 80px;background:linear-gradient(#ac39ac, var(--color-primary));transform:rotate(30deg);color:white;font-size:.75rem;font-weight:bold;text-shadow:0 2px 2px rgba(0,0,0,0.1);text-transform:uppercase;letter-spacing:.1em}main section .modes .mode.main>div{margin-top:-24px;height:auto;padding-bottom:24px}main section .modes .mode.main>div:before{content:"";position:absolute;top:0;left:0;width:100%;height:6px;background:linear-gradient(#ac39ac, var(--color-primary));border-radius:8px 8px 0 0}main section .modes .mode:not(:last-child){margin-right:32px}.tutorial{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;z-index:200;padding:20px 0 32px 0;background-color:rgba(0,0,0,0.5);transition:opacity .5s ease;overflow:auto;touch-action:initial}.tutorial *{touch-action:initial}.tutorial.hidden{opacity:0;pointer-events:none}.tutorial.hidden .content{opacity:0;transform:translateY(40px)}.tutorial .content{background-color:white;width:620px;max-width:calc(100% - 32px);padding:32px 32px 24px 32px;box-shadow:0 4px 8px rgba(0,0,0,0.1);border-radius:8px;transition:transform .5s ease, opacity .3s ease;margin:auto}.tutorial .content h3{color:var(--color-primary);text-align:center;font-size:.875rem;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:.5em}.tutorial .content h2{margin-bottom:1em;text-align:center}.tutorial .content p{color:#666666;line-height:1.6em;text-align:center;margin-bottom:1.5em}.tutorial .content p.small{font-size:.75rem;max-width:360px;margin:0 auto 2em auto}.tutorial .content .row{display:flex}.tutorial .content .row:not(:last-child){margin-bottom:1em}.tutorial .content .row>*{flex:1}.tutorial .content .row>*:not(:last-child){margin-right:16px}.tutorial .content .row.buttons{margin-top:2em}.tutorial .content .row.buttons>button{flex:0 0 calc(50% - 8px)}.tutorial .content .row.buttons>button:only-child{flex:0 0 240px}.tutorial .content .box{position:relative;padding:16px;border-radius:8px;background-color:#f6f3f3}.tutorial .content .box::after{font-family:'Font Awesome 5 Free';position:absolute;top:-12px;right:-12px;background-color:white;border-radius:50%;font-size:1.2rem;font-weight:bold;border:4px solid white}.tutorial .content .box.valid::after{content:"\f058";color:#12a112}.tutorial .content .box.invalid::after{content:"\f057";color:#c33}.tutorial .content .box h4{text-align:center;color:#666666;margin-bottom:1em}.tutorial .content .box .row{justify-content:center}.tutorial .content .box .row>*{flex:0;text-align:center}.tutorial .content .box .row .card{margin:0 auto}.tutorial .content .box span{text-align:center;display:block;font-size:.75rem;color:#666666;margin-top:1em}.tutorial .content .card{position:relative;width:64px;height:88px}.tutorial .content .card svg{width:40px}.tutorial .content button{margin-bottom:0}.tutorial .content button.hidden{visibility:hidden}.tutorial .content button.tertiary{margin-top:1.5em}.tutorial .content button.primary,.tutorial .content button.secondary{transition:transform .2s ease, box-shadow .2s ease}.tutorial .content button.primary:hover:not(:active),.tutorial .content button.secondary:hover:not(:active){transform:translateY(-2px)}@media screen and (max-width: 900px){body{font-size:14px}.controls{font-size:16px;right:24px}.controls div:not(:last-child){margin-right:24px}main section{padding:32px 16px 240px 16px}main section h1{text-align:center;font-size:1.5rem;margin-bottom:1.5rem}main section h1 span{padding-left:.35em;border-width:2px;margin:0 4px}main section .modes{width:calc(100% - 32px)}main section .modes .mode:not(:last-child){margin-right:16px}}@media screen and (max-width: 800px){main .background{display:none}main section{padding:0 0 24px 0;background-color:transparent;box-shadow:none}main section h1{margin-bottom:1rem}main section>p{max-width:400px;margin-bottom:2.5rem}main section>p br{display:none}main section .modes{position:relative;width:100%;flex-flow:column;margin-top:2em}main section .modes .mode{margin-bottom:1em}main section .modes .mode:not(:last-child){margin-right:0}main section .modes .mode>div{display:flex;height:auto;padding:16px 16px 16px 24px}main section .modes .mode>div>*{flex:1}main section .modes .mode>div>*:not(:last-child){margin-right:24px}main section .modes .mode>div i{flex:0 0 40px;width:40px;height:40px;font-size:1rem;margin-bottom:0;align-self:center}main section .modes .mode>div i.fa-bolt::before,main section .modes .mode>div i.fa-mug-hot::before{margin-left:2px}main section .modes .mode>div>div h2{text-align:left;margin-bottom:.5em}main section .modes .mode>div>div p{text-align:left;margin-bottom:0}main section .modes .mode>div button{margin:0;flex:0;align-self:center;transform:none;width:auto}main section .modes .mode.main{order:-1}main section .modes .mode.main>div{margin-top:0;padding-bottom:16px}main section .modes .mode.main>div::before{height:100%;width:6px;border-radius:4px 0 0 4px}main section .modes .mode.soon>div{padding-right:32px}}@media screen and (max-width: 750px){main{height:calc(100% - 184px)}main .pause{height:100vh;padding-bottom:240px}main .end{top:24px}.controls span{display:none !important}.controls i{font-size:1.2em}.palettes{right:16px}aside{top:auto;bottom:-160px;height:240px;width:100%;transform:translateY(100%);display:flex;flex-flow:row wrap;transition:transform .3s ease 1s, bottom .3s ease-in-out;z-index:100}aside.open{bottom:0}aside.open .bot::after{transform:rotate(180deg)}aside .bot,aside .user{height:82px;padding-top:0;padding-bottom:0;border-bottom:2px solid #eeeeee}aside .bot:nth-child(1),aside .user:nth-child(1){border-right:2px solid #eeeeee}aside .bot h2,aside .user h2{font-size:.875rem}aside .bot p,aside .user p{font-size:.75rem}aside.openable .bot::after{color:var(--color-primary)}aside .bot{position:relative;padding-right:64px}aside .bot::after{content:"\f077";font-family:"Font Awesome 5 Free";font-weight:bold;position:absolute;bottom:12px;right:-15px;color:#dddddd;width:24px;height:22px;border-radius:50%;background-color:white;border:2px solid #eeeeee;display:flex;justify-content:center;align-items:center;padding-bottom:2px;transition:transform .3s ease, color .2s ease}aside .bot .difficulty{position:absolute;left:0;top:150px;width:100vw;margin-top:0;padding:24px}aside .bot .difficulty p{font-size:.875rem;margin-bottom:0}aside .bot .difficulty ul{justify-content:center}aside .bot .difficulty ul li{padding:8px}aside .user{padding-left:64px}aside .buttons{top:8px;width:100vw}aside .buttons button.main{position:relative;width:160px;height:auto;font-size:1rem;padding:16px}aside .buttons button.main span{display:none}aside .buttons button.secondary{position:absolute;width:100%;left:0;top:106px;padding:24px;border-bottom:2px solid #eeeeee}aside .sets-wrapper{width:0 !important;height:0 !important;margin:0 !important;overflow:hidden}.tutorial{padding-left:0}}@media screen and (max-width: 650px){.tutorial .content>.row:not(.buttons){display:block}.tutorial .content>.row:not(.buttons)>*:not(:last-child){margin-right:0;margin-bottom:1em}}@media screen and (max-width: 500px){header{height:64px}header h1{font-size:1.2rem}header h1 span:not(:last-child){margin-right:2px;padding-left:.4em}.controls{top:16px;right:24px}.controls div:not(:last-child){margin-right:12px}.controls div i{font-size:1em}.controls div.sound i.fa-volume-off{margin-right:4px}.palettes{top:76px}aside.visible ~ main{height:calc(100% - 168px)}main{top:64px;height:100%;transition:height .2s ease 1s}main section{max-width:calc(100% - 48px)}main section>h1,main section>p{display:none}main section .modes{margin-top:0}main section .modes .mode>div button{display:none}main section .modes .mode.main>div>div{margin-right:0}main .end{height:calc(100% - 168px)}}@media screen and (max-width: 350px){header{padding:0 8px}.controls{right:16px}.controls div:not(:last-child){margin-right:8px}}@media screen and (max-width: 1200px), (max-height: 750px){main .card{width:96px;height:132px}main .card svg{width:60px}}@media screen and (max-width: 950px), (max-height: 600px){main .card{width:64px;height:88px}main .card svg{width:40px}}@media screen and (max-height: 900px){aside .bot .sets-wrapper,aside .user .sets-wrapper{height:140px;width:105px}aside .bot .sets-wrapper .card,aside .user .sets-wrapper .card{transform:scale(0.6) translate(24px, 34px) !important;transform-origin:top left}main .card.locked:not(.set){transform:scale(0.6) translate(24px, 34px) !important;transform-origin:top left}}@media screen and (max-height: 800px){aside .bot .sets-wrapper,aside .user .sets-wrapper{height:86px;width:66px}aside .bot .sets-wrapper .card,aside .user .sets-wrapper .card{transform:scale(0.4) translate(18px, 24px) !important;transform-origin:top left}main .card.locked:not(.set){transform:scale(0.5) translate(18px, 24px) !important;transform-origin:top left}}@media screen and (max-height: 640px){aside .bot .sets-wrapper,aside .user .sets-wrapper{width:0 !important;height:0 !important;margin:0 !important;overflow:hidden}.card{z-index:0 !important}}
/*# sourceMappingURL=style.min.css.map */