:root{font-family:Arial;line-height:1;font-weight:400;color:#444;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:not(:root)::backdrop{background-color:#fff}*{box-sizing:border-box}body{margin:0}h1{font-size:3.2em;line-height:1.1;margin:0}html,body{height:100%}body{display:flex}#root{flex:1;display:flex}:root{--note-size: 1.5rem}.sheet{flex:1;overflow-y:auto;padding:.5rem .5rem 2rem}.sheet h1{text-align:center;margin:1rem 0 2rem}.bar-list{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 0}.bar{border-right:2px solid #AAA;display:flex;align-items:center;cursor:pointer;background-color:#fff}.bar:hover{background-color:#f4f4ff}.bar.selected{background-color:#ff8}.bar .repeat-start,.bar .repeat-end{font-size:200%}.bar.overflow{border-right-style:dotted}.bar.incomplete{border-right-style:dashed}.note-list{display:grid;grid-template-rows:var(--note-size) repeat(calc(var(--number-of-strings)),var(--note-size)) var(--note-size);grid-template-columns:repeat(var(--number-of-notes),minmax(var(--note-size),min-content));align-items:stretch;padding:0 .5rem}.note,.rest{grid-column:var(--note-position);cursor:pointer;align-self:center;height:calc(var(--note-size) - 2px);width:calc(var(--note-size) - 2px);margin:1px;background-color:#fff;position:relative;display:flex;justify-content:center;align-items:center;font-weight:700;border-radius:4px;color:var(--color)}:is(.note,.rest):hover{background-color:#ddf}:is(.note,.rest).selected{background-color:#ff0}:is(.note,.rest):after{position:absolute;inset:0;display:block;content:"";border-radius:4px;border:2px solid var(--color)}:is(.note,.rest):after{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}:is(.note,.rest)[data-duration="1"]:after{clip-path:polygon(50% 80%,100% 80%,100% 100%,50% 100%)}:is(.note,.rest)[data-duration="2"]:after{clip-path:polygon(0% 80%,100% 80%,100% 100%,0% 100%)}:is(.note,.rest)[data-duration="3"]:after{clip-path:polygon(0% 80%,100% 50%,100% 100%,0% 100%)}:is(.note,.rest)[data-duration="4"]:after{clip-path:polygon(0% 50%,100% 50%,100% 100%,0% 100%)}:is(.note,.rest)[data-duration="6"]:after{clip-path:polygon(0% 20%,100% 20%,100% 100%,0% 100%)}:is(.note,.rest)[data-duration="8"]:after{clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}.note{grid-row:calc(var(--note-string) + 1);--color: #000}.rest{grid-row:2 / -2;--color: #888}.note-name{grid-row:1;grid-column:var(--note-position);align-self:center;justify-self:center;font-size:85%}.note-text{grid-row:-2;grid-column:var(--note-position);align-self:center;font-size:85%;white-space:pre}.string{grid-row:calc(var(--string-position) + 1);grid-column:1 / -1;display:block;align-self:center;border:1px solid #DDD}:root{--selected-backgroud: #333;--selected-color: #FFF;--unselected-backgroud: #FFF;--unselected-color: #333;--border-color: #000}.sheet-editor{flex:1;display:flex;flex-direction:column}.controls-wrapper{position:relative}.menu{position:absolute;bottom:-1.5rem;right:0;height:1.5rem;display:flex}.menu button{border:0;padding:0 1rem;margin:0 auto;background-color:#fff;border-bottom:1px solid var(--border-color);border-left:1px solid var(--border-color)}.menu button:first-child{border-radius:0 0 0 4px}.controls{display:flex;flex-direction:column;gap:.5rem;padding:.5rem;border-bottom:1px solid black}.controls[hidden]{display:none}.controls .controls-menu{display:flex;justify-content:space-between}.controls .controls-toolbar{display:flex;flex-wrap:wrap;gap:1rem}.controls .controls-toolbar input{border-radius:.5rem}.buttons{display:flex;flex-wrap:wrap;gap:2px}.buttons button{padding:.25rem 1rem}.buttons.right{justify-content:flex-end}.toggles-group{display:flex;flex-wrap:wrap;gap:.5rem 1rem}.toggles{display:flex;flex-wrap:wrap;gap:2px}label.toggle{border:1px solid var(--selected-backgroud);border-radius:.5rem;text-align:center;height:2.5em;width:2.5em;margin:0;padding:0;color:var(--unselected-color);background-color:var(--unselected-backgroud);display:flex;align-items:center;justify-content:center;cursor:pointer}label.toggle input{display:block;margin:0;padding:0;height:0;width:0}label.toggle:has(input:checked){color:var(--selected-color);background-color:var(--selected-backgroud)}