:root{--A-backgroud:#ff0000;--B-backgroud:#2c9711;--C-backgroud:#18c5e4;--D-backgroud:#ff7214;--E-backgroud:#ffff00;--F-backgroud:#a51ddb;--G-backgroud:#a4e141;--A-text:#fff;--B-text:#fff;--C-text:#000;--D-text:#fff;--E-text:#000;--F-text:#fff;--G-text:#000;--string-highlight:#e7e2d5;--label-height:100px;--fret-width:100px;--fret-height:50px;--note-size:38px;--note-font-size:1em;--button:#3c95d3;--button-red:#ff7575;--button-default:#7a7a7a;--input-outline:#ddd;--main-font:'Atkinson Hyperlegible','Roboto',Arial}.print-page .ui{display:none}body{font-family:var(--main-font)}button{background-color:var(--button-default);padding:6px 8px;color:#fff;border:0;border-radius:2px;cursor:pointer}button.primary,vector-button.primary{background-color:var(--button)}vector-button{padding:1px;background:var(--button-default);fill:#fff;margin:0 1px;border-radius:2px}vector-button[icon=delete]{background-color:var(--button-red)}input,select,textarea{border:none;border-radius:3px;font-size:16px;padding:2px 1px;border:1px solid var(--input-outline);font-family:var(--main-font)}a{text-decoration:none;font-style:italic}ul{list-style:decimal}.diagram{margin:0;font-size:var(--note-font-size);margin-right:var(--fret-width)}.diagram .row{display:flex}.diagram .part{outline:1px inset}.diagram .cell{position:relative;width:var(--fret-width);height:var(--fret-height);display:inline-flex;justify-content:center;font-size:1.8em;align-items:center}.diagram .fret-number{font-size:1.2em;height:var(--label-height)}.diagram .fret-marker{display:flex;height:var(--label-height);font-size:1.4em}.diagram .part .note{position:absolute;top:calc((0px - var(--note-size))/ 2);width:10px;height:10px;padding:calc((var(--note-size) - 10px)/ 2);border-radius:50%;display:inline-flex;justify-content:center;align-items:center;text-transform:uppercase;box-shadow:3px 3px 7px #000a;background:#ddd}.diagram .string{top:0;position:absolute;transform:translateY(-50%);width:10px;height:10px;--a:48%;--b:52%;clip-path:polygon(var(--a) 0,var(--b) 0,100% var(--a),100% var(--b),var(--b) 100%,var(--a) 100%,0 var(--b),0 var(--a));padding:calc((var(--note-size) - 10px)/ 2);display:inline-flex;justify-content:center;align-items:center}.diagram .marker{width:10px;height:10px;position:absolute;top:0;right:13px;transform:translateY(-50%);--a:48%;--b:52%;clip-path:polygon(var(--a) 0,var(--b) 0,100% var(--a),100% var(--b),var(--b) 100%,var(--a) 100%,0 var(--b),0 var(--a))}.note-ref>span{padding:1px 8px}.change-color div{display:inline-flex;flex-direction:row;align-items:center;padding:5px;border-radius:5px}.change-color span{width:20px;text-align:center}.change-color label{width:90px;display:inline-block}.change-color input{background:0 0}.diagram .strings div:last-child div{outline:0;height:0}.controls{display:flex;justify-content:space-between}.controls>div{margin:5px}.inputs>div>div{margin:15px 0}.inputs h3{display:flex;align-items:center;cursor:pointer}.inputs h3>span{display:contents;user-select:none}.inputs vector-icon{transform:rotate(-90deg)}.inputs h3>span.active vector-icon{transform:rotate(0)}.collapsible{display:none}.collapsible.active{display:block}.preset-bpm{width:38px}.wrapper{display:inline-block}.note-color{background:0 0;border:none}.info{margin:30px}.metronome{display:flex;align-items:center;flex-wrap:wrap;user-select:none}.metronome>div{margin:5px 6px;display:flex}.metronome>div>div>*{margin:0 1px}.metronome .fixed{width:auto}.metronome label{margin-right:6px;display:flex;align-items:center}.metronome .v-line{border-right:2px solid;margin:5px 6px;height:20px}.fixed{width:350px;display:flex;justify-content:space-between;align-items:center}.fixed>div{display:flex;align-items:center}.fixed input{width:45px}.string-list{flex-direction:column;align-items:normal}.string-list>div{display:flex;align-items:center;margin:1px 0;justify-content:space-between}.string-list>div>div{display:flex}.string-list button{margin:0 2px}.string-list select{border:none}.metronome .show{display:none}#bpm{width:50px}@media all and (max-width:1200px){:root{--fret-width:calc(100vw / 14)!important}.diagram .marker{display:none}}@media all and (max-width:800px){:root{--label-height:45px!important;--fret-width:calc(100vw / 14)!important;--fret-height:28px!important;--note-size:22px!important;--note-font-size:0.7em!important}body{margin:0}.change-color div{padding:0}.change-color input{width:45px}.metronome{justify-content:space-between}.controls{flex-wrap:wrap}.info{margin:0}.desktop-only{display:none}.diagram .part .note{box-shadow:1px 1px 2px #000a}.metronome .v-line{display:none}}@media all and (max-width:500px){:root{--fret-height:24px!important;--note-size:18px!important;--note-font-size:0.6em!important}.fixed{width:100%}.metronome .fixed{width:100%}}