html,body{height:100%;width:100%;overflow:auto;margin:0;padding:0;overflow:hidden}body{-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.webgl{top:0;left:0;height:100%;width:100%;outline:none}.joy{bottom:30px;left:26px;width:152px;height:152px;position:absolute;box-shadow:0px 0px 0px 2px rgba(214,203,171,.75)}.joy,.stick{border-radius:100%}.stick{box-shadow:0px 0px 0px 6px #1e1e14;position:absolute;left:48px;top:48px;width:56px;height:56px}.btn{user-select:none;all:unset;right:30px;width:60px;height:60px;border-radius:100%;box-shadow:0px 0px 0px 6px #1e1e14}.btn--up{bottom:110px}.btn--down{bottom:33px;right:60px}.btn--reset{visibility:hidden;background-image:url(reset.svg);background-repeat:no-repeat;background-position:center;background-size:60%;bottom:194px}.btn--up::before,.btn--down::before{content:"";width:16px;height:16px;position:absolute;top:50%;left:50%;transform-origin:center}.btn--up::before{box-shadow:4px 4px 0px 0px rgba(214,203,171,.75);transform:translate(-50%) translateY(0) rotate(-135deg)}.btn--down::before{box-shadow:-4px -4px 0px 0px rgba(214,203,171,.75);transform:translate(-50%,-50%) translateY(-8px) rotate(-135deg)}.joy--active,.btn--active{transition:none!important;filter:brightness(1.25)}.btn.btn--visible{visibility:visible;opacity:1}.joy,.btn{display:none;transition:opacity .2s linear;visibility:hidden;opacity:0;will-change:opacity;background-color:#d6cbab40}@media (hover: none){.joy,.btn{display:block}}.webgl,.joy,.btn{position:fixed}#overlay{transition:opacity .2s linear,visibility 0s .2s linear;position:fixed;z-index:2;height:100%;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#1e1e14;will-change:opacity}#overlay.removed{opacity:0;visibility:hidden}.loading{position:relative}.bar{position:absolute;top:50%;transform:translateY(-50%);height:0;width:100%;padding-bottom:100%;overflow:hidden}#progress{position:absolute;transition:transform .2s ease;content:"";display:block;background-color:#d6cbab;transform:translateX(-100%);height:6px;width:100%;border-radius:20% 10% 30% 10%;bottom:5.5%;will-change:transform}.loading svg{height:100vh;max-height:calc(100vh - 100px);max-width:100%}#keys{transition:opacity .5s linear;pointer-events:none;opacity:0;position:fixed;right:30px;bottom:33px;z-index:1;width:50%;max-width:400px;min-width:260px}@keyframes key-animation{0%{transform:translateY(0);filter:brightness(1)}15%{transform:translateY(1.5rem);filter:brightness(1.25)}30%{transform:translateY(0);filter:brightness(1)}45%{transform:translateY(1.5rem);filter:brightness(1.25)}60%,to{transform:translateY(0);filter:brightness(1)}}#keys g{opacity:1}.key--hinting{animation:1.2s step-end infinite key-animation}@media (hover: none){#keys{display:none}}