.alk-midi.alk-midi{min-width:0;color:var(--alk-ink,#111827);font:400 .8rem/1.35 var(--alk-sans,system-ui, sans-serif);--midi-blue:#2e7dd7;--midi-teal:#178e88;--midi-amber:#b98023;--midi-orange:#ec641d;--midi-color:var(--midi-blue);margin:1.5rem 0;display:block;container-type:inline-size}.alk-midi *,.alk-midi :before,.alk-midi :after{box-sizing:border-box}.alk-midi .alk-midi-frame{border:1px solid var(--alk-rule,#cbd1da);background:var(--alk-paper,#fff);box-shadow:0 1px 2px color-mix(in srgb, var(--alk-ink,#111827) 8%, transparent);border-radius:.45rem;position:relative}.alk-midi button,.alk-midi input,.alk-midi select{color:inherit;font:500 .7rem/1.15 var(--alk-mono,ui-monospace, monospace);accent-color:var(--midi-blue);margin:0}.alk-midi button,.alk-midi select,.alk-midi input[type=number]{border:1px solid var(--alk-rule,#cbd1da);background:var(--alk-field,#f6f7f8);border-radius:.22rem;min-height:1.85rem;padding:.27rem .42rem}.alk-midi button{cursor:pointer}.alk-midi button:hover:not(:disabled),.alk-midi summary:hover{border-color:color-mix(in srgb, var(--alk-ink,#111827) 45%, var(--alk-rule,#cbd1da));background:color-mix(in srgb, var(--alk-field,#f6f7f8) 65%, var(--alk-paper,#fff))}.alk-midi button:disabled,.alk-midi input:disabled,.alk-midi select:disabled{opacity:.46;cursor:default}.alk-midi :is(button,input,select,summary):focus-visible{outline:2px solid var(--midi-blue);outline-offset:2px}.alk-midi .alk-midi-toolbar{z-index:10;border-bottom:1px solid var(--alk-rule,#cbd1da);background:color-mix(in srgb, var(--alk-field,#f6f7f8) 84%, var(--alk-paper,#fff));flex-wrap:wrap;align-items:center;gap:.35rem;padding:.25rem .5rem;display:flex;position:relative}.alk-midi :is(.alk-midi-transport,.alk-midi-edit-tools,.alk-midi-track-controls){align-items:center;gap:.22rem;display:inline-flex}.alk-midi .alk-midi-transport,.alk-midi .alk-midi-edit-tools{border-right:1px solid var(--alk-rule,#cbd1da);padding-right:.35rem}.alk-midi .alk-midi-play{border-color:var(--alk-ink,#111827);background:var(--alk-ink,#111827);min-width:3.65rem;color:var(--alk-paper,#fff)}.alk-midi .alk-midi-play:hover:not(:disabled){border-color:var(--midi-blue);background:var(--midi-blue);color:var(--alk-paper,#fff)}.alk-midi .alk-midi-icon-button{place-items:center;width:1.85rem;min-width:1.85rem;padding:.25rem;display:inline-grid}.alk-midi .alk-midi-icon-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.45px;width:.92rem;height:.92rem}.alk-midi [data-midi-stop] svg rect{fill:currentColor;stroke:none}.alk-midi [data-midi-tool][aria-pressed=true]{border-color:color-mix(in srgb, var(--midi-blue) 65%, var(--alk-rule,#cbd1da));background:color-mix(in srgb, var(--midi-blue) 13%, var(--alk-paper,#fff));color:var(--midi-blue)}.alk-midi :is(.alk-midi-tempo,.alk-midi-snap){color:var(--alk-muted,#5c6675);font:500 .65rem/1 var(--alk-mono,ui-monospace, monospace);align-items:center;gap:.22rem;display:inline-flex}.alk-midi .alk-midi-tempo input{width:3.55rem}.alk-midi .alk-midi-snap select{min-width:2.5rem}.alk-midi .alk-midi-instrument select{min-width:5.75rem}.alk-midi .alk-midi-more{margin:0 0 0 auto;padding:0;position:static}.alk-midi .alk-midi-more summary,.alk-midi .alk-midi-note-details summary{border:1px solid var(--alk-rule,#cbd1da);background:var(--alk-field,#f6f7f8);min-height:1.85rem;color:var(--alk-muted,#5c6675);cursor:pointer;font:500 .7rem/1.1 var(--alk-mono,ui-monospace, monospace);border-radius:.22rem;padding:.33rem .45rem;list-style:none}.alk-midi .alk-midi-more summary::-webkit-details-marker,.alk-midi .alk-midi-note-details summary::-webkit-details-marker{display:none}.alk-midi .alk-midi-more summary:after,.alk-midi .alk-midi-note-details summary:after{content:"⌄";margin-left:.35rem}.alk-midi .alk-midi-more[open] summary:after,.alk-midi .alk-midi-note-details[open] summary:after{content:"⌃"}.alk-midi .alk-midi-more-panel{z-index:20;border:1px solid var(--alk-rule,#cbd1da);background:var(--alk-paper,#fff);width:min(23rem,100% - 1rem);max-height:min(24rem,70vh);box-shadow:0 .6rem 1.5rem color-mix(in srgb, var(--alk-ink,#111827) 16%, transparent);border-radius:.35rem;grid-template-columns:repeat(2,minmax(8.5rem,1fr));gap:.5rem;padding:.6rem;display:grid;position:absolute;top:calc(100% + .35rem);right:.5rem;overflow:auto}.alk-midi .alk-midi-more:not([open]) .alk-midi-more-panel{display:none}.alk-midi .alk-midi-more-panel label,.alk-midi .alk-midi-inspector label{color:var(--alk-muted,#5c6675);font:500 .64rem/1.15 var(--alk-mono,ui-monospace, monospace);gap:.25rem;display:grid}.alk-midi .alk-midi-more-panel :is(select,input[type=range]){width:100%}.alk-midi .alk-midi-more-panel .alk-midi-loop{align-items:center;gap:.35rem;display:flex}.alk-midi .alk-midi-seek{grid-column:1/-1}.alk-midi .alk-midi-seek output{color:var(--alk-ink,#111827)}.alk-midi .alk-midi-tracks{border-bottom:1px solid var(--alk-rule,#cbd1da);background:var(--alk-paper,#fff);scrollbar-width:thin;gap:.2rem;min-width:0;padding:.3rem .5rem;display:flex;overflow-x:auto}.alk-midi .alk-midi-tracks [data-midi-track]{min-height:1.7rem;color:var(--alk-muted,#5c6675);background:0 0;border:1px solid #0000;border-radius:999px;flex:none;padding:.2rem .55rem}.alk-midi .alk-midi-tracks [data-midi-track][aria-pressed=true]{border-color:color-mix(in srgb, var(--midi-color) 50%, var(--alk-rule,#cbd1da));background:color-mix(in srgb, var(--midi-color) 11%, var(--alk-paper,#fff));color:var(--alk-ink,#111827)}.alk-midi [data-voice=piano]{--midi-color:var(--midi-blue)}.alk-midi [data-voice=supersaw]{--midi-color:var(--midi-teal)}.alk-midi [data-voice=bass]{--midi-color:var(--midi-amber)}.alk-midi .alk-midi-workspace{height:var(--alk-midi-height,300px);min-height:160px;max-height:600px}.alk-midi .alk-midi-roll-wrap{overscroll-behavior:contain;scrollbar-width:thin;background:var(--alk-paper,#fff);width:100%;min-width:0;height:100%;position:relative;overflow:auto}.alk-midi .alk-midi-ruler{z-index:5;border-bottom:1px solid var(--alk-rule,#cbd1da);background:color-mix(in srgb, var(--alk-field,#f6f7f8) 88%, var(--alk-paper,#fff));height:25px;position:sticky;top:0}.alk-midi .alk-midi-ruler span{color:var(--alk-muted,#5c6675);font:10px/1 var(--alk-mono,ui-monospace, monospace);cursor:pointer;padding-left:3px;position:absolute;top:6px}.alk-midi .alk-midi-roll{background-color:var(--alk-paper,#fff);background-image:repeating-linear-gradient(to bottom, transparent 0, transparent 15px, color-mix(in srgb, var(--alk-rule,#cbd1da) 72%, transparent) 15px, color-mix(in srgb, var(--alk-rule,#cbd1da) 72%, transparent) 16px), repeating-linear-gradient(to right, transparent 0, transparent 31px, color-mix(in srgb, var(--alk-rule,#cbd1da) 44%, transparent) 31px, color-mix(in srgb, var(--alk-rule,#cbd1da) 44%, transparent) 32px), repeating-linear-gradient(to right, transparent 0, transparent 127px, color-mix(in srgb, var(--alk-ink,#111827) 20%, transparent) 127px, color-mix(in srgb, var(--alk-ink,#111827) 20%, transparent) 128px);touch-action:pan-x pan-y;background-position:44px 0,44px 0,44px 0;background-size:auto, auto, var(--midi-bar-width,128px) auto;min-height:100%;position:relative}.alk-midi[data-tool=draw] .alk-midi-roll{touch-action:none}.alk-midi[data-tool=erase] .alk-midi-roll,.alk-midi[data-tool=erase] .alk-midi-note{cursor:crosshair}.alk-midi .alk-midi-note{z-index:2;border:1px solid color-mix(in srgb, var(--midi-color) 75%, var(--alk-ink,#111827));background:color-mix(in srgb, var(--midi-color) 34%, var(--alk-paper,#fff));min-height:0;color:var(--alk-ink,#111827);font:10px/1 var(--alk-mono,ui-monospace, monospace);white-space:nowrap;text-align:left;cursor:grab;user-select:none;touch-action:none;border-radius:2px;padding:0 8px 0 3px;position:absolute;overflow:hidden}.alk-midi .alk-midi-note:hover:not(:disabled){border-color:var(--midi-color);background:color-mix(in srgb, var(--midi-color) 49%, var(--alk-paper,#fff))}.alk-midi .alk-midi-note[data-selected=true]{outline:2px solid var(--midi-color);outline-offset:1px;z-index:3}.alk-midi .alk-midi-note[data-ghost=true]{opacity:.42;pointer-events:none}.alk-midi .alk-midi-note[data-muted=true]{opacity:.2}.alk-midi .alk-midi-note-label{text-overflow:ellipsis;display:block;overflow:hidden}.alk-midi .alk-midi-draft{z-index:2;border:1px dashed var(--midi-color);background:color-mix(in srgb, var(--midi-color) 20%, transparent);pointer-events:none;border-radius:2px;min-height:0;position:absolute}.alk-midi .alk-midi-resize{cursor:ew-resize;width:7px;position:absolute;top:0;bottom:0;right:0}.alk-midi .alk-midi-key{z-index:4;border:0;border-right:1px solid var(--alk-rule,#cbd1da);border-bottom:1px solid var(--alk-rule,#cbd1da);background:color-mix(in srgb, var(--alk-paper,#fff) 94%, var(--alk-field,#f6f7f8));width:44px;height:16px;min-height:0;color:var(--alk-ink,#111827);font:9px/1 var(--alk-mono,ui-monospace, monospace);text-align:right;border-radius:0;padding:0 5px;position:absolute;left:0;transform:translateY(-50%)}.alk-midi .alk-midi-key[data-black=true]{background:color-mix(in srgb, var(--alk-ink,#111827) 72%, var(--alk-paper,#fff));color:var(--alk-paper,#fff)}.alk-midi .alk-midi-playhead{z-index:3;background:var(--midi-orange);width:2px;box-shadow:0 0 0 1px color-mix(in srgb, var(--midi-orange) 35%, transparent);pointer-events:none;position:absolute;top:0;bottom:0}.alk-midi .alk-midi-note-details{border-top:1px solid var(--alk-rule,#cbd1da);background:var(--alk-field,#f6f7f8);position:relative}.alk-midi .alk-midi-note-details summary{width:max-content;margin:.35rem .5rem}.alk-midi .alk-midi-inspector{flex-wrap:wrap;align-items:end;gap:.4rem .55rem;padding:.2rem .5rem .55rem;display:flex}.alk-midi .alk-midi-inspector input{background:var(--alk-paper,#fff);width:4.4rem;min-width:0}.alk-midi .alk-midi-footer{border-top:1px solid var(--alk-rule,#cbd1da);color:var(--alk-muted,#5c6675);font:.63rem/1.35 var(--alk-mono,ui-monospace, monospace);justify-content:space-between;align-items:baseline;gap:.75rem;padding:.3rem .5rem;display:flex}.alk-midi .alk-midi-footer p,.alk-midi .alk-midi-status{margin:0}.alk-midi .alk-midi-status{text-align:right}.alk-midi[data-state=error] .alk-midi-status{color:#c64232}.alk-midi .alk-midi-caption,.alk-midi .alk-midi-fallback{color:var(--alk-muted,#5c6675);font:.75rem/1.5 var(--alk-sans,system-ui, sans-serif);padding:.65rem .75rem}.alk-midi .alk-midi-caption{border-top:1px solid var(--alk-rule,#cbd1da);margin:0}.alk-midi .alk-midi-fallback svg{width:100%;height:auto;display:block}.alk-midi .alk-midi-fallback ul{max-height:10rem;overflow:auto}.alk-midi .alk-midi-visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.alk-midi [hidden]{display:none!important}.alk-midi[data-ready=true] .alk-midi-fallback,.alk-midi:not([data-ready=true]) :is(.alk-midi-tracks,.alk-midi-workspace,.alk-midi-note-details,.alk-midi-footer){display:none}@container (width<=680px){.alk-midi .alk-midi-play{min-width:2.85rem}.alk-midi .alk-midi-tempo input{width:2.85rem}.alk-midi .alk-midi-instrument select{width:4.8rem;min-width:4.8rem}}@container (width<=540px){.alk-midi .alk-midi-toolbar{gap:.3rem}.alk-midi .alk-midi-edit-tools{border-top:1px solid var(--alk-rule,#cbd1da);border-right:0;order:4;width:100%;padding-top:.25rem;padding-right:0}.alk-midi .alk-midi-more{margin:0}.alk-midi .alk-midi-more-panel{grid-template-columns:1fr;width:min(18rem,100% - 1rem);right:.5rem}.alk-midi .alk-midi-footer{flex-direction:column;align-items:flex-start;gap:.1rem}.alk-midi .alk-midi-status{text-align:left}}.alk-midi .alk-midi-more>summary{text-align:center;width:1.85rem;padding-inline:.2rem;font-weight:700}.alk-midi .alk-midi-more>summary:after{content:none}