@import url(https://fonts.googleapis.com/css?family=Lato);.looper{position:relative}.looper__displayed{margin:auto;text-align:center;width:100%}.looper__actions{background-color:#fff;background-color:var(--color-bg);border:1px solid #000;border:solid var(--color-primary);border-width:1px 1px .15em;display:flex;justify-content:space-between;padding:.2em;position:-webkit-sticky;position:sticky;top:0;z-index:2}.looper__info{bottom:0;font-size:.8em;width:100vw}.keyboard-actions{grid-gap:.5em;display:flex;gap:.5em;justify-content:right;position:relative;z-index:1}.keyboard{display:flex;gap:2px;height:156px;justify-content:center;overflow-x:auto;padding:52px 26px 26px}.keyboard__note{align-items:center;background-color:ivory;background-color:var(--color-secondary);border-radius:2px;box-shadow:0 2px 2px 0 #000;box-shadow:0 2px 2px 0 var(--color-primary);cursor:pointer;display:flex;flex-direction:column;flex-shrink:0;font-size:.7em;height:130px;justify-content:flex-end;line-height:1.2;list-style:none;padding-bottom:4px;-webkit-user-select:none;user-select:none;width:26px}.keyboard__note:nth-child(12n+10),.keyboard__note:nth-child(12n+12),.keyboard__note:nth-child(12n+2),.keyboard__note:nth-child(12n+5),.keyboard__note:nth-child(12n+7){background-color:#000;background-color:var(--color-primary);border-radius:4px;box-shadow:none;color:#fff;height:78px;margin-left:-13px;margin-right:-13px;width:24px;z-index:1}.keyboard__note.keyboard__note--active{background-color:orange;background-color:var(--color-accent);margin-top:1px;outline:none}.track{border:1px solid #000;border:1px solid var(--color-primary);border-radius:.2em;box-shadow:.4em .4em 0 0 #000;box-shadow:.4em .4em 0 0 var(--color-primary);flex-direction:column;margin:1.5em;padding:1em;position:relative}.track--active{background-color:ivory;background-color:var(--color-secondary)}.track__actions *+*{margin-left:.5em}.track__header{font-size:.8em;position:absolute;top:.5em;width:calc(100% - 2em)}.loader,.track__header{display:flex;justify-content:space-between}.loader{padding:.2em 1em}.actions{display:flex;gap:.5em;justify-content:center}:root{--color-primary:#000;--color-secondary:ivory;--color-accent:orange;--color-bg:#fff}@media(prefers-color-scheme:dark){:root{--color-primary:#000;--color-secondary:ivory;--color-accent:orange;--color-bg:#555}}@media(prefers-color-scheme:light){:root{--color-primary:#000;--color-secondary:ivory;--color-accent:orange;--color-bg:grey}}body,html{height:100%;margin:0;padding:0}::-webkit-scrollbar{height:.5em;width:.5em}::-webkit-scrollbar-track{background-color:#000;background-color:var(--color-primary)}::-webkit-scrollbar-thumb{background-color:orange;background-color:var(--color-accent)}body{background-color:#fff;background-color:var(--color-bg);display:flex;flex-direction:column;font-family:Lato;line-height:1.7}.button{background-color:ivory;background-color:var(--color-secondary);border:1px solid #000;border:1px solid var(--color-primary);border-radius:2em;box-shadow:1px 1px 0 0 #000;box-shadow:1px 1px 0 0 var(--color-primary);cursor:pointer;font-size:1em;height:2em;margin-bottom:2px;min-width:2em;padding:.45em;width:2em}.button:focus{outline:none}.button:active{box-shadow:none}.button--active{background-color:orange;background-color:var(--color-accent)}.button--small{background-color:#000;background-color:var(--color-primary);color:ivory;color:var(--color-secondary);font-size:.5em;right:1em;top:1em}@media only screen and (max-width:991px){.button__label{display:none}}@media only screen and (min-width:992px){.button--text{padding-left:.8em;padding-right:.8em}}.button--text{box-shadow:1px 1px 0 0 #000;box-shadow:1px 1px 0 0 var(--color-primary)}.button--text:active{box-shadow:none}.button--text{width:auto}@media only screen and (min-width:992px){.button--text svg{margin-left:.5em}}.input--load{height:.1px;opacity:0;overflow:hidden;position:absolute;width:.1px;z-index:-1}.input--load+label{background-color:ivory;background-color:var(--color-secondary);border:1px solid #000;border:1px solid var(--color-primary);border-radius:2em;color:#000;color:var(--color-primary);cursor:pointer;font-size:1em;height:.95em}@media only screen and (min-width:992px){.input--load+label{padding-left:.8em;padding-right:.8em}}.input--load+label{box-shadow:1px 1px 0 0 #000;box-shadow:1px 1px 0 0 var(--color-primary)}.input--load+label:active{box-shadow:none}.input--load+label{display:inline-block;line-height:0;padding:.45em}@media only screen and (min-width:992px){.input--load+label svg{margin-left:.5em}}
/*# sourceMappingURL=main.0ccb6b9f.css.map*/