@import "https://fonts.googleapis.com/css2?family=Clarity+City:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap";*{box-sizing:border-box}body{background:linear-gradient(239deg,#b39b44 0%,#b8a421 50%,#bf8d47 100%);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:0;font-family:Clarity City,sans-serif;display:flex}.app{justify-content:center;align-items:center;height:75vh;display:flex}.app .drum-machine{background:linear-gradient(253deg,#ffb303 0%,#ffb05c 100%);border-radius:20px;justify-content:center;align-items:center;gap:20px;padding:25px 45px;display:flex}@media (width<=768px){.app{height:100vh;padding-top:100px;padding-bottom:100px}.app .drum-machine{flex-direction:column;padding:25px 20px}}.controls{flex-direction:column;justify-content:space-evenly;align-items:center;gap:30px;width:100%;margin:10px 0;font-family:Nunito Sans,sans-serif;display:flex}.controls #display{text-align:center;color:#fff;background-color:#ff8605;border:2px solid #663a0b;border-radius:20px;width:100%;padding:10px;font-size:1.2rem;font-weight:800}.controls .select{box-sizing:border-box;justify-content:space-between;align-items:center;gap:16px;width:300px;min-width:0;display:flex}.controls .select>span:first-of-type{justify-content:space-evenly;align-items:center;gap:8px;min-width:0;display:flex}.controls .select>span:first-of-type span:first-of-type{font-weight:700}.controls .select>span:first-of-type span{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.controls .toggle-container{flex:none;align-items:center;width:50px;height:24px;display:inline-flex;position:relative}.controls .toggle-container input[type=checkbox]{opacity:0;width:0;height:0;position:absolute}.controls .toggle-container .slider{cursor:pointer;background:radial-gradient(circle,#fff 0%,#c9c9c9d9 100%);border-radius:12px;transition:background .25s,box-shadow .25s;position:absolute;inset:0}.controls .toggle-container .slider:before{content:"";background:silver;border-radius:50%;width:18px;height:18px;transition:transform .25s,background .25s;position:absolute;bottom:3px;left:1px;box-shadow:0 1px 2px #0003}.controls .toggle-container input:checked+.slider{background:radial-gradient(circle,#f9582b 0%,#e3812bd9 100%)}.controls .toggle-container input:checked+.slider:before{transform:translate(26px)}.controls .toggle-container input#power-toggle:checked+.slider{box-shadow:0 0 0 4px #28a7451f}.controls .toggle-container input:focus-visible+.slider{outline-offset:2px;outline:2px solid #ffd9c0}.controls .volume-slider{width:100%}.controls .volume-slider label{margin-bottom:5px;font-size:.9em;display:block}.controls .volume-slider label span{float:right;font-variant-numeric:tabular-nums}.controls .volume-slider input[type=range]{appearance:none;background:#f9582b;border-radius:8px;width:100%;height:12px;margin-bottom:10px}.controls .volume-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:silver;border-radius:50%;width:14.8px;height:14.8px}.controls .volume-slider input[type=range]::-webkit-slider-thumb:active{background:#e0e0e0}.controls .volume-slider input[type=range]:focus-visible{outline-offset:2px;outline:2px solid pink}.controls .control-section{flex-direction:column;align-items:center;gap:8px;display:flex}.pad{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:8px 5px;display:grid}.pad .pad_button{color:#f0f0f0;cursor:pointer;background:linear-gradient(228deg,#b56a28 0%,#e08026 35%,#d9a925 100%);border:2px solid #b56a28;border-radius:12px;width:100px;height:100px;font-size:1.5rem;font-weight:700;transition:all .2s ease-in-out;box-shadow:0 4px #b56a28}.pad .pad_button:hover{background:linear-gradient(228deg,#b56a28 0%,#e6a467 35%,#ebcb73 100%)}.pad .pad_button:active,.pad .pad_button.active{background:linear-gradient(228deg,#e08026 0%,#d9a925 35%,#b56a28 100%);transform:translateY(2px);box-shadow:0 2px #666}.pad .pad_button:disabled{cursor:not-allowed;filter:grayscale(.45);opacity:.55}.pad .pad_button:disabled:hover{background:linear-gradient(228deg,#b56a28 0%,#e08026 35%,#d9a925 100%)}