footer[data-v-8ab63382]{color:#333}nav[data-v-c572e302]{flex-direction:column;align-items:flex-start;gap:.5rem;display:flex}.musical-staff[data-v-959f9769]{width:100%;max-width:100%;min-height:150px;display:block}.staff-lines line[data-v-959f9769],.ledger-line[data-v-959f9769],.stem[data-v-959f9769],.barline line[data-v-959f9769],.x-notehead line[data-v-959f9769],.tie[data-v-959f9769]{stroke:currentColor;stroke-width:1.5px}.diamond-clef__mark[data-v-959f9769],.mos-step-box[data-v-959f9769]{fill:currentColor;stroke:currentColor;stroke-width:1.25px}.diamond-clef__ledger[data-v-959f9769]{stroke:currentColor;stroke-width:1.5px}.diamond-clef__mark--middle[data-v-959f9769],.mos-step-box--hollow[data-v-959f9769]{fill:#fff}.grace-tie[data-v-959f9769]{fill:none;stroke:currentColor;stroke-width:1px}.grace-note .notehead[data-v-959f9769]{transform-box:fill-box;transform-origin:50%;transform:scale(.68)}.grace-note .stem[data-v-959f9769]{stroke-width:1px}.flag[data-v-959f9769]{fill:none;stroke:currentColor;stroke-width:3px}.tuplet-bracket[data-v-959f9769]{fill:none;stroke:currentColor;stroke-width:1.5px}.barline circle[data-v-959f9769]{fill:currentColor}.tie[data-v-959f9769]{fill:none}.glissando[data-v-959f9769]{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.4px}.clef[data-v-959f9769]{font-size:52px}.notehead[data-v-959f9769]{fill:currentColor}.articulation-mark[data-v-959f9769]{text-anchor:middle;font-size:14px}.notehead--open[data-v-959f9769]{fill:#fff;stroke:currentColor;stroke-width:1.5px}.augmentation-dot[data-v-959f9769],.rest-box[data-v-959f9769]{fill:currentColor}.pitch-decorations[data-v-959f9769],.rest[data-v-959f9769]{font-size:18px}.annotation[data-v-959f9769]{text-anchor:middle;font-size:12px}.swing-annotation[data-v-959f9769]{fill:currentColor;stroke:currentColor;stroke-width:1.25px}.swing-notehead--open[data-v-959f9769]{fill:#fff}.swing-annotation text[data-v-959f9769]{stroke:none;text-anchor:middle;font-size:12px}.swing-annotation path[data-v-959f9769],.swing-beam[data-v-959f9769]{fill:none;stroke-linecap:round;stroke-linejoin:round}.swing-beam[data-v-959f9769]{stroke-width:3px}.swing-tuplet-number[data-v-959f9769]{paint-order:stroke;stroke-width:4px;stroke:#fff!important}.sounding-label[data-v-959f9769],.performance-label[data-v-959f9769]{text-anchor:middle;font-size:11px}.performance-label[data-v-959f9769]{font-style:italic}.tuplet-number[data-v-959f9769]{text-anchor:middle;font-size:12px;font-weight:600}.pitch-decorations[data-v-959f9769]{text-anchor:end}.empty-message[data-v-959f9769]{fill:currentColor;font-size:12px}.piano-roll[data-v-755f82fd]{width:100%;margin-top:1rem}.scroll[data-v-755f82fd]{background:#fafafa;border:1px solid #aaa;border-radius:.35rem;overflow-x:auto}.canvas[data-v-755f82fd]{min-width:100%;height:320px;position:relative}svg[data-v-755f82fd]{height:320px;display:block}.grid[data-v-755f82fd]{width:100%}.ruler[data-v-755f82fd]{z-index:2;pointer-events:none;width:70px;margin-top:-320px;position:sticky;bottom:0;left:0;overflow:visible}.ruler-background[data-v-755f82fd]{fill:#fafafa;stroke:#aaa;stroke-width:1px}.pitch-line[data-v-755f82fd]{stroke:#ddd;stroke-width:1px}.beat-line[data-v-755f82fd]{stroke:#bbb;stroke-dasharray:3 3}.note[data-v-755f82fd]{fill:#6750a4;stroke:#342366;rx:2px}.note.inspected[data-v-755f82fd]{fill:#8068bd}.note.selected[data-v-755f82fd]{fill:#b33c68;stroke-width:2px}.selection-box[data-v-755f82fd]{fill:#b33c6826;stroke:#b33c68;stroke-width:1.5px;stroke-dasharray:5 3;pointer-events:none}.inspection-line[data-v-755f82fd],.boundary-line[data-v-755f82fd]{stroke:#b33c68;stroke-width:1.5px}.boundary-line[data-v-755f82fd]{stroke-dasharray:4 2}text[data-v-755f82fd]{fill:#555;font:11px sans-serif}.beat-label[data-v-755f82fd]{text-anchor:middle;font-weight:600}.cents-label rect[data-v-755f82fd]{fill:#fff;stroke:#b33c68;stroke-width:1.5px}.cents-label line[data-v-755f82fd]{stroke:#b33c68;stroke-width:1.5px}.cents-label text[data-v-755f82fd]{fill:#762344;text-anchor:middle;font-weight:700}.empty[data-v-755f82fd]{font-size:14px}.inspector[data-v-fcd8262b]{background:#fff;border:1px solid #aaa;border-radius:.35rem;margin-top:.75rem;padding:.75rem 1rem}h2[data-v-fcd8262b],p[data-v-fcd8262b]{margin:0 0 .5rem}.empty[data-v-fcd8262b]{color:#666}.details-placeholder[data-v-fcd8262b]{color:#666;margin-top:.75rem;font-style:italic}summary[data-v-fcd8262b]{cursor:pointer;font-weight:600}dl[data-v-fcd8262b]{grid-template-columns:max-content 1fr;gap:.25rem .75rem;display:grid}dt[data-v-fcd8262b]{font-weight:600}dd[data-v-fcd8262b]{margin:0}.selected-elements[data-v-fcd8262b]{margin-bottom:0}.selected-elements li[data-v-fcd8262b]{margin-top:.35rem}.selected-elements span[data-v-fcd8262b]{color:#555;display:block}.tutorial-sidebar[data-v-ef62b911]{background:#f7f8fa;border:1px solid #c8ccd0;border-radius:.5rem;flex-direction:column;gap:.75rem;min-width:0;max-height:calc(100vh - 2rem);padding:1rem;display:flex}h2[data-v-ef62b911],h3[data-v-ef62b911],p[data-v-ef62b911]{margin:0}.chapter-tabs[data-v-ef62b911]{flex-direction:column;gap:.25rem;display:flex}.chapter-tabs button[data-v-ef62b911]{color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:.25rem;padding:.5rem .75rem}.chapter-tabs button[data-v-ef62b911]:hover,.chapter-tabs button.active[data-v-ef62b911]{background:#dfe8f5}.chapter-tabs button.active[data-v-ef62b911]{font-weight:700}.chapter-content[data-v-ef62b911]{min-height:0;overflow-y:auto}.tutorial-section[data-v-ef62b911]{border-top:1px solid #d9dde2;gap:.5rem;padding:.75rem 0;display:grid}.tutorial-demo[data-v-ef62b911]{gap:.4rem;display:grid}.tutorial-demo p[data-v-ef62b911],.html-description[data-v-ef62b911] p{white-space:pre-line;margin:0;line-height:1.4}.html-description[data-v-ef62b911] p+p{margin-top:.6rem}.tune[data-v-ef62b911]{width:100%;color:inherit;text-align:left;cursor:pointer;background:#fff;border:1px solid #b8bec6;border-radius:.25rem;padding:0;overflow:hidden}.tune[data-v-ef62b911]:hover{background:#f0f6ff;border-color:#4d78aa}pre[data-v-ef62b911]{white-space:pre;margin:0;padding:.65rem;font:.8rem/1.35 monospace;overflow-x:auto}.testing-layout[data-v-03257a6d]{grid-template-columns:minmax(16rem,24rem) minmax(0,1fr);grid-template-areas:"tutorial editor""tutorial visualisers";align-items:start;gap:1rem;display:grid}.source-editor[data-v-03257a6d]{flex-direction:column;grid-area:editor;align-items:flex-start;gap:.5rem;display:flex}.testing-layout[data-v-03257a6d] .tutorial-sidebar{grid-area:tutorial;position:sticky;top:1rem}.visualisers[data-v-03257a6d]{grid-area:visualisers;gap:1rem;min-width:0;display:grid}textarea[data-v-03257a6d]{max-width:100%}.actions[data-v-03257a6d]{flex-wrap:wrap;gap:.5rem;display:flex}@media (width<=800px){.testing-layout[data-v-03257a6d]{grid-template-columns:minmax(0,1fr);grid-template-areas:"tutorial""editor""visualisers"}.testing-layout[data-v-03257a6d] .tutorial-sidebar{max-height:32rem;position:static}}