.head{pointer-events:none;white-space:nowrap}.head:after{content:"";pointer-events:auto;position:absolute;inset:-.05em -.1em;border-radius:60% 30%;background:transparent}.scribe{cursor:crosshair}[data-event],[data-events]{cursor:pointer}.alt-key [data-event]{cursor:grab}.bar *,.stave *{-webkit-user-select:none;user-select:none}.chord{pointer-events:none;position:relative}.chord:before{content:"";position:absolute;width:100%;height:1em;pointer-events:auto}.zone{cursor:crosshair;position:relative;background-color:#143c7814;border-radius:.125em;touch-action:none;display:none}.zone[data-absbeat]{display:block}.bar:focus-within .zone{opacity:1;pointer-events:all;cursor:copy}.meta-key .bar:hover .zone{pointer-events:all;cursor:copy}.meta-key .bar:hover .zone:hover{opacity:1;z-index:2}.meta-key .zone{cursor:copy}.zone:focus,.meta-key .zone:hover{background-color:var(--selection-bg)}.zone:focus{outline-offset:0;outline-width:1px;outline-style:solid;outline-color:color(display-p3 .588 .848 0);background-color:var(--selection-bg);border-width:0;box-shadow:none!important}.stave>.zone{grid-row:3 / -3}[data-zone-duration^="0.11"]{--zone-duration: .1111111111}[data-zone-duration^="0.125"]{--zone-duration: .125}[data-zone-duration^="0.14"]{--zone-duration: .1428571429}[data-zone-duration^="0.16"]{--zone-duration: .1666666667}[data-zone-duration^="0.2"]{--zone-duration: .2}[data-zone-duration^="0.25"]{--zone-duration: .25}[data-zone-duration^="0.33"]{--zone-duration: .3333333333}[data-zone-duration^="0.5"]{--zone-duration: .5}[data-zone-duration^="0.66"]{--zone-duration: .6666666667}[data-zone-duration^="1"]{--zone-duration: 1}[data-zone-duration^="1.33"]{--zone-duration: 1.3333333333}[data-zone-duration^="2"]{--zone-duration: 2}[data-zone-duration^="0.11"] .bar[data-duration="4"]>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{display:none!important}[data-zone-duration="0.125"] .bar[data-duration="4"]>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{display:none!important}[data-zone-duration^="0.14"] .bar[data-duration="4"]>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{display:none!important}[data-zone-duration^="0.16"] .bar[data-duration="4"]>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{display:none!important}[data-zone-duration="0.2"] .bar[data-duration="4"]>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{display:none!important}[data-zone-duration="0.25"] .bar[data-duration="4"]>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{display:none!important}[data-zone-duration^="0.33"] .bar[data-duration="4"]>.zone+*+*+*+*+*+*+*+*+*+*+*+.zone{display:none!important}[data-zone-duration="0.5"] .bar[data-duration="4"]>.zone+*+*+*+*+*+*+*+.zone{display:none!important}[data-zone-duration^="0.66"] .bar[data-duration="4"]>.zone+*+*+*+*+*+.zone{display:none!important}[data-zone-duration="1"] .bar[data-duration="4"]>.zone+*+*+*+.zone{display:none!important}.bar>.note{z-index:2;touch-action:none}.bar>.zone{justify-self:stretch;grid-column-start:calc(var(--column-beat-0) + round(var(--beat) * var(--columns-per-beat)) - 1);grid-column-end:span round(var(--columns-per-beat) * var(--zone-duration));margin-left:-1px;margin-right:2px;min-width:.5em;z-index:1}.bar>.zone{--beat: 0}.bar>.zone+.zone{--beat: calc(1 * var(--zone-duration))}.bar>.zone+*+.zone{--beat: calc(2 * var(--zone-duration))}.bar>.zone+*+*+.zone{--beat: calc(3 * var(--zone-duration))}.bar>.zone+*+*+*+.zone{--beat: calc(4 * var(--zone-duration))}.bar>.zone+*+*+*+*+.zone{--beat: calc(5 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+.zone{--beat: calc(6 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+.zone{--beat: calc(7 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+.zone{--beat: calc(8 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+.zone{--beat: calc(9 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(10 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(11 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(12 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(13 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(14 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(15 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(16 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(17 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(18 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(19 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(20 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(21 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(22 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(23 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(24 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(25 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(26 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(27 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(28 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(29 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(30 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(31 * var(--zone-duration))}.bar>.zone+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+.zone{--beat: calc(32 * var(--zone-duration))}[data-zone-duration^="0.11"] kbd[title="9"],[data-zone-duration="0.125"] kbd[title="8"],[data-zone-duration^="0.14"] kbd[title="7"],[data-zone-duration^="0.16"] kbd[title="6"],[data-zone-duration="0.2"] kbd[title="5"],[data-zone-duration="0.25"] kbd[title="4"],[data-zone-duration^="0.33"] kbd[title="3"],[data-zone-duration="0.5"] kbd[title="2"],[data-zone-duration="1"] kbd[title="1"]{color:#fff;background:color(display-p3 0 .651 1)}.shift-key .shift-kbd,.ctrl-key .ctrl-kbd,.alt-key .alt-kbd,.meta-key .meta-kbd{color:#000;background:#0003}kbd[title=S]:before{content:"B\ed60"}kbd[title=Z]:before{content:"A"}.meta-key:not(.shift-key) kbd[title=S],.meta-key kbd[title=Z]{font-family:inherit;font-size:.75em;font-weight:600;text-transform:uppercase;color:#000;background:#0003}.meta-key:not(.shift-key) kbd[title=S]:before{content:"Save"}.meta-key kbd[title=Z]:before{content:"Undo"}.shift-key.meta-key kbd[title=Z]:before{content:"Redo"}*>.keyboard{margin-left:auto;margin-right:auto}.keyboard{font-size:1rem;display:grid;column-gap:.125em;row-gap:.125em;grid-template-columns:repeat(44,.85416em);grid-template-rows:min-content repeat(10,1.3125em);justify-content:center;justify-items:stretch;align-items:stretch;grid-auto-flow:row}.keyboard>*{margin:0}.keyboard>.grid-label{grid-column-start:4;grid-column-end:span 30;grid-row:1}.keyboard>.octave-label{grid-column-start:34;grid-column-end:span 10;grid-row:1}.keyboard>kbd{grid-column-end:span 3;grid-row-end:span 2}.keyboard>.backspace-kbd{grid-column-end:span 5}.keyboard>.tab-kbd{grid-column-end:span 4}.keyboard>.enter-kbd{grid-column-end:span 4}.keyboard>.lock-kbd{grid-column-end:span 5}.keyboard>.l-shift-kbd{grid-column-end:span 4}.keyboard>.r-shift-kbd{grid-column-end:span 7}.keyboard>.meta-kbd{grid-column-end:span 4}.keyboard>.space-kbd{grid-column-end:span 15}.keyboard>.up-kbd{grid-column-start:39;grid-row-end:span 1;line-height:1.3125em}.keyboard>.down-kbd{grid-column-start:39;grid-row-end:span 1;line-height:1.3125em}.keyboard>.right-kbd{grid-column-start:42;grid-row-start:10}.keyboard>.kbd-1{grid-row-start:2}kbd{width:100%;height:100%;line-height:2.8125rem;text-align:center;color:#fff;background-color:#00000014;border-radius:.25em;overflow:hidden}kbd[title]{color:#000;background-color:#0003}.light-kbd[title],.dark-kbd[title]{font-family:JazzText,Jazz;font-size:1.3333em;font-weight:300;color:transparent;background-color:#00000014}kbd>.glyph{font-size:1.5em;line-height:1em;vertical-align:.4em}.up-kbd,.down-kbd,.left-kbd,.right-kbd{color:transparent}.selection:not(.shift-key) .up-kbd,.selection:not(.shift-key) .down-kbd,.selection .left-kbd,.selection .right-kbd{color:#000;background-color:#0003}.scribe:focus-within~footer .light-kbd{color:#fff;background-color:#0003}.scribe:focus-within~footer .dark-kbd{color:#000;background-color:#0003}.button-flex{column-gap:.125em;row-gap:.125em}.glyph-button{width:2.8125rem;height:100%;line-height:2.8125rem;text-align:center;color:#000;background-color:#00000014;border-radius:.25em;overflow:hidden;white-space:nowrap}.glyph-button[for="zone-duration-input-1/8"]{width:1.6875rem}.glyph-button[for="zone-duration-input-1/6"]{width:1.875rem}.glyph-button[for="zone-duration-input-1/4"]{width:2.0625rem}.glyph-button[for="zone-duration-input-1/3"]{width:2.25rem}.glyph-button[for="zone-duration-input-1/2"]{width:2.4375rem}.glyph-button[for="zone-duration-input-2/3"]{width:2.625rem}.glyph-button[for=zone-duration-input-1]{width:2.8125rem}.glyph-button>.glyph{font-size:1.75rem;line-height:1em;vertical-align:.4em}.glyph-button.on,.invisible:checked+.glyph-button{color:#fff;background-color:var(--selection-fg)}.delete-thumb{--size: 2.8125rem;border-radius:50%}.delete-thumb:before{content:"\2a2f";position:absolute;inset:0;text-align:center;font-size:2em}.radio-button{color:#000;background-color:#e0e0e0}.invisible:checked+.radio-button{color:#fff;background-color:transparent}.symbol-button{font-size:2.25em;line-height:var(--size);min-width:calc(.75 * var(--size));padding-left:0;padding-right:0}.symbol-button>.accent-text{position:absolute;left:0;right:0;top:0;height:50%;line-height:calc(.667 * var(--size))}.symbol-button+.symbol-button,.symbol-button+.invisible+.symbol-button{border-left:1px solid white}.handle{font-family:ui-sans-serif,system-ui;touch-action:none}.sequence-handle{font-size:2em;min-width:.75em;height:1.03125em;line-height:1.03125em;text-align:center;align-self:center;color:#143c783d;border-radius:0 .125em .125em 0;cursor:ew-resize}.sequence-handle:before{content:"\2b0c";display:inline-block;font-size:.875em;height:1.125em;line-height:1em;vertical-align:top}.scribe>.sequence-handle{margin-left:-.125em;margin-right:-.625em;padding-left:.125em}.select-rectangle{position:fixed;pointer-events:none;z-index:100;border:1px dotted var(--selection-fg);background-color:oklch(from var(--selection-fg) l c h / .05)}.no-select{-webkit-user-select:none;user-select:none}.panel{border-radius:.5em}.selection-panel{display:grid;column-gap:.375rem;column-gap:1px;grid-template-columns:1fr min-content min-content;min-height:2.8125rem;padding:1em var(--x-padding);padding-bottom:1rem;justify-items:stretch;justify-content:center;align-content:center}@media(min-width:30em){.selection-panel{padding:1em calc(var(--x-padding) - .5em)}}.selection-panel>.pill{min-height:2.8125rem}.selection-panel>.pill:first-of-type{border-top-right-radius:0;border-bottom-right-radius:0}.selection-panel>.pill:last-of-type{border-top-left-radius:0;border-bottom-left-radius:0}.selection-panel>.delete-thumb{margin-left:.3125rem}.selection-pill{display:flex;justify-content:center;flex-wrap:nowrap;padding-left:0;padding-right:0}body>.selection-panel{position:fixed;top:calc(.75 * var(--x-padding) + 1 * var(--size-02) + .667em);left:0;right:0;z-index:5}.d-grid{display:grid;grid-template-columns:min-content min-content min-content}.pill>.button:last-child{border-top-right-radius:inherit;border-bottom-right-radius:inherit}.editor-body{padding-bottom:14rem}body>.editor-footer{position:fixed;bottom:0;left:0;right:0;z-index:4}.editor-footer>.font-09{margin:0}@media(pointer:coarse)and (hover:none){.editor-footer{display:grid;justify-content:space-between;column-gap:.125em;padding:.125em}.editor-footer>*{grid-row:2}.editor-footer>.font-09{grid-row:1}.editor-footer>.editor-form{justify-self:end;margin-left:auto;margin-right:0}}html{height:100%;--selection-fg: var(--blue);--selection-bg: oklch(.69 .2 237.17 / .18);--zone-duration: .5}::selection{color:#fff;background-color:var(--selection-fg)}@media(pointer:coarse){.scribe{font-size:1.75rem}}