*{box-sizing:border-box;margin:0;padding:0;font-family:monospace,sans-serif}:root{--btn-bg-color:#282a2b80;--btn-bg-color-hover:#23272a;--btn-bg-color-active:#151a1d;--btn-text-color:#fff;--btn-shadow-color:#4c505092;--btn-shadow-color-hover:#5f6060c5;--btn-shadow-color-active:#5f6060f8;min-height:100dvh}canvas{isolation:isolate;display:block;position:fixed;top:0;left:0}#back-btn{z-index:1000;background-color:var(--btn-bg-color);color:var(--btn-text-color);box-shadow:0 0 3rem var(--btn-shadow-color);border:none;justify-content:center;align-items:center;width:48px;height:48px;display:flex;position:fixed;top:0;left:0}#back-btn:hover{background-color:var(--btn-bg-color-hover);box-shadow:0 0 3rem var(--btn-shadow-color-hover)}#back-btn:active{background-color:var(--btn-bg-color-active);box-shadow:0 0 3rem var(--btn-shadow-color-active)}#ui{visibility:hidden;bottom:1rem;z-index:1000;padding-block:2rem;position:fixed;inset-inline:1rem}#ui:hover #content{opacity:1;translate:0 2rem}#ui #content{opacity:.2;border-radius:1rem;gap:1rem;width:min(100%,24rem);padding:1rem;transition:all .5s ease-in-out .2s;display:flex;translate:0 100%}#ui #content button{text-wrap:nowrap;background-color:var(--btn-bg-color);box-shadow:0 0 3rem var(--btn-shadow-color);color:var(--btn-text-color);fill:var(--btn-text-color);stroke:var(--btn-text-color);cursor:pointer;border:none;border-radius:0;justify-self:center;padding:1rem 2rem;font-size:1rem;transition:background-color .3s}#ui #content button:hover{background-color:var(--btn-bg-color-hover)}#ui #content button:active{background-color:var(--btn-bg-color-active)}#ui #content button#fullscreen-btn{padding-inline:1.4rem}#ui #content button#fullscreen-btn svg{width:1.5rem;height:1.5rem}#ui #content button#fullscreen-btn span.hidden{display:none}#credits{color:#fff;background:#00000080;padding:.2rem .5rem;font-size:.8rem;position:fixed;bottom:.2rem;right:.2rem}#credits a{color:#fff;text-decoration:underline}#credits a:hover{color:#0cc9cc}