*{box-sizing:border-box;margin:0;padding:0}html,body{font-optical-sizing:auto;font-family:Montserrat,sans-serif;font-style:normal;font-weight:500}body{overflow:hidden}#root{background-color:var(--current-color);width:100vw;height:100vh;overflow:hidden}.hint-wrapper{width:100vw;height:100vh;position:absolute;top:0;left:0}.hint{flex-direction:column;justify-content:center;align-items:center;width:auto;height:100%;margin:0 auto;padding:2rem;display:flex}@media (orientation:landscape){.hint{flex-direction:row}}.hint-image-wrapper{aspect-ratio:1;justify-content:center;align-items:center;display:flex}.hint-image{max-width:60%;display:block}.hint-text{text-align:center;margin-top:1rem;padding:1rem;font-size:3rem}.hint-hide-instruction{text-align:center;margin-top:.5rem;font-size:2rem}.opacity-transition{transition:opacity .3s ease-in-out}.hide{opacity:0}@keyframes leftRight{0%{transform:translate(-20%)}50%{transform:translate(20%)}to{transform:translate(-20%)}}@keyframes upDown{0%{transform:translateY(-20%)}50%{transform:translateY(20%)}to{transform:translateY(-20%)}}@keyframes tap{0%{transform:translateY(0)}50%{transform:translateY(20%)}to{transform:translateY(0)}}.hint-image-left-right{animation:2.5s ease-in-out infinite leftRight}.hint-image-up-down{animation:2.5s ease-in-out infinite upDown}.hint-image-tap{animation:1s ease-in-out infinite tap}.control-wrapper{justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:absolute;top:0;left:0;overflow:hidden}.control{z-index:100;flex:1 1 0;grid-template-rows:minmax(auto,1fr) auto minmax(auto,1fr);gap:1rem;max-width:100vw;max-height:90vh;padding:2rem;transition:transform .3s ease-in-out;display:grid}.control-row{grid-auto-columns:1fr;grid-auto-flow:column;gap:1rem;display:grid}.control-text{text-align:center;padding:0 1rem;font-size:2.5rem}.control-item{cursor:pointer;background-color:#fff;border:.5rem solid #000;border-radius:2rem;justify-content:center;align-items:center;width:100%;height:100%;padding:1rem;display:flex}.control-icon{object-fit:contain;width:6rem;height:6rem}.control-hidden{transform:translateY(150vh)}.control-item-none{display:none}.animation{transition:transform .3s ease-in-out}.animation-hidden{transform:translateY(-150vh)}.animation-content{gap:1rem;margin-top:1rem;display:flex}@media (orientation:portrait){.animation-content{flex-direction:column}}@media (orientation:landscape){.animation-content{flex-direction:row}}.animation-grid{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr);gap:1rem;display:grid}.animation-item{cursor:pointer;background-color:var(--current-color);border-width:.5rem;border-radius:2rem;justify-content:center;align-items:center;min-width:20vw;min-height:20vh;font-size:2.5rem;display:flex}.animation-controls{flex-direction:column;gap:1rem;display:flex}.animation-controls>*{flex:1 1 0}#animation-back{border:.5rem solid #000}.animation-item-pick{border-style:dashed}.animation-item-picked{border-style:solid}@keyframes animation-0{0%{filter:brightness(.5)}50%{filter:brightness()}to{filter:brightness(.5)}}.animation-0{animation:3s ease-in-out infinite animation-0}@keyframes animation-1{0%{filter:brightness(0)}50%{filter:brightness()}to{filter:brightness(0)}}.animation-1{animation:3s ease-in-out infinite animation-1}@keyframes animation-2{0%{filter:brightness(0)}to{filter:brightness()}}.animation-2{animation:1s steps(2,jump-none) infinite animation-2}@keyframes animation-3{0%{filter:hue-rotate()}to{filter:hue-rotate(360deg)}}.animation-3{animation:5s linear infinite animation-3}@keyframes animation-4{0%{filter:hue-rotate()}to{filter:hue-rotate(360deg)}}.animation-4{animation:3.5s steps(7,jump-none) infinite animation-4}.animation-5{filter:hue-rotate(var(--random-hue-factor));transition:filter .5s linear}
/*$vite$:1*/