@import url(https://fonts.googleapis.com/css?family=Inconsolata:700&display=swap);.decimals__decimals{font-size:.66em}.click-to-copy{background-color:inherit;margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;position:relative;cursor:pointer}.click-to-copy__overlay{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;transition:background .3s}.click-to-copy__overlay:after{content:"copied!";pointer-events:none;color:var(--color-ui-lightest);text-shadow:0 0 3px var(--color-ui);opacity:0;transform:translate(-50%,-50%) rotate(-7deg);display:block;position:absolute;top:50%;left:50%;z-index:1000}@-webkit-keyframes copied{0%{opacity:0;transform:translate(-50%,-50%) rotate(-7deg)}30%{opacity:1}70%{opacity:1}to{opacity:0;transform:translate(-50%,-3rem) rotate(-17deg)}}@keyframes copied{0%{opacity:0;transform:translate(-50%,-50%) rotate(-7deg)}30%{opacity:1}70%{opacity:1}to{opacity:0;transform:translate(-50%,-3rem) rotate(-17deg)}}.click-to-copy--copied:after{opacity:1;-webkit-animation:copied .5s ease-in 1;animation:copied .5s ease-in 1}.click-to-copy:focus .click-to-copy__overlay{border:3px solid var(--color-focus);background-color:var(--color-focus);mix-blend-mode:multiply}.click-to-copy:hover .click-to-copy__overlay{background-color:hsla(0,0%,100%,.4)}.scale{max-width:50em;font-size:1.25em}.scale__key{display:flex;justify-content:center;align-items:center;width:100%;height:2em;padding-left:calc(50% + 1em);padding-right:1em;color:var(--color-ui-light);border:3px solid var(--color-ui-lighter);background-color:var(--color-ui-lightest);text-align:center}.scale__key:not(.scale__key--is-semitone)+.scale__key:not(.scale__key--is-semitone){margin-top:-3px}.scale__key--is-semitone{background-color:var(--color-ui-light);color:var(--color-ui-lightest);position:relative;width:50%;padding-right:0;padding-left:0;z-index:1;margin-bottom:calc(-1em - 3px);margin-top:calc(-1em - 3px)}.scale__key:not(.scale__key--is-semitone) .click-to-copy__overlay:after{left:auto;right:0}.unit,.unit-like{border:4px solid var(--color-ui-lighter);text-align:right;color:var(--color-ui-lightest)}.unit__slot{font-size:3em;padding:1rem 1rem 0}.unit__unit{padding:0 1rem 1rem}.unit+.unit,.unit+.unit-like,.unit-like+.unit,.unit-like+.unit-like{margin-left:-4px}.beats{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;opacity:.5;display:flex;flex-flow:row nowrap;justify-content:stretch;align-items:flex-end}.beats__wrapper{position:relative}.beats__beat{background-color:var(--color-ui-lighter);font-size:4px;flex:1 1}.beats__median{position:absolute;bottom:0;left:0;width:100%;height:0;transition:height .1s;border-top:3px solid var(--color-ui-lightest)}*,:after,:before{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}button::-moz-focus-inner{border:0}:root{--hue:128;--sat:50%;--color-ui:hsl(var(--hue),var(--sat),50%);--color-ui-light:hsl(var(--hue),var(--sat),60%);--color-ui-lighter:hsl(var(--hue),var(--sat),75%);--color-ui-lightest:hsl(var(--hue),var(--sat),90%);--color-ui-dark:hsl(var(--hue),var(--sat),40%);--color-ui-darker:hsl(var(--hue),var(--sat),30%);--color-focus:#fde185}html{font-size:.66rem}@media only screen and (min-width:480px){html{font-size:1rem}}body{background-color:#339941;background-color:var(--color-ui-dark);font-family:"Inconsolata",monospace;border:1px solid #000;padding:2rem;overflow:hidden;min-width:340px}body:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;background:linear-gradient(30deg,#d9f2dc,#267330);background:linear-gradient(30deg,var(--color-ui-lightest),var(--color-ui-darker));pointer-events:none;mix-blend-mode:color-burn}button{border:2px solid #339941;border:2px solid var(--color-ui-dark);background-color:#9fdfa8;background-color:var(--color-ui-lighter);color:#d9f2dc;color:var(--color-ui-lightest);font-family:"Inconsolata",monospace;font-size:1em;text-transform:uppercase;display:flex;justify-content:center;align-items:center}button:focus{border-color:#fde185;border-color:var(--color-focus);background-color:#fde185;background-color:var(--color-focus)}.app{display:flex;flex-flow:column nowrap;min-height:calc(100vh - 4rem)}.app:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;background-color:#d9f2dc;background-color:var(--color-ui-lightest);pointer-events:none;opacity:0}.app--triggered:after{-webkit-animation:blink .3s linear 1;animation:blink .3s linear 1}@-webkit-keyframes blink{0%,to{opacity:0}10%{opacity:.1}}@keyframes blink{0%,to{opacity:0}10%{opacity:.1}}.main{flex:1 0 100%;display:flex;flex-flow:row nowrap;justify-content:stretch;align-items:stretch;align-content:stretch}.main>*{display:block;flex:1 0 20%}.main button{border:none}.toolbar{display:flex;flex-flow:row nowrap;justify-content:stretch;align-items:stretch;align-content:stretch}.toolbar>*{display:block;flex:1 0 20%}.toolbar__buttons{display:flex;flex-flow:row nowrap;justify-content:stretch;align-items:stretch;align-content:stretch;flex-flow:column nowrap}.toolbar__buttons>*{display:block;flex:1 0 20%}.toolbar__buttons button+button{margin-top:-2px}.toolbar__item{display:flex;flex-flow:row nowrap;justify-content:stretch;align-items:stretch;align-content:stretch}.toolbar__item>*{display:block;flex:1 0 20%}.toolbar__item .unit{border:none}.floating{position:absolute;bottom:1rem;right:1rem;z-index:99;width:10rem}
/*# sourceMappingURL=main.e8b905cf.chunk.css.map */