body{margin:0;padding:0;background:#fff}.app{min-height:100vh;display:flex;justify-content:center;align-items:center}.drum-pad{height:100px;width:100px;border:1px solid black;cursor:pointer;display:flex;justify-content:center;align-items:center;background:#fff;font-weight:700;font-size:18px;-webkit-user-select:none;user-select:none}.clip{display:none}#drum-machine{margin:40px auto 0;background:#fff;justify-content:center;flex-direction:column;align-items:center;display:flex;gap:30px;padding:20px;border-radius:10px;box-shadow:0 4px 8px #0000001a}.paadd{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:320px;justify-items:center}.slider{width:300px;height:8px;border-radius:5px;background:#ddd;outline:none;cursor:pointer}#display{text-align:center;background:#f0f0f0;width:300px;height:50px;display:flex;justify-content:center;align-items:center;border:2px solid #333;border-radius:5px;font-size:16px}