body{margin:50px 0;text-align:center}body *{box-sizing:border-box}button{min-width:50px;appearance:none;background-color:#eee;border:0;border-radius:3px;color:#333;font-family:Courier New,Courier,monospace;line-height:1.5;padding:2px 10px}button:hover{cursor:pointer}input[type=number]{width:60px}label{display:inline-flex;align-items:center;gap:3px}label:hover{cursor:pointer}nav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}table{margin:auto}table.chord-notes button{min-width:auto}@font-face{font-family:Noto Music;src:url(/composer/assets/NotoMusic-Regular-BsFFLiWs.ttf) format("truetype")}.training{--base-unit: 20px;max-width:calc(var(--base-unit) * 15);min-width:fit-content;display:flex;flex-direction:column;margin:var(--base-unit) auto}.training.nailed-it .picked div[note]{background-color:#90ee90!important}.training.keep-trying .picked div[note]{background-color:salmon!important}.training .row{display:flex}.training .row>div:first-child{min-width:calc(var(--base-unit) * 3.5)}.training .row>div:not(:first-child){flex:1}.training .row .lines.mic{background-color:#f7f7f7}.training .row .lines.treble-clef,.training .row .lines.bass-clef{position:relative}:is(.training .row .lines.treble-clef,.training .row .lines.bass-clef) .clef{font-family:Noto Music,Courier New,Courier,monospace;line-height:0;position:absolute;left:calc(var(--base-unit) * .2)}.training .row .lines.treble-clef .clef{font-size:calc(var(--base-unit) * 4);top:calc(var(--base-unit) * 4.575)}.training .row .lines.bass-clef .clef{font-size:calc(var(--base-unit) * 3.9);top:calc(var(--base-unit) * 1.75)}.training .row .lines.all-notes .space div[note]{left:calc(.75 * var(--base-unit))}.training .row .lines.all-notes .line div[note]{left:calc(-.75 * var(--base-unit))}.training .row .lines .space,.training .row .lines .line{--note-dim: calc(var(--base-unit) * .8);display:flex;align-items:center;justify-content:center}:is(.training .row .lines .space,.training .row .lines .line) div[note]{height:var(--note-dim);width:var(--note-dim);background-color:#0000001a;border-radius:50%;position:relative;font-family:monospace;font-size:calc(var(--base-unit) * 1.2);font-weight:700;line-height:calc(var(--base-unit) * .8);text-indent:calc(var(--base-unit) * .8)}:is(.training .row .lines .space,.training .row .lines .line) div[note]:hover{background-color:#0000004d;cursor:pointer}.training .row .lines .space{height:var(--base-unit)}.training .row .lines .line{height:calc(var(--base-unit) * .1);background-color:#000}.training .row .lines .line.external{background-color:#bbb}#music-grid{--note-height: 25px;--step-width: 40px;--line-width: 2px;--line-style: var(--line-width) solid #999;max-width:100dvw;width:fit-content;border:var(--line-style);border-right:0;display:flex;font-family:Courier New,Courier,monospace;font-size:.8;margin:30px auto;overflow-x:auto;position:relative}#music-grid,#music-grid *{box-sizing:border-box}#music-grid #steps,#music-grid #chords{display:flex}#music-grid #steps{height:calc(var(--data-max-notes) * var(--note-height));display:flex}#music-grid #steps .step{width:var(--step-width);border-right:var(--line-style)}#music-grid #chords{position:absolute}#music-grid #chords .chord{display:flex;flex-direction:column;position:absolute;left:calc(var(--data-start) * var(--step-width));z-index:var(--data-z-index)}#music-grid #chords .chord.editing .btn-edit-chord{background-color:#ff0!important}#music-grid #chords .chord.playing .note{background-color:#90ee90}#music-grid #chords .chord .btn-edit-chord,#music-grid #chords .chord .note{height:var(--note-height);display:flex;align-items:center;justify-content:center}#music-grid #chords .chord .btn-edit-chord{min-width:auto;width:calc(var(--step-width) - var(--line-width));border:2px solid skyblue;border-radius:0;padding:0}#music-grid #chords .chord .note{width:calc(var(--data-duration) * var(--step-width) - var(--line-width));background-color:#74d8ec80;border:1px solid rgba(23,112,130,.5);border-radius:calc(var(--note-height) / 5);position:absolute;top:calc((var(--data-top)) * var(--note-height))}