html,#root{position:fixed;top:0;left:0;width:100%;height:100%;background:black}.mr-dafoe-regular{font-family:Mr Dafoe,cursive;font-weight:400;font-style:normal}.interface{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none}.restart{display:flex;justify-content:center;position:absolute;top:40%;left:0;width:100%;color:#fff;font-size:80px;background:#00000055;padding-top:10px;pointer-events:auto}.controls{position:absolute;bottom:5%;right:0;width:14%}.controls .raw{display:flex;justify-content:center}.controls .key{display:flex;justify-content:center;align-items:center;width:40px;height:40px;margin:4px;border:2px solid #535353;background:#6d6d6d44}.controls .key.large{width:144px}.controls .key.active{background:#3a3a3a44}*{border:0;box-sizing:border-box;margin:0;padding:0}:root{--bg: #e3e4e8;--fg: #17181c;--dur: 8s}body{background:var(--bg);color:var(--fg);display:grid;place-items:center;align-content:center;height:100vh;letter-spacing:.1em;text-transform:uppercase}.hexagon{margin-bottom:1.5em;overflow:hidden;position:relative;width:15em;height:15em}.hexagon__group,.hexagon__sector,.hexagon__sector:before,.hexagon__sector:after{position:absolute}.hexagon__group{width:100%;height:100%}.hexagon__group:nth-child(2) .hexagon__sector,.hexagon__group:nth-child(2) .hexagon__sector:before,.hexagon__group:nth-child(2) .hexagon__sector:after{animation-delay:calc(var(--dur) * -1/6)}.hexagon__group:nth-child(3) .hexagon__sector,.hexagon__group:nth-child(3) .hexagon__sector:before,.hexagon__group:nth-child(3) .hexagon__sector:after{animation-delay:calc(var(--dur) * -2/6)}.hexagon__group:nth-child(4) .hexagon__sector,.hexagon__group:nth-child(4) .hexagon__sector:before,.hexagon__group:nth-child(4) .hexagon__sector:after{animation-delay:calc(var(--dur) * -3/6)}.hexagon__group:nth-child(5) .hexagon__sector,.hexagon__group:nth-child(5) .hexagon__sector:before,.hexagon__group:nth-child(5) .hexagon__sector:after{animation-delay:calc(var(--dur) * -4/6)}.hexagon__group:nth-child(6) .hexagon__sector,.hexagon__group:nth-child(6) .hexagon__sector:before,.hexagon__group:nth-child(6) .hexagon__sector:after{animation-delay:calc(var(--dur) * -5/6)}.hexagon__group:nth-child(odd){transform:rotate(30deg)}.hexagon__sector,.hexagon__sector:before,.hexagon__sector:after{animation-duration:var(--dur);animation-iteration-count:infinite;animation-timing-function:linear;width:.2em;height:.2em}.hexagon__sector{animation-name:moveOut1;top:calc(50% - .1em);left:calc(50% - .1em)}.hexagon__sector:nth-child(2){animation-name:moveOut2}.hexagon__sector:nth-child(3){animation-name:moveOut3}.hexagon__sector:nth-child(4){animation-name:moveOut4}.hexagon__sector:nth-child(5){animation-name:moveOut5}.hexagon__sector:nth-child(6){animation-name:moveOut6}.hexagon__sector:before,.hexagon__sector:after{animation-name:ripple;background-color:currentColor;border-radius:.1em;content:"";display:block;top:0;left:0;transform-origin:.1em .1em}.hexagon__sector:before{transform:rotate(-30deg)}.hexagon__sector:after{transform:rotate(-150deg)}@media (prefers-color-scheme: dark){:root{--bg: #17181c;--fg: #e3e4e8}}@keyframes moveOut1{0%{transform:translateY(0) scale(0)}3%{transform:translateY(.2em) scale(1)}97%{transform:translateY(7.3em) scale(1)}to{transform:translateY(7.5em) scale(0)}}@keyframes moveOut2{0%{transform:rotate(60deg) translateY(0) scale(0)}3%{transform:rotate(60deg) translateY(.2em) scale(1)}97%{transform:rotate(60deg) translateY(7.3em) scale(1)}to{transform:rotate(60deg) translateY(7.5em) scale(0)}}@keyframes moveOut3{0%{transform:rotate(120deg) translateY(0) scale(0)}3%{transform:rotate(120deg) translateY(.2em) scale(1)}97%{transform:rotate(120deg) translateY(7.3em) scale(1)}to{transform:rotate(120deg) translateY(7.5em) scale(0)}}@keyframes moveOut4{0%{transform:rotate(180deg) translateY(0) scale(0)}3%{transform:rotate(180deg) translateY(.2em) scale(1)}97%{transform:rotate(180deg) translateY(7.3em) scale(1)}to{transform:rotate(180deg) translateY(7.5em) scale(0)}}@keyframes moveOut5{0%{transform:rotate(240deg) translateY(0) scale(0)}3%{transform:rotate(240deg) translateY(.2em) scale(1)}97%{transform:rotate(240deg) translateY(7.3em) scale(1)}to{transform:rotate(240deg) translateY(7.5em) scale(0)}}@keyframes moveOut6{0%{transform:rotate(300deg) translateY(0) scale(0)}3%{transform:rotate(300deg) translateY(.2em) scale(1)}97%{transform:rotate(300deg) translateY(7.3em) scale(1)}to{transform:rotate(300deg) translateY(7.5em) scale(0)}}@keyframes ripple{0%,to{width:.2em}33%{width:2.4em}}