:root{--white:#fcfcfc;--background:#eff0f1;--dark:#31363b;--dark90:#31363be0;--dark75:#31363bb0;--dark50:#31363b80;--dark25:#31363b40;--shadow:#23262940;--glow:#eff0f180;--light-gray:#d9dfe3;--dim-gray:#bdc3c7;--dark-gray:#7f8c8d;--neutral-gray:#606060;--primary:#3daee9;--secondary:#bdc3c7;--selected:#3daee9;--selected50:#3daee980;--selected25:#3daee940;--gray:#4d4d4d;--gray25:#4d4d4d40;--red:#da4453;--red25:#da445340;--red50:#da445380;--orange:#f47750;--orange25:#f4775040;--yellow:#fdbc4b;--yellow25:#fdbc4b40;--yellow50:#fdbc4b80;--green:#2ecc71;--green25:#2ecc7140;--blue:#1d99f3;--blue25:#1d99f340;--success:#1cdc9a;--success25:#1cdc9a40;--danger:#ed1515;--danger25:#ed151540;--danger50:#ed151580;--indigo:#8e44ad;--indigo25:#8e44ad40;--info:#3daee9;--info25:#3daee940;--dark-border:var(--dark-gray);--light-border:var(--light-gray);--focused-border:var(--gray);--button-hover:var(--background)}html,body,#app{touch-action:manipulation;flex-direction:column;height:100%;display:flex}header{z-index:1}main{flex-direction:column;flex-grow:1;display:flex;overflow:auto}footer{border-top-style:solid;border-top-color:var(--light-gray);border-top-width:1px;display:flex}footer button{background:0 0;width:48px;height:48px}body,textarea,input,pre{margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body,button{color:var(--dark)}input,button{text-align:center;border:0;border-radius:8px}button.thinButton{background-color:var(--white);width:56px}button#start,button#stop{width:140px;margin:16px;padding:24px}button#start{background:var(--green)}button#stop{background-color:var(--orange)}#controls{box-shadow:0 0px 4px var(--shadow);background-color:var(--background);border-bottom:1px solid var(--light-gray)}#controls,#presets{flex-direction:column;align-items:center;display:flex}#presets{flex-grow:1}#presetsMessage{color:var(--gray);flex-grow:1;align-content:center;font-weight:lighter}#speedControls{display:flex}#bpm{width:140px;margin:0 8px;font-size:32pt}#presetsControls{align-items:center;width:100%;display:flex}#playControls{text-align:center;flex-grow:1}.presetsControl{width:48px;height:48px;margin:16px}.presetsControl:disabled{opacity:.25}#presetsItems{display:flex}#presetsItems.list{flex-direction:column;width:-webkit-fill-available;width:-moz-available;width:stretch}#presetsItems.grid{flex-wrap:wrap;justify-content:center;align-self:center}.presetItem{border-width:1px;border-color:var(--light-gray);background-color:var(--white);border-style:solid;border-radius:4px;margin:4px;display:flex}#presetsItems.list .presetItem{align-items:center}#presetsItems.grid .presetItem{text-align:center;flex-direction:column;min-width:86px}.presetItem.selected{background-color:var(--primary)}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield}.grow{flex-grow:1}