:root{--out: 0.5s ease 3s}*{box-sizing:border-box}html,body{width:100%;height:100%;min-height:100%;margin:0;padding:0;font-family:monospace,monospace}body{background:#000;color:#fff;overflow:hidden}#app{width:100%;height:100%;display:flex}canvas{display:block;width:100%;height:100%}#file{display:none}.ui{position:fixed;top:0;right:0;display:flex}.btn{background:#000;opacity:.3;padding:4px 8px;border:none;cursor:pointer;font-family:inherit}#hints{position:fixed;bottom:10px;width:100%;display:flex;justify-content:space-evenly;opacity:.5;transition:opacity var(--out),visibility var(--out);pointer-events:none;color:#fff}#hints.fade{opacity:0;visibility:hidden}#slides{min-width:240px;width:240px;padding:.5rem;display:none;flex-direction:column;gap:.5rem}.slider>span{position:absolute;bottom:0;left:50%;pointer-events:none;transform:translateX(-50%);opacity:.5;font-size:.7rem}