@charset "UTF-8";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:400;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}.content{background-color:#fff;width:300px;margin:30px auto 0;padding:12px}@keyframes rotate_up{0%{transform:rotateY(0);z-index:1}to{transform:rotateX(90deg);z-index:-1}}@keyframes rotate_up_out{0%{transform:rotateY(0) scale(.95);z-index:1}to{transform:rotateX(90deg) scale(.95);z-index:-1}}@keyframes rotate_down{0%{transform:rotateY(0);z-index:1}to{transform:rotateX(-90deg);z-index:-1}}@keyframes rotate_down_out{0%{transform:rotateY(0) scale(.95);z-index:1}to{transform:rotateX(-90deg) scale(.95);z-index:-1}}@keyframes rotate_left{0%{transform:rotateY(0);z-index:1}to{transform:rotateY(-90deg);z-index:-1}}@keyframes rotate_left_out{0%{transform:rotateY(0) scale(.95);z-index:1}to{transform:rotateY(-90deg) scale(.95);z-index:-1}}@keyframes rotate_right{0%{transform:rotateY(0);z-index:1}to{transform:rotateY(90deg);z-index:-1}}@keyframes rotate_right_out{0%{transform:rotateY(0) scale(.95);z-index:1}to{transform:rotateY(90deg) scale(.95);z-index:-1}}@keyframes pan_up{0%{transform:translate(0) scale(.95);z-index:2}to{transform:translateY(-100%) scale(.95);z-index:2}}@keyframes pan_down{0%{transform:translate(0) scale(.95);z-index:2}to{transform:translateY(100%) scale(.95);z-index:2}}@keyframes pan_left{0%{transform:translate(0) scale(.95);z-index:2}to{transform:translate(-100%) scale(.95);z-index:2}}@keyframes pan_right{0%{transform:translate(0) scale(.95);z-index:2}to{transform:translate(100%) scale(.95);z-index:2}}body .viewer .cube .side,body .viewer .cube{position:absolute;inset:0}body .viewer .cube .side{border:10px solid rgba(0,0,0,.5333333333);border-collapse:collapse}body .viewer .cube .side{transform-origin:50% 50% -150px}html,body{height:100%}b{font-weight:bolder;color:#404040}p{margin-bottom:5px}body{background-color:gray;font-family:monospace;-webkit-user-select:none;user-select:none}body .main_title{text-align:center;height:60px;padding:20px 0}body *{outline:5px solid transparent;box-sizing:border-box}body .viewer{overflow:hidden;width:300px;height:300px;position:relative;transform-style:preserve-3d;margin:0 auto 50px}body .viewer .play{position:absolute;display:inline-block;padding:10px 0;font-weight:700;border:5px solid white;width:100px;font-size:1.3rem;height:50px;cursor:pointer;text-align:center;left:calc(50% - 50px);top:calc(50% - 25px);z-index:3;background:teal;box-shadow:0 0 10px #363636;color:#fff}body .viewer .cube{transition:transform .2s linear;perspective:500px}body .viewer .cube .side.current.pan.up{animation:pan_up .8s linear}body .viewer .cube .side.next.pan.up{animation:pan_down .8s linear;animation-direction:reverse}body .viewer .cube .side.current.pan.left{animation:pan_left .8s linear}body .viewer .cube .side.next.pan.left{animation:pan_right .8s linear;animation-direction:reverse}body .viewer .cube .side.current.pan.down{animation:pan_down .8s linear}body .viewer .cube .side.next.pan.down{animation:pan_up .8s linear;animation-direction:reverse}body .viewer .cube .side.current.pan.right{animation:pan_right .8s linear}body .viewer .cube .side.next.pan.right{animation:pan_left .8s linear;animation-direction:reverse}body .viewer .cube .side.current.rotate.up{animation:rotate_up .8s linear}body .viewer .cube .side.current.rotate.up.out{transform-origin:50% 50% 150px;animation:rotate_down_out .8s linear}body .viewer .cube .side.next.rotate.up{animation:rotate_down .8s linear;animation-direction:reverse}body .viewer .cube .side.next.rotate.up.out{transform-origin:50% 50% 150px;animation:rotate_up_out .8s linear;animation-direction:reverse}body .viewer .cube .side.current.rotate.left{animation:rotate_left .8s linear}body .viewer .cube .side.current.rotate.left.out{transform-origin:50% 50% 150px;animation:rotate_right_out .8s linear}body .viewer .cube .side.next.rotate.left{animation:rotate_right .8s linear;animation-direction:reverse}body .viewer .cube .side.next.rotate.left.out{transform-origin:50% 50% 150px;animation:rotate_left_out .8s linear;animation-direction:reverse}body .viewer .cube .side.current.rotate.down{animation:rotate_down .8s linear}body .viewer .cube .side.current.rotate.down.out{transform-origin:50% 50% 150px;animation:rotate_up_out .8s linear}body .viewer .cube .side.next.rotate.down{animation:rotate_up .8s linear;animation-direction:reverse}body .viewer .cube .side.next.rotate.down.out{transform-origin:50% 50% 150px;animation:rotate_down_out .8s linear;animation-direction:reverse}body .viewer .cube .side.current.rotate.right{animation:rotate_right .8s linear}body .viewer .cube .side.current.rotate.right.out{transform-origin:50% 50% 150px;animation:rotate_left_out .8s linear}body .viewer .cube .side.next.rotate.right{animation:rotate_left .8s linear;animation-direction:reverse}body .viewer .cube .side.next.rotate.right.out{transform-origin:50% 50% 150px;animation:rotate_right_out .8s linear;animation-direction:reverse}body .viewer.moving .cube{transform:scale(.8)}body .viewer.moving .cube .hint{display:none}body .viewer.reset{transition:transform 1s;transform:rotate(-360deg)}body .viewer.reset .side{transition:background-color 1s}body .viewer.next-figure{transition:transform 1s;transform:rotateX(180deg) rotateY(180deg) rotate(180deg)}body .viewer.next-figure .side{transition:background-color 2s}@media(-webkit-min-device-pixel-ratio:2){body .viewer.moving .cube{transform:scale(.7)}}body .bottom{display:flex;flex-direction:row;align-items:center;justify-content:center}body .bottom .share a,body .bottom .settings,body .bottom .settings:before{width:32px;height:32px;line-height:32px}body .bottom .share a,body .bottom .settings{margin:0 10px;display:inline;filter:drop-shadow(0 0 10px #363636)}body .bottom .share{display:flex}body .bottom .share a.twitter{background-image:url(/images/twitter.svg)}body .bottom .share a.facebook{background-image:url(/images/facebook.svg)}body .bottom .settings{position:relative;cursor:pointer}body .bottom .settings:before{position:absolute;content:"";text-align:center;background-image:url(/images/cog.svg);background-size:contain;font-size:2rem;top:0;left:0}@keyframes ripple-out{to{color:tomato;text-shadow:0 -3rem 5px white}}body .controls{text-align:center;margin-bottom:18px}body .controls div{display:inline-block;padding:10px 0;font-weight:700;border:5px solid white;width:100px;font-size:1rem;cursor:pointer;box-shadow:0 0 10px #363636;vertical-align:middle}body .controls .help{background-color:#7b68ee;color:#fff}body .controls .guess{background-color:#9acd32;color:#000}body .controls .counter{font-size:2.2rem;padding:6px 0;width:80px;background-color:teal;color:#fff;box-shadow:none;cursor:initial;line-height:1;height:54px}body .controls .counter.ripple{animation:ripple-out .2s}.overlay .modal .button{margin:5px;width:calc(50% - 10px);height:calc(31% - 20px);border:10px solid white;display:flex;justify-content:center;align-items:center;background-color:#9acd32;cursor:pointer;text-align:center}.overlay .modal .button .floor{transform:rotateX(60deg) rotate(20deg) translateZ(-1rem);transform-style:preserve-3d}.overlay .modal .button .floor .row{display:block;transform-style:preserve-3d}.overlay .modal .button .floor .mini-cube,.overlay .modal .button .floor .mini-cube:after,.overlay .modal .button .floor .mini-cube:before{box-shadow:inset 0 0 0 .2rem #0000004d;content:"";float:left;height:2rem;position:absolute;width:2rem}.overlay .modal .button .floor .mini-cube{background-color:tomato;position:relative;transform:translateZ(2rem);transform-style:preserve-3d}.overlay .modal .button .floor .mini-cube:after{background-color:#e02200;transform-origin:100% 100%;transform:rotateX(-90deg) translateY(2rem) translate(-1rem)}.overlay .modal .button .floor .mini-cube:before{background-color:#ad1a00;transform-origin:100% 0;transform:rotateY(90deg) translate(2rem) translateZ(-1rem)}.overlay .modal .button .floor .mini-cube.transparent{opacity:0}.overlay .modal .tutorial.button{width:calc(100% - 10px);height:calc(50% - 20px);font-size:1rem;line-height:1.6rem;cursor:initial}.overlay .modal .tutorial.button .mini-cube,.overlay .modal .tutorial.button .mini-cube:after,.overlay .modal .tutorial.button .mini-cube:before{background-color:#d3d3d3}.overlay .modal .tutorial.step1.button .mini-cube:nth-child(1){background-color:#7b68ee}.overlay .modal .tutorial.step2.button .mini-cube:nth-child(1):after{background-color:orange}.overlay .modal .tutorial.step3.button .mini-cube:nth-child(2):after{background-color:orange}.overlay .modal .tutorial.step4.button .mini-cube:after{background-color:orange}.overlay .modal .tutorial.step4.button .mini-cube:before{background-color:#ff0}.overlay .modal .tutorial.step4.button .mini-cube{background-color:#7b68ee}.overlay{position:fixed;left:0;top:0;width:100%;height:100%;text-align:center;z-index:1000;background-color:#0000004d;transition:opacity 2s;opacity:0}.overlay.show{opacity:1}.overlay .modal{width:350px;height:80vh;max-height:450px;margin:10vh auto 0;background-color:#d3d3d3;position:relative;padding:2rem .5rem;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}.overlay .modal .title{font-size:2rem;width:100%}.overlay .modal .next{cursor:pointer;position:absolute;font-size:1.2rem;font-weight:bolder;right:0;top:0;padding:10px;color:#7b68ee}.overlay .modal .close{cursor:pointer;position:absolute;left:10px;top:10px;color:red;height:1.2rem;width:1.2rem}.overlay .modal .close:after,.overlay .modal .close:before{content:"";top:0;bottom:0;position:absolute;border-right:3px red solid}.overlay .modal .close:after{transform:translate(-1.5px) rotate(45deg)}.overlay .modal .close:before{transform:translate(-1.5px) rotate(-45deg)}.overlay .modal .button.solved{position:relative}.overlay .modal .button.solved:after{position:absolute;width:1rem;height:1rem;bottom:0;right:0;text-align:center;content:"✓";font-size:1rem}.overlay .modal .text{margin:5px}.overlay .modal .text.big{line-height:2rem;font-size:1.5rem;height:calc(50% - 20px)}.overlay .modal .text.small{font-size:1rem}button,output{font:inherit}button{appearance:none}body .controls{display:flex;justify-content:center;align-items:center}body .controls>*{display:inline-block;padding:10px 0;font-weight:700;border:5px solid white;width:100px;font-size:1rem;cursor:pointer;box-shadow:0 0 10px #363636;vertical-align:middle;text-align:center;height:46px}body .viewer{touch-action:none}body .viewer .play,.overlay .modal button,.bottom button{font-family:monospace}.overlay .modal>.next,.overlay .modal>.close{border:0;background:transparent}.overlay .modal .button{padding:0;color:#000;text-decoration:none}.overlay .modal .showcase-figure{cursor:default}.overlay .modal .result-copy{width:100%;height:auto}.overlay .modal .result-figure{height:45%}.overlay .modal .result-share{display:flex;justify-content:center;width:100%}.overlay .modal .result-share .button{height:60px}.overlay .modal .language{text-transform:uppercase;font-size:1.3rem}.bottom .settings{border:0;padding:0;background:transparent}.bottom .share a{background-repeat:no-repeat;background-position:center;background-size:contain}a:focus-visible,button:focus-visible{outline-color:#fff}@media(max-width:370px){body .viewer,.content{width:min(300px,100vw - 20px)}.overlay .modal{width:calc(100vw - 20px)}body .controls>*{width:calc((100vw - 100px)/2);min-width:78px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;transition-duration:1ms!important}}
