.metronome[data-v-ba8ec06e]{width:calc(100% - var(--ball-radius)*2);height:calc(100% - var(--ball-radius)*2);margin:var(--ball-radius);padding:0;border:0;position:relative}.rotate-box[data-v-ba8ec06e]{position:absolute;margin:0;padding:0;border:0;width:100%;height:var(--rotate-box-height);left:0;top:100%}.ball[data-v-ba8ec06e]{width:0;height:0;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:absolute;left:0;top:0}.ball[data-v-ba8ec06e]:before{content:"";-webkit-box-flex:0;-ms-flex:none;flex:none;width:calc(var(--ball-radius)*2);height:calc(var(--ball-radius)*2);display:block;margin:0;padding:0;border-radius:50%;background-color:#3191e7;-webkit-box-shadow:inset -25px -15px 40px rgba(0,0,0,.3);box-shadow:inset -25px -15px 40px rgba(0,0,0,.3);background-image:linear-gradient(-45deg,rgba(255,255,220,.3),transparent)}.note[data-v-8b62b99a]{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-line-pack:start;align-content:flex-start;vertical-align:top;width:auto;height:auto;padding:0}.piece[data-v-8b62b99a]{width:10px;height:20px;display:block;border:0;margin:0;padding:0;z-index:3;position:relative}.piece.w0o8[data-v-8b62b99a]{width:8px}.piece.w0o5[data-v-8b62b99a]{width:5px}.piece.w1o3[data-v-8b62b99a]{width:13px}.piece.w1o5[data-v-8b62b99a]{width:15px}.piece.w2[data-v-8b62b99a]{width:20px}.stem[data-v-8b62b99a]{display:block;width:1px;height:100%;border:0;margin:0;padding:0;position:absolute;right:0;top:0;background-color:var(--color)}.head[data-v-8b62b99a]{width:10px;background:var(--color);border-radius:200%;height:6px;position:absolute;bottom:-6px;right:-1px;-webkit-transform:rotate(-30deg);transform:rotate(-30deg)}.head.hollow[data-v-8b62b99a]:before{content:"";display:block;width:7px;background:var(--backgroundColor);border-radius:200%;position:absolute;height:2px;bottom:2px;right:2px}.flag[data-v-8b62b99a]{width:10px;height:18px;overflow:hidden;border:0;display:block;position:relative}.flag[data-v-8b62b99a]:before{-webkit-transform:scale(1);transform:scale(1);left:-13px;top:6px;background-color:var(--backgroundColor);z-index:5}.flag[data-v-8b62b99a]:after,.flag[data-v-8b62b99a]:before{content:"";display:block;width:18px;height:18px;border-radius:50%;position:absolute;border:0}.flag[data-v-8b62b99a]:after{-webkit-transform:scaleY(1.1);transform:scaleY(1.1);left:-12px;top:4px;background-color:var(--color);z-index:3}.hline[data-v-8b62b99a]{width:100%;height:3px;border:0;background-color:var(--color);position:absolute;left:0}.hline.one[data-v-8b62b99a]{top:0}.hline.two[data-v-8b62b99a]{top:6px}.hline.three[data-v-8b62b99a]{top:12px}.dot[data-v-8b62b99a]{height:3px;width:3px;background-color:var(--color);border-radius:50%;display:block;position:absolute;left:50%;bottom:-3px}.tuple[data-v-8b62b99a]{position:relative;color:var(--color)}.tuple[data-v-8b62b99a]:before{content:"";display:block;width:calc(100% - 8px);height:100px;border-radius:8px;border-top:1px solid var(--color);position:absolute;left:8px;top:-7px;z-index:1}.tuple[data-v-8b62b99a]:after{content:"";position:absolute;font-size:12px;left:calc(4px + 50% - .3em);top:calc(-7px - .5em);font-weight:700;z-index:2;background-color:var(--backgroundColor)}.tuple.t3[data-v-8b62b99a]:after{content:"3"}.tuple.t5[data-v-8b62b99a]:after{content:"5"}.tuple.t6[data-v-8b62b99a]:after{content:"6"}body{background-color:#000}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#333;width:calc(100% - 16px);height:calc(100% - 16px);position:absolute;z-index: -1}.monitor{width:100%;max-width:720px;height:calc(100% - 408px);overflow:hidden;margin:0 auto;border:1px solid #ccc;background-color:#000;border-radius:5px;position:relative}.monitor .btn{display:block;position:absolute;left:calc(50% - 16px);bottom:10px;border-color:#ccc;z-index:11}.monitor .btn-start{border-top:16px solid transparent;border-left:32px solid #ccc;border-bottom:16px solid transparent;border-right:0;width:0;height:0;cu}.monitor .btn-stop{border-left:8px solid #ccc;border-right:8px solid #ccc;border-top:0;border-bottom:0;width:16px;height:32px;cursor: pointer;}.monitor .metronome{z-index:10}.control-panel{width:100%;max-width:720px;height:400px;margin:0 auto;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;background-color:#333;border:1px solid #ccc;border-radius:5px}.control-panel:before{content:"";width:100%;height:20px;position:absolute;left:0;top:0;background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(rgba(85,85,85,.5)));background-image:linear-gradient(180deg,#333,rgba(85,85,85,.5));border:0;border-radius:5px 5px 0 0;z-index:100}.control-panel .row{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-line-pack:start;align-content:flex-start;width:100%;height:50px;border:0;z-index:200}.control-panel .col{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;display:block;border:0 1px 0 0;border-right:1px solid #ccc;border-top:1px solid #ccc;padding:0;margin:0;height:calc(100% - 1px);overflow:hidden}.control-panel .col:last-child{border-right:0}.control-panel .col-rp-selected{-webkit-box-shadow:0 0 5px #fff;box-shadow:0 0 5px #fff}.control-panel .row:first-child .col{border-top:0}.musical-note-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:calc(100% - 20px);height:calc(100% - 30px);margin:15px auto;cursor: pointer;}.musical-note:last-child{margin-right:0}.musical-note{-ms-flex-negative:1;flex-shrink:1;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;margin-right:10px}.control-panel .bpm-control{font-size:32px;line-height:36px;color:#ccc;text-align:center

    display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-moz-box-pack:center;-webkit-box-pack:center;box-pack:center;-webkit-align-items:center;align-items:center;-webkit-box-align:center;-moz-box-align:center;box-align:center;}.control-panel .bpm-control .btn{display:inline-block;width:32px;height:32px;border:1px solid #ccc;border-radius:50%;color:#ccc;font-size:14px;line-height:32px;text-align:center;background-color:#333;font-style:normal;cursor: pointer;}.control-panel .bpm-control .btn-left{margin-right:10px}.control-panel .bpm-control .btn-right{margin-left:10px}