:root{font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif}body{height:100vh;margin:0;padding:0}.widget-container{position:relative;overflow:hidden}.bg-cof{object-fit:contain;height:100%;width:100%;pointer-events:none;position:absolute;-webkit-user-select:none;user-select:none}.cof{position:relative;transition:rotate .1s ease-in}.menu{z-index:1;position:relative;display:flex;gap:10px;padding:10px}.btn,.menu .form-group{padding:10px 20px;border:0;border-radius:2em;-webkit-user-select:none;user-select:none}.rotate-12{rotate:360deg}.rotate-0{rotate:0deg}.rotate-1{rotate:30deg}.rotate-2{rotate:60deg}.rotate-3{rotate:90deg}.rotate-4{rotate:120deg}.rotate-5{rotate:150deg}.rotate-6{rotate:180deg}.rotate-7{rotate:210deg}.rotate-8{rotate:240deg}.rotate-9{rotate:270deg}.rotate-10{rotate:300deg}.rotate-11{rotate:330deg}#root{height:100%}.transition-disabled{transition:none!important}.debug .chord-key{border:1px dashed purple;opacity:1}.chord-key{position:absolute;opacity:0;background-color:red;transition:opacity .5s ease-out}.chord-key-top{clip-path:polygon(0% 20%,33% 5%,66% 5%,99% 20%,92% 93%,66% 80%,33% 80%,8% 93%);top:0%;left:37%;height:10%;width:26%}.chord-key-mid{clip-path:polygon(4% 4%,33% 1%,66% 1%,95% 4%,88% 92%,66% 89%,33% 89%,13% 92%);top:7.9%;left:44%;height:8%;width:12%}.chord-key-bottom{clip-path:polygon(0% 13%,33% 0%,66% 1%,95% 13%,85% 96%,66% 88%,33% 88%,10% 96%);top:15%;left:41%;height:9%;width:19%}.marker{height:100%;width:100%;position:absolute;top:0;transition:rotate .1s ease-in}.bg-color-0{background-color:#00f3}.bg-color-1{background-color:#f004}.bg-color-2{background-color:#0a04}.marker-container{position:absolute;top:0;pointer-events:none}.marker-container .chord-key{opacity:1}.marker-tl{rotate:-30deg}.marker-tr{rotate:30deg}.marker-ml{rotate:-15deg}.marker-mr{rotate:15deg}.db{rotate:-150deg}.ab{rotate:-120deg}.eb{rotate:-90deg}.bb{rotate:-60deg}.f{rotate:-30deg}.c{rotate:0}.g{rotate:30deg}.d{rotate:60deg}.a{rotate:90deg}.e{rotate:120deg}.b{rotate:150deg}.fH{rotate:180deg}.dHm2{rotate:-165deg}.fm2{rotate:-150deg}.bbm{rotate:-135deg}.cm2{rotate:-120deg}.fm{rotate:-105deg}.gm2{rotate:-90deg}.cm{rotate:-75deg}.dm2{rotate:-60deg}.gm{rotate:-45deg}.am2{rotate:-30deg}.dm{rotate:-15deg}.em{rotate:0deg}.am{rotate:15deg}.bm{rotate:30deg}.em2{rotate:45deg}.fHm{rotate:60deg}.bm2{rotate:75deg}.cHm{rotate:90deg}.fHm2{rotate:105deg}.gHm{rotate:120deg}.cHm2{rotate:135deg}.dHm{rotate:150deg}.gHm2{rotate:165deg}.aHm{rotate:180deg}.cdim{rotate:210deg}.gdim{rotate:-120deg}.ddim{rotate:-90deg}.adim{rotate:-60deg}.edim{rotate:-30deg}.bdim{rotate:0deg}.fHdim{rotate:30deg}.cHdim{rotate:60deg}.gHdim{rotate:90deg}.dHdim{rotate:120deg}.aHdim{rotate:150deg}.fdim{rotate:180deg}.playing{opacity:.3;transition:none}.chord-log{height:8vh;display:flex;padding:5px;gap:5px;flex-wrap:wrap;overflow-x:auto;align-items:center}.chord-log__item{border:1px solid gray;border-radius:5px;padding:2px}