*{margin:0;padding:0;box-sizing:border-box}html,body{width:100vw;overflow:hidden;font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif}body{background-color:#f3ffc6}.touch-device .webgl{width:75%}.touch-device kbd{width:25%;min-width:240px}.non-touch-device .webgl{width:100%}.non-touch-device kbd{display:none}.webgl,kbd{position:fixed;outline:none;height:100%}.webgl{top:0;left:0;z-index:-1}kbd{top:0;right:0;align-content:center;text-align:center;padding-top:3rem}kbd button{padding:1rem .75rem;background-color:transparent;border:none}header{display:flex;justify-content:space-between;padding:2rem;background-color:transparent}ul{display:flex;list-style-type:none;justify-content:end}li{padding:.5rem}li .fa-regular{opacity:.25}i{color:#b6174b}div{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;width:100%;height:100%;background-color:#f3ffc6;text-align:center;align-content:center}div h2{padding:1rem}div button{margin:1rem;padding:.5rem;background-color:#5b0b26;color:#f3ffc6;font-weight:700;border:none;border-radius:.75rem}div button[autofocus]:focus,div button:focus{background-color:#b6174b}@media (min-width: 600px) and (min-height: 600px){div{padding-inline:calc((100% - 600px)/2)}}