body{margin:0;font-family:sans-serif;background-color:#111;color:#fff;display:flex;flex-direction:column;align-items:center;padding:1rem}*{user-select:none;-webkit-user-select:none}h1{margin:0 0 1rem}.menu-toggle{position:absolute;top:1rem;left:1rem;font-size:1.5rem;background:none;border:none;color:#fff;cursor:pointer;z-index:1000}.menu{position:absolute;top:3.5rem;left:1rem;background-color:#222;border:1px solid #444;border-radius:.5rem;padding:.5rem 1rem;display:none;flex-direction:column;gap:.5rem;z-index:1000}.menu button{background-color:#333;border:none;color:#fff;padding:.5rem;border-radius:.3rem;cursor:pointer}.menu button:hover{background-color:#444}.soundboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:1rem;width:100%;max-width:600px}.button{border:2px solid #444;padding:1rem;height:4.5rem;text-align:center;border-radius:.5rem;cursor:pointer;transition:background-color .2s;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.9rem}.button span.emoji{font-size:1.5rem;margin-bottom:.3rem}.button:hover{filter:brightness(1.1)}.button:active{filter:brightness(1.2)}.button.active{outline:2px solid #fff}.progress{position:absolute;bottom:0;left:0;height:4px;background-color:#fff;width:0%;transition:width .25s linear}audio{display:none}