:root{--line-color: #828282;--note-color: #000000;--solved-color: #008000;--failed-color: #ff0000;--bg-color: #ffffff;--item-width: 50px;--font-size: 16px}.main-header{display:flex;justify-content:space-between;align-items:center}button.outline-button{background-color:transparent;border:none}aside{position:fixed;top:0;bottom:0;right:0;background-color:var(--bg-color);padding:40px;box-shadow:0 0 30px #0000001a;transform:translate(100%);transition:transform .3s}aside.is-visible{transform:translate(0)}select,input{width:100%}.sheet{display:flex;flex-wrap:wrap;margin:8px 0}.sheet-item{display:flex;flex-direction:column;position:relative;width:var(--item-width)}.sheet-item-line{position:relative;height:5px}.sheet-item-line:nth-child(odd):before{content:"";position:absolute;width:100%;left:0;top:50%;border-top:1px solid var(--line-color)}.sheet-item-line.is-invisible:nth-child(odd):before{content:"";position:absolute;width:100%;left:0;top:50%;border-top:1px solid transparent}.sheet-item-line:after{content:"𝅘";position:absolute;left:50%;top:calc(50% - 8px);transform:translate(-50%,-50%);border-radius:12px;font-size:36px;color:transparent;background-color:transparent;pointer-events:none}.sheet-item-line.is-over:after{color:var(--line-color)}.sheet-item-line.is-invisible.is-over:nth-child(2n)+.sheet-item-line.is-invisible:before,.sheet-item-line.is-invisible.is-selected:nth-child(2n)+.sheet-item-line.is-invisible:before{border-top:1px solid var(--line-color);width:60%;left:20%}.sheet-item-line.is-invisible.is-over:nth-child(odd):before,.sheet-item-line.is-invisible.is-selected:nth-child(odd):before{border-top:1px solid var(--line-color);width:60%;left:20%}.sheet-item-line.is-selected:after{color:var(--note-color)}.sheet-item-line.is-solved:after{color:var(--solved-color)}.sheet-item-line.is-failed:after{color:var(--failed-color)}.sheet-item-note{text-align:center;font-size:var(--font-size);line-height:var(--font-size)}.sheet-item-note.is-solved{color:var(--solved-color)}.sheet-item-note.is-failed{color:var(--failed-color)}.sheet-item-note.is-over{color:var(--line-color)}.sheet-item-interval{position:absolute;bottom:0;width:var(--item-width);margin-left:calc(-.5 * var(--item-width));text-align:center;font-size:calc(.6 * var(--font-size));line-height:var(--font-size);color:var(--line-color)}.sheet-clef{position:relative;width:var(--item-width);color:var(--note-color)}.sheet-clef-sign{position:absolute;top:17px;font-size:40px}