.mx-app{font-family:var(--font-mono);display:grid;gap:var(--space-md);color:#fff}body.theme-light .mx-app{color:var(--ink-base)}.mx-row{--mx-ac: var(--accent);--mx-ac-border: var(--accent-border);--mx-ac-fill: var(--accent-fill)}.mx-row[data-track=kick]{--mx-ac: var(--phase-p1);--mx-ac-border: var(--phase-p1-border);--mx-ac-fill: var(--phase-p1-fill)}.mx-row[data-track=snare]{--mx-ac: var(--phase-p5);--mx-ac-border: var(--phase-p5-border);--mx-ac-fill: var(--phase-p5-fill)}.mx-row[data-track=hihat]{--mx-ac: var(--phase-p2);--mx-ac-border: var(--phase-p2-border);--mx-ac-fill: var(--phase-p2-fill)}.mx-row[data-track=perc]{--mx-ac: var(--phase-p6);--mx-ac-border: var(--phase-p6-border);--mx-ac-fill: var(--phase-p6-fill)}.mx-row[data-track=bass]{--mx-ac: var(--phase-p3);--mx-ac-border: var(--phase-p3-border);--mx-ac-fill: var(--phase-p3-fill)}.mx-row[data-track=chords]{--mx-ac: var(--phase-p4);--mx-ac-border: var(--phase-p4-border);--mx-ac-fill: var(--phase-p4-fill)}.mx-row[data-track=lead]{--mx-ac: var(--brand-green);--mx-ac-border: var(--brand-green-border);--mx-ac-fill: var(--brand-green-fill)}.mx-row[data-track=tomhi],.mx-row[data-track=tommid],.mx-row[data-track=tomfloor]{--mx-ac: var(--phase-p6);--mx-ac-border: var(--phase-p6-border);--mx-ac-fill: var(--phase-p6-fill)}.mx-row[data-track=cymbal]{--mx-ac: var(--accent-neutral);--mx-ac-border: var(--accent-neutral-border);--mx-ac-fill: var(--accent-neutral-fill)}.mx-row[data-track=fx]{--mx-ac: var(--brand-gray);--mx-ac-border: var(--brand-gray-border);--mx-ac-fill: var(--brand-gray-fill)}.mx-transport{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);padding:var(--space-sm) 0;border-bottom:1px solid var(--line-subtle)}.mx-btn{border:1px solid var(--line-card);border-radius:var(--radius-sm);background:transparent;color:inherit;font:inherit;font-size:var(--font-size-sm);padding:var(--space-xs) var(--space-md);cursor:pointer}.mx-btn:hover{border-color:var(--mx-zac-border, var(--accent-border))}.mx-btn-sm{font-size:var(--font-size-min);padding:var(--space-xs) var(--space-sm);display:inline-flex;align-items:center;gap:var(--space-xs)}.mx-transport-btns{display:inline-flex;gap:var(--space-xs)}.mx-tbtn{border:1px solid var(--line-card);border-radius:var(--radius-sm);background:transparent;color:inherit;inline-size:2.2rem;block-size:2.2rem;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.mx-tbtn:hover{border-color:var(--accent-border)}.mx-tbtn.is-active{background:var(--accent-fill);border-color:var(--accent)}.mx-tbtn-play.is-active{background:var(--accent-border)}.mx-tbtn.is-loading{opacity:.55}.mx-ibtn{border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:inherit;inline-size:1.7rem;block-size:1.7rem;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.mx-ibtn:hover{border-color:var(--mx-zac-border, var(--accent-border))}.mx-field{display:inline-flex;align-items:center;gap:var(--space-xs);color:inherit;font-size:var(--font-size-min)}.mx-field input[type=number]{width:4.5rem;background:transparent;border:1px solid var(--line-card);border-radius:var(--radius-sm);color:inherit;font:inherit;padding:var(--space-xs)}.mx-field input[type=range]{accent-color:var(--accent)}.mx-field-master{margin-left:auto}.mx-select{background:transparent;border:1px solid var(--line-card);border-radius:var(--radius-sm);color:inherit;font:inherit;font-size:var(--font-size-min);padding:var(--space-xs)}.mx-ai{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);padding-bottom:var(--space-xs);border-bottom:1px solid var(--line-subtle)}.mx-ai-status{font-size:var(--font-size-min);color:inherit;margin-left:auto}.mx-grid{display:grid;gap:var(--space-xs);overflow-x:auto;padding-bottom:var(--space-xs)}.mx-row{display:grid;grid-template-columns:12rem 1fr;gap:var(--space-sm);align-items:center;min-width:46rem}.mx-row-head{display:flex;flex-direction:column;gap:var(--space-xs);padding-block:var(--space-xs)}.mx-row-top{display:flex;align-items:center;gap:var(--space-xs);white-space:nowrap}.mx-row-label{color:inherit;font-size:var(--font-size-sm);white-space:nowrap;min-width:4.5rem}.mx-row-label:before{content:"";display:inline-block;inline-size:.55rem;block-size:.55rem;border-radius:var(--radius-round);background:var(--mx-ac);margin-right:var(--space-xs)}.mx-mini{border:1px solid var(--line-card);border-radius:var(--radius-sm);background:transparent;color:inherit;font:inherit;font-size:var(--font-size-min);inline-size:1.6rem;block-size:1.6rem;cursor:pointer}.mx-mini.is-active{background:var(--mx-ac-border);border-color:var(--mx-ac)}.mx-vol,.mx-pan{accent-color:var(--mx-ac);width:100%}.mx-sound{width:100%}.mx-steps{display:grid;grid-template-columns:repeat(32,minmax(.9rem,1fr));gap:.2rem}.mx-grid[data-length="16"] .mx-steps{grid-template-columns:repeat(16,minmax(.9rem,1fr))}.mx-grid[data-length="16"] .mx-step:nth-child(n+17){display:none}.mx-step{aspect-ratio:1;border:1px solid var(--line-subtle);border-radius:var(--radius-sm);background:transparent;padding:0;cursor:pointer;position:relative}.mx-step.is-beat{border-color:var(--line-card)}.mx-step.is-soft{background:var(--mx-ac-fill)}.mx-step.is-on{background:var(--mx-ac-border)}.mx-step.is-accent{background:var(--mx-ac)}.mx-step.is-open:after{content:"";position:absolute;inset:22%;border-radius:var(--radius-round);border:2px solid currentColor}.mx-step.is-play{outline:2px solid var(--mx-ac);outline-offset:1px}.mx-row[data-kind=tonal] .mx-step{font-size:var(--font-size-min);line-height:1;overflow:hidden;color:inherit;letter-spacing:-.03em}.mx-slots{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);padding-bottom:var(--space-xs);border-bottom:1px solid var(--line-subtle)}.mx-zone{display:grid;gap:var(--space-xs);padding-bottom:var(--space-sm);border-bottom:1px solid var(--line-subtle)}.mx-zone-library{--mx-zac: var(--phase-p1);--mx-zac-border: var(--phase-p1-border);--mx-zac-fill: var(--phase-p1-fill)}.mx-zone-song{--mx-zac: var(--phase-p2);--mx-zac-border: var(--phase-p2-border);--mx-zac-fill: var(--phase-p2-fill)}.mx-zone-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm)}.mx-zone-title{font-size:var(--font-size-min);letter-spacing:.14em;text-transform:uppercase;color:inherit;opacity:.75;margin-right:var(--space-xs)}.mx-slot-msg{font-size:var(--font-size-min);color:inherit;margin-left:auto}.mx-cards{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--space-xs);min-height:2.4rem}.mx-card{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:var(--space-xs);border:1px solid var(--line-card);border-radius:var(--radius-sm);background:var(--surface-card);padding:var(--space-xs) var(--space-sm);min-width:8rem;cursor:grab}.mx-card:hover{border-color:var(--mx-zac-border, var(--accent-border));background:var(--surface-card-hover)}.mx-card:active{cursor:grabbing}.mx-card.is-dragging{opacity:.5}.mx-card.is-editing{border-color:var(--mx-zac, var(--accent));background:var(--mx-zac-fill, var(--accent-fill))}.mx-card.is-playing{box-shadow:0 0 0 2px var(--mx-zac-border, var(--accent-border))}.mx-card-name{font-size:var(--font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx-card-meta{grid-column:1 / -1;display:flex;align-items:center;gap:var(--space-xs);font-size:var(--font-size-min);opacity:.8}.mx-badge{border-radius:var(--radius-sm);padding:0 var(--space-xs);font-size:var(--font-size-min)}.mx-badge.is-editing{background:var(--mx-zac-fill, var(--accent-fill));border:1px solid var(--mx-zac-border, var(--accent-border))}.mx-badge.is-playing{background:var(--mx-zac-border, var(--accent-border));border:1px solid var(--mx-zac, var(--accent))}.mx-card-add{font:inherit;color:inherit;display:inline-flex;align-items:center;justify-content:center;min-width:2.4rem;border:1px dashed var(--line-card);background:transparent;cursor:pointer}.mx-card-add:hover{border-color:var(--mx-zac, var(--accent))}.mx-song-select{max-width:10rem}.mx-song-name{width:9rem}.mx-save-status{font-size:var(--font-size-min);opacity:.7}.mx-save-status.is-dirty{opacity:1;color:var(--mx-zac, var(--accent))}.mx-btn-songplay{margin-left:auto}.mx-btn-songplay.is-playing{background:var(--mx-zac-border, var(--accent-border));border-color:var(--mx-zac, var(--accent))}.mx-timeline{overflow-x:auto;scrollbar-width:thin;display:grid;gap:.15rem;padding-block:var(--space-xs)}.mx-ruler{display:flex;align-items:flex-end;min-height:.9rem}.mx-ruler-cell{flex:0 0 auto;font-size:var(--font-size-min);opacity:.6;border-left:1px solid var(--line-card);padding-left:var(--space-xs);line-height:1}.mx-lane{display:flex;align-items:stretch;gap:.2rem;min-height:3.1rem}.mx-lane.is-empty{border:1px dashed var(--line-card);border-radius:var(--radius-sm);align-items:center;padding-inline:var(--space-sm)}.mx-lane-hint{font-size:var(--font-size-min);opacity:.7}.mx-block{position:relative;flex:0 0 auto;display:grid;grid-template-columns:1fr auto auto;align-items:center;column-gap:var(--space-xs);border:1px solid var(--line-card);border-left-width:3px;border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-sm);cursor:grab;overflow:hidden}.mx-block:hover{border-color:var(--mx-zac-border, var(--accent-border))}.mx-block:active{cursor:grabbing}.mx-block.is-dragging{opacity:.5}.mx-block.is-selected{border-color:var(--mx-zac, var(--accent))}.mx-block.is-playing{background:var(--mx-zac-fill, var(--accent-fill));border-color:var(--mx-zac, var(--accent))}.mx-block-name{font-size:var(--font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx-block-bars{grid-column:1 / -1;font-size:var(--font-size-min);opacity:.7}.mx-block-x{border:0;background:transparent;color:inherit;font:inherit;font-size:var(--font-size-min);opacity:.6;cursor:pointer;padding:0 var(--space-xs)}.mx-block-x:hover{color:var(--signal-red);opacity:1}.mx-block.is-playing:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,var(--mx-zac-border, var(--accent-border)),transparent 72%);opacity:var(--mx-pulse, .2);transition:opacity .2s ease-out;pointer-events:none}.mx-block-viz{position:absolute;inset:0;display:flex;align-items:flex-end;gap:6%;padding:0 10%;pointer-events:none;opacity:.45}.mx-viz-bar{flex:1 1 0;height:10%;background:var(--accent);border-radius:var(--radius-sm) var(--radius-sm) 0 0;transition:height .16s ease-out}.mx-viz-bar:nth-child(1){background:var(--phase-p1)}.mx-viz-bar:nth-child(2){background:var(--phase-p5)}.mx-viz-bar:nth-child(3){background:var(--phase-p2)}.mx-viz-bar:nth-child(4){background:var(--phase-p6)}.mx-viz-bar:nth-child(5){background:var(--phase-p3)}.mx-viz-bar:nth-child(6){background:var(--phase-p4)}.mx-viz-bar:nth-child(7){background:var(--brand-green)}.mx-block-progress{position:absolute;inset-inline-start:0;inset-block-end:0;block-size:.2rem;inline-size:0;background:var(--mx-zac, var(--accent));pointer-events:none}.mx-menu{position:fixed;z-index:40;display:grid;min-width:11rem;background:var(--surface-card);border:1px solid var(--line-card);border-radius:var(--radius-sm);box-shadow:var(--shadow-card);padding:var(--space-xs)}.mx-menu[hidden]{display:none}.mx-menu-item{border:0;background:transparent;color:inherit;font:inherit;font-size:var(--font-size-sm);text-align:left;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);cursor:pointer}.mx-menu-item:hover{background:var(--accent-fill)}.mx-menu-item.is-danger:hover{background:transparent;color:var(--signal-red)}.mx-editor-head{padding-bottom:0}.mx-editing{font-size:var(--font-size-sm)}.mx-editing-name{font-weight:600}.mx-savebar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs)}.mx-name-input{background:transparent;border:1px solid var(--line-card);border-radius:var(--radius-sm);color:inherit;font:inherit;font-size:var(--font-size-min);padding:var(--space-xs);width:12rem}.mx-sendrow{display:flex;align-items:center;gap:var(--space-xs)}.mx-sendrow input[type=range]{flex:1;min-width:0;width:auto}.mx-send-label{font-size:var(--font-size-min);color:inherit}.mx-send{accent-color:var(--mx-ac)}.mx-ai-title{color:var(--brand-green)}.mx-fxbar input[type=range]{accent-color:var(--accent);width:5.5rem}.mx-fxbar .mx-btn.is-active{background:var(--accent-border);border-color:var(--accent)}.mx-mini-edit[aria-pressed=true],.mx-mini.is-active{background:var(--mx-ac-border);border-color:var(--mx-ac)}.mx-roll{grid-column:1 / -1;display:grid;gap:.2rem;padding:var(--space-sm) 0;border-block:1px solid var(--line-subtle);margin-block:var(--space-xs)}.mx-roll-row{display:grid;grid-template-columns:12rem 1fr;gap:var(--space-sm);align-items:center}.mx-roll-label{text-align:right;padding-right:var(--space-xs);font-size:var(--font-size-min);color:inherit}.mx-roll-cells{display:grid;grid-template-columns:repeat(32,minmax(.9rem,1fr));gap:.2rem;touch-action:none}.mx-grid[data-length="16"] .mx-roll-cells{grid-template-columns:repeat(16,minmax(.9rem,1fr))}.mx-grid[data-length="16"] .mx-roll-cell:nth-child(n+17){display:none}.mx-roll-cell{block-size:.9rem;border:1px solid var(--line-subtle);border-radius:var(--radius-sm);cursor:pointer}.mx-roll-cell.is-beat{border-color:var(--line-card)}.mx-roll-cell.is-note{background:var(--mx-ac)}.mx-roll-cell.is-tail{background:var(--mx-ac-fill)}.mx-roll-hint{grid-column:1 / -1;margin:0;font-family:var(--font-sans);font-size:var(--font-size-min);color:inherit}.mx-mini-edit{inline-size:auto;padding-inline:var(--space-xs)}.mx-mini-edit.is-active{background:var(--mx-ac-border);border-color:var(--mx-ac)}.mx-sound-editor{grid-column:1 / -1;display:grid;gap:var(--space-xs);padding:var(--space-sm) 0;border-block:1px solid var(--line-subtle);margin-block:var(--space-xs)}.mx-sound-controls{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:var(--space-xs) var(--space-md)}.sy-control{display:grid;grid-template-columns:8.5rem 1fr 3.5rem;align-items:center;gap:var(--space-xs);font-size:var(--font-size-min)}.sy-control-name{color:inherit;overflow:hidden;white-space:nowrap}.sy-control-value{text-align:right}.sy-control input[type=range]{accent-color:var(--mx-ac);width:100%}.sy-control input[type=checkbox]{accent-color:var(--mx-ac);justify-self:start}.mx-note{color:inherit;font-family:var(--font-sans);font-size:var(--font-size-sm);border-top:1px solid var(--line-subtle);padding-top:var(--space-sm);margin:0}.mx-rename{width:8rem}.mx-drop-ind{flex:0 0 auto;inline-size:.2rem;min-block-size:1.8rem;align-self:stretch;border-radius:var(--radius-sm);background:var(--mx-zac, var(--accent))}.mx-roll-scroll{display:grid;gap:.2rem;max-block-size:18rem;overflow-y:auto;scrollbar-width:thin;padding-inline-end:var(--space-xs)}.mx-roll-tools{display:flex;align-items:center;gap:var(--space-xs)}@media(max-width:640px){.mx-row{grid-template-columns:1fr;min-width:34rem}.mx-row-top{flex-wrap:wrap}.mx-field-master,.mx-btn-songplay,.mx-slot-msg{margin-left:0}.mx-roll-row{grid-template-columns:4.5rem 1fr}.mx-roll-scroll{max-block-size:13rem}}