:root{-webkit-user-select:none;user-select:none;min-height:100dvh;scrollbar-width:thin;scroll-behavior:smooth;background-size:cover;accent-color:var(--pink);background-color:var(--black);background-image:url(/drum-machine/assets/background-Ci4zzIii.webp);font-family:Oswald Variable,fantasy;--black: #111;--white: snow;--pink: deeppink;--orange: darkorange;--blue: deepskyblue;--shadow: 0 0 3px 1px}body{display:flex;min-height:100dvh;flex-direction:column;align-items:center}body header{color:var(--white);margin-top:1rem;margin-bottom:-1rem}body header h1{gap:.25rem;display:flex;font-weight:500;text-align:center;font-size:1.125rem;flex-direction:column}body header h1 span{font-size:1rem;font-weight:400}body header h1 span a{font-style:italic;color:var(--pink);transition:color .15s linear}body header h1 span a:hover{color:var(--orange)}body main{display:inherit;justify-content:center;flex-direction:column;flex-grow:1}#drum-machine{gap:1rem;padding:2rem;display:inherit;border-radius:1rem;background:var(--blue);border-left:.375rem solid var(--pink);border-right:.375rem solid var(--orange)}#drum-machine #drum-pads{gap:.5rem;display:grid;grid-template-columns:1fr 1fr 1fr}.drum-pad{padding:0;width:2rem;height:2rem;outline:none;line-height:1;cursor:pointer;font-weight:700;font-size:1.125rem;color:var(--white);border-radius:1rem;background:var(--black);border:.125rem solid var(--pink);box-shadow:var(--shadow) var(--pink);font-family:Cantarell,sans-serif}.drum-pad:hover{border-color:var(--orange);box-shadow:var(--shadow) var(--orange)}.drum-active{color:var(--black);background:var(--orange);border-color:var(--orange);box-shadow:var(--shadow) var(--orange)}#controls{gap:1rem;display:inherit;min-width:7.5rem;align-items:center;flex-direction:column}#controls #display{width:7rem;min-height:1.9rem;text-align:center;padding:.375rem .5rem;border-radius:.375rem;background:var(--black);color:var(--white)}#volume{gap:.25rem;display:flex;min-width:100%;align-items:center}#volume #volume-icon{min-width:1.25rem}#volume #volume-bar{width:6rem;cursor:grab;outline:none;height:.375rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.375rem;background:var(--black)}#volume #volume-bar::-webkit-slider-thumb{width:.75rem;height:1.125rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.375rem;background:var(--black);border:.125rem solid var(--pink)}#volume #volume-bar::-moz-range-thumb{width:.5rem;height:.875rem;background:var(--black);border:.125rem solid var(--pink)}#volume #volume-bar:hover::-webkit-slider-thumb{border-color:var(--orange)}#volume #volume-bar:hover::-moz-range-thumb{border-color:var(--orange)}#volume #volume-bar:active{cursor:grabbing}#switch{gap:.25rem;width:7rem;height:.375rem;display:inherit;align-items:center;margin-top:.5rem}#switch #toggle{position:absolute;visibility:hidden}#switch #slider{width:4rem;height:1.5rem;cursor:pointer;position:relative;border-radius:.75rem;background:var(--black)}#switch #slider:after{content:"";top:.25rem;left:.25rem;width:1rem;height:1rem;position:absolute;border-radius:1rem;background:var(--pink);transition:left .15s,transform .15s}#switch #slider:hover:after{background:var(--orange)}#switch p{font-size:1.5rem}#toggle:checked+#slider:after{left:calc(100% - .25rem);transform:translate(-100%)}/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */*,:before,:after{box-sizing:border-box}html{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";line-height:1.15;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}@font-face{font-family:Oswald Variable;font-style:normal;font-display:swap;font-weight:200 700;src:url(/drum-machine/assets/oswald-cyrillic-ext-wght-normal-DbOppiSS.woff2) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Oswald Variable;font-style:normal;font-display:swap;font-weight:200 700;src:url(/drum-machine/assets/oswald-cyrillic-wght-normal-CTOgAtCf.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Oswald Variable;font-style:normal;font-display:swap;font-weight:200 700;src:url(/drum-machine/assets/oswald-vietnamese-wght-normal-Ce-u7gGO.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Oswald Variable;font-style:normal;font-display:swap;font-weight:200 700;src:url(/drum-machine/assets/oswald-latin-ext-wght-normal-905GevJw.woff2) format("woff2-variations");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Oswald Variable;font-style:normal;font-display:swap;font-weight:200 700;src:url(/drum-machine/assets/oswald-latin-wght-normal-CuJ2OKNG.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Cantarell;font-style:normal;font-display:swap;font-weight:400;src:url(/drum-machine/assets/cantarell-latin-ext-400-normal-dZK91ZPd.woff2) format("woff2"),url(/drum-machine/assets/cantarell-latin-ext-400-normal-B-s9vxh6.woff) format("woff");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Cantarell;font-style:normal;font-display:swap;font-weight:400;src:url(/drum-machine/assets/cantarell-latin-400-normal-3d18yISl.woff2) format("woff2"),url(/drum-machine/assets/cantarell-latin-400-normal-ChdNs54F.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}