#root{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;height:100%}header,footer{padding:1.5rem 1rem}header{text-align:center}main{flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;max-width:32rem;width:100%;margin-left:auto;margin-right:auto}.credits{text-align:center;margin:0}.menu{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr) auto;grid-gap:0}.menu__title{grid-column:1/span 4}.menu__start{grid-column:auto/span 2;width:100%}.menu__tap,.menu__reset,.menu__label{grid-column:auto/span 1;width:100%}.menu__tempo,.menu__signature{grid-column:auto/span 2;width:100%}.menu__beat{width:100%;aspect-ratio:1}@font-face{font-display:swap;font-family:Alfa Slab One;font-style:normal;font-weight:400;src:url(../fonts/alfa-slab-one-v20-latin-regular.woff2) format("woff2")}:root{--font-family: "Alfa Slab One", system-ui, Avenir, Helvetica, Arial, sans-serif;--color-text: #e7fafd;--color-background: #010d0f;--color-primary: #eae133;--color-secondary: #011519;--color-accent: #032b33;--ui-font-size: clamp(1.4rem, 6vw, 2.2rem);font-family:var(--font-family);line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffe6;background-color:var(--color-background);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:inherit}html{box-sizing:border-box;margin:0}html{height:100%}body{margin:0;min-width:320px;height:100%}h1{font-size:2.4rem;line-height:1.1}.title{font-size:var(--ui-font-size)}.button,button{-webkit-appearance:none;border:4px solid transparent;font-size:var(--ui-font-size);font-weight:500;font-family:var(--font-family);color:var(--color-text);background-color:var(--color-secondary);cursor:pointer;transition:border-color .25s;display:flex;justify-content:center;align-items:center;text-decoration:none}.button--active{background-color:var(--color-primary);color:var(--color-background)}input:hover,input:active,select:hover,select:active,button:hover,button:active,.button:active,.button:hover{border-color:var(--color-primary)}select:focus,select:focus-visible,input:focus,input:focus-visible,button:focus,button:focus-visible,.button:active,.button:hover{outline:4px auto -webkit-focus-ring-color;z-index:2}input{-webkit-appearance:none;text-align:center;border-radius:0;border:4px solid transparent;font-size:var(--ui-font-size);padding:.5rem;color:var(--color-text);background-color:var(--color-accent);font-family:var(--font-family)}select{text-align:center;border-radius:0;border:4px solid transparent;font-size:var(--ui-font-size);padding:.5rem;color:var(--color-text);background-color:var(--color-accent);font-family:var(--font-family)}.link{font-weight:500;color:var(--color-primary);text-decoration:inherit}.link:hover{text-decoration:underline}