/* AMPLE Jam (Lite piano roll): colours only from the theme tokens (tokens.css), so it follows every theme like the FL block does. */
dialog.mls-panel{max-width:calc(100vw - 8px);position:fixed;inset:auto;left:80px;top:60px;margin:0;z-index:30;width:min(1000px,calc(100vw - 120px));height:min(620px,calc(100vh - 100px));min-width:520px;min-height:340px;resize:none;overflow:hidden;display:none;flex-direction:column;padding:0;background:var(--panel);color:var(--text);border:1px solid var(--line-strong);border-radius:var(--r-m);box-shadow:var(--shadow-2)}
dialog.mls-panel[open]{display:flex}
.mls-title{display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--head-grad);border-bottom:1px solid var(--line);cursor:move;user-select:none;touch-action:none}
.mls-clip{color:var(--dim)}
.mls-badge{margin-left:auto;font-size:11px;color:var(--dim);padding:1px 8px;border-radius:10px;background:var(--panel3)}
.mls-badge[data-approximate="1"]{color:var(--warn)}
.mls-badge:empty{display:none}
.mls-close{width:auto;padding:2px 8px}
.mls-toolbar{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;padding:5px 8px;background:var(--panel2);border-bottom:1px solid var(--line);overflow-x:auto}
.mls-toolbar button,.mls-toolbar select{width:auto;flex:none;margin:0;padding:3px 8px}
.mls-tools{display:inline-flex;gap:0;margin:0 4px}
.mls-tools .mls-tool{border-radius:0}
.mls-tools .mls-tool:first-child{border-radius:var(--r-s) 0 0 var(--r-s)}
.mls-tools .mls-tool:last-child{border-radius:0 var(--r-s) var(--r-s) 0}
.mls-toolbar button.on,.mls-tools .mls-tool[aria-pressed="true"]{background:var(--acc);color:var(--on-accent);border-color:transparent}
.mls-octave{font-variant-numeric:tabular-nums;min-width:2.2em;text-align:center}
.mls-body{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--panel3)}
.mls-body canvas{position:absolute;display:block}
.mls-ruler{left:var(--mls-key-w,48px);top:0}
.mls-keys{left:0;top:26px}
.mls-grid{left:var(--mls-key-w,48px);top:26px;outline:none;cursor:crosshair}
.mls-grid:focus-visible{box-shadow:inset var(--focus)}
/* per-tool cursors (decision 29): pencil, brush, eraser, scissors, crosshair; grab while panning, resize at a note edge, copy over a note with Shift held */
.mls-grid[data-tool="draw"]{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cg%20fill%3D%22white%22%20stroke%3D%22black%22%20stroke-width%3D%221.3%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021%20L4.5%2015%20L15%204.5%20L19.5%209%20L9%2019.5%20Z%22%2F%3E%3Cpath%20d%3D%22M13%206.5%20L17.5%2011%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 3 21,crosshair}
.mls-grid[data-tool="paint"]{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cg%20fill%3D%22white%22%20stroke%3D%22black%22%20stroke-width%3D%221.3%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021%20C3%2017%206%2015.5%208%2017%20C9.5%2018.5%208%2021%203%2021%20Z%22%2F%3E%3Cpath%20d%3D%22M9.5%2015.5%20L18.5%205%20L21%207.5%20L11%2017.5%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 3 21,crosshair}
.mls-grid[data-tool="delete"],.mls-grid[data-drag="erase"]{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cg%20fill%3D%22white%22%20stroke%3D%22black%22%20stroke-width%3D%221.3%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M4%2016%20L13%206%20L20%2012.5%20L12.5%2020%20L7.5%2020%20Z%22%2F%3E%3Cpath%20d%3D%22M9%2011%20L16%2017.5%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 4 20,not-allowed}
.mls-grid[data-tool="slice"]{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cg%20fill%3D%22white%22%20stroke%3D%22black%22%20stroke-width%3D%221.3%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M8%2016%20L18%204%20M16%2016%20L6%204%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 12 12,col-resize}
.mls-grid[data-tool="select"]{cursor:crosshair}
.mls-grid[data-tool="playback"]{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cg%20fill%3D%22white%22%20stroke%3D%22black%22%20stroke-width%3D%221.3%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M6%204%20L20%2012%20L6%2020%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 6 12,pointer}
.mls-grid[data-tool="zoom"]{cursor:zoom-in}
.mls-grid[data-over="note"]{cursor:move}
.mls-grid[data-over="edge"]{cursor:ew-resize}
.mls-grid[data-copy="1"]{cursor:copy}
.mls-grid[data-drag="pan"]{cursor:grabbing}
.mls-hint{position:absolute;left:60px;top:34px;z-index:2;display:flex;align-items:center;gap:8px;padding:4px 8px;font-size:12px;color:var(--dim);background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-s);pointer-events:auto}
.mls-hint[hidden],.mls-help[hidden]{display:none}
.mls-hint-x{width:auto;padding:0 6px;line-height:1.4}

.mls-snap option[hidden]{display:none}
.mls-velocity{left:var(--mls-key-w,48px);bottom:0}
.mls-corner{position:absolute;left:0;width:var(--mls-key-w,48px);background:var(--panel2)}
.mls-lane-select{width:100%;margin:4px 0 0;padding:0 2px;font-size:11px;color:var(--dim);background:transparent;border:0;text-align:center;cursor:pointer}
.mls-lane-select:hover,.mls-lane-select:focus-visible{color:var(--text)}
.mls-body>.mls-corner:nth-of-type(1){top:0;height:26px}
.mls-body>.mls-corner:nth-of-type(2){bottom:0;height:64px}
.mls-status{padding:6px 34px 6px 12px;min-height:26px;box-sizing:border-box;font-size:13px;color:#b9c4d0;background:var(--panel2);border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){dialog.mls-panel *{transition:none!important}}
.mls-tools[hidden],.mls-rowadd[hidden]{display:none}
.mls-strip{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;padding:3px 8px;overflow-x:auto;background:var(--panel2);border-bottom:1px solid var(--line)}
.mls-strip[hidden]{display:none}
.mls-chip{flex:none;width:auto;margin:0;padding:1px 8px;font-size:11px;border-left:4px solid hsl(var(--hue,210) 60% 55%);background:var(--panel3);white-space:nowrap}
.mls-chip.current{background:var(--acc);color:var(--on-accent);cursor:default}
.mls-chip.mls-back{border-left-color:var(--line-strong)}

/* window management (AMPLE Jam): collapse to the title bar, maximize as a locked-in full-screen window. @ample:window-chrome */
.mls-wbtn{width:auto;min-width:26px;padding:2px 7px}
dialog.mls-panel[data-window="collapsed"]{height:auto!important;min-height:0!important;resize:none}
dialog.mls-panel[data-window="collapsed"]>:not(.mls-title){display:none!important}
dialog.mls-panel[data-window="collapsed"] .mls-title{border-bottom:0}
dialog.mls-panel[data-window="max"]{left:8px!important;top:8px!important;width:calc(100vw - 16px)!important;height:calc(100vh - 16px)!important;max-width:none!important;resize:none;z-index:1001!important}
dialog.mls-panel[data-window="max"] .mls-title{cursor:default}
dialog.mls-panel[data-window="max"] .mls-collapse{display:none}
.mls-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.55)}
@media (max-width:700px){.mls-wbtn{display:none}}
.jam-icon{width:16px;height:16px;vertical-align:-3px;margin-right:5px;flex:none}
.mls-title>.mls-collapse{margin-left:auto}.mls-badge:not(:empty)~.mls-collapse{margin-left:0}
/* a permanent compositor layer: dropping it after a drag showed the page behind for one frame */
dialog.mls-panel{will-change:transform}
/* collapsed: only as wide as the title and the three window buttons (the title bar keeps its place; expanding gives the old size back) */
dialog.mls-panel[data-window="collapsed"]{width:max-content!important;min-width:0!important}
dialog.mls-panel[data-window="collapsed"] .mls-title{gap:12px}
dialog.mls-panel[data-window="max"]{transform:none!important}
/* the window buttons stay at the right in every state (also when the collapse button is hidden while maximized) */
.mls-title>.mls-clip{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mls-title>.mls-collapse{margin-left:0}
/* the resize handle (window-chrome.js): bigger than the browser's own, three diagonal strokes in the corner */
.mls-grip{position:absolute;right:2px;bottom:2px;width:22px;height:22px;z-index:6;cursor:nwse-resize;touch-action:none;background:linear-gradient(135deg,transparent 0 46%,#aebccc 46% 52%,transparent 52% 62%,#aebccc 62% 68%,transparent 68% 78%,#aebccc 78% 84%,transparent 84%);opacity:.8;border-bottom-right-radius:8px}
.mls-grip:hover{opacity:1}
dialog.mls-panel[data-window="collapsed"] .mls-grip,dialog.mls-panel[data-window="max"] .mls-grip{display:none}
@media (max-width:700px){.mls-grip{display:none}}
/* the tooltip of the editor (what is under the mouse and what a click or drag does there) */
.mls-tip{position:absolute;z-index:40;width:max-content;max-width:min(340px,70%);white-space:pre-line;padding:8px 11px;border:1px solid #70839a;border-radius:8px;background:linear-gradient(180deg,#3d4a5a,#2a3440);color:#f2f7fc;box-shadow:0 0 0 1px #000a,0 10px 24px #000c,inset 0 1px 0 #ffffff33;font-size:12px;line-height:1.45;pointer-events:none}
.mls-tip[hidden]{display:none}
/* the equaliser as the background of the title bar (the sign-in page's bars, spread over the whole bar and kept soft): cyan-to-magenta bars rise and fall with the tempo while something plays;
   they stay when the window is not the active one, and the menu can switch the animation off */
.mls-title{position:relative;overflow:hidden}
.mls-title>*:not(.mls-eqbg){position:relative;z-index:1}
.mls-eqbg{position:absolute;inset:0;z-index:0;display:flex;align-items:flex-end;gap:2px;padding:0 3px;opacity:0;transition:opacity .5s ease;pointer-events:none}
.mls-panel[data-playing="1"] .mls-eqbg{opacity:1}
.mls-eqbg i{display:block;flex:1 1 0;min-width:2px;height:100%;border-radius:2px 2px 0 0;background:linear-gradient(0deg,rgba(45,226,255,.5),rgba(255,79,216,.34));transform-origin:bottom;animation:mls-eq calc(var(--beat,.5s) * var(--d,1)) ease-in-out infinite alternate;animation-delay:calc(var(--dl,0) * -1s)}
@keyframes mls-eq{from{transform:scaleY(.12)}to{transform:scaleY(.95)}}
.mls-panel.no-fx .mls-eqbg i{animation:none;transform:scaleY(.3)}
/* the menu of the window (the hamburger button in the title bar) */
.mls-menu{position:absolute;z-index:45;min-width:250px;max-height:min(70vh,560px);overflow-y:auto;padding:5px;border:1px solid #70839a;border-radius:9px;background:linear-gradient(180deg,#3d4a5a,#2a3440);color:#f2f7fc;box-shadow:0 0 0 1px #000a,0 12px 28px #000c,inset 0 1px 0 #ffffff33}
.mls-menu[hidden]{display:none}
.mls-menu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:6px;background:transparent;color:inherit;font-size:13px;line-height:1.2;cursor:pointer}
.mls-menu-item:hover,.mls-menu-item:focus-visible{background:rgba(255,255,255,.12);outline:none}
.mls-menu-glyph{flex:none;width:20px;text-align:center;font-size:15px;opacity:.85}
.mls-menu-label{flex:1;min-width:0;white-space:nowrap}
.mls-lanes{flex:none;max-height:156px;overflow-y:auto;overflow-x:hidden;background:var(--panel3);border-top:1px solid var(--line)}
.mls-lanes[hidden]{display:none}
.mls-lane{display:block}
.mls-menu-head{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 10px;border:0;border-radius:6px;background:transparent;color:inherit;font-size:13px;line-height:1.2;text-align:left;cursor:pointer}
.mls-menu-head:hover,.mls-menu-head:focus-visible{background:rgba(255,255,255,.12);outline:none}
.mls-menu-chev{opacity:.6;transition:transform .15s}
.mls-menu-head[aria-expanded="true"] .mls-menu-chev{transform:rotate(90deg)}
.mls-menu-section{margin:0 0 4px 10px;padding-left:6px;border-left:1px solid rgba(255,255,255,.14)}
.mls-menu-section[hidden]{display:none}
.mls-menu-row{display:flex;gap:6px;margin:2px 8px 4px}
.mls-menu-select{flex:1;min-width:0;padding:4px 6px;font-size:12px;color:#f2f7fc;background:#1a2129;border:1px solid #0a0e13;border-radius:5px}
.mls-menu-sep{margin:4px 6px;border:0;border-top:1px solid rgba(255,255,255,.14)}
.mls-switch{flex:none;position:relative;width:32px;height:17px;border-radius:9px;background:#1a2129;border:1px solid #0a0e13;box-shadow:inset 0 1px 2px #0008;transition:background .2s}
.mls-switch::after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#aeb9c6;box-shadow:0 1px 2px #0009;transition:left .2s,background .2s}
.mls-menu-item[aria-checked="true"] .mls-switch{background:linear-gradient(90deg,#2de2ff,#ff4fd8);border-color:#4a6f86}
.mls-menu-item[aria-checked="true"] .mls-switch::after{left:17px;background:#fff}
/* the shortcuts card: groups with a title, key caps and what they do */
.mls-help{position:absolute;right:14px;top:36px;z-index:12;width:min(720px,calc(100% - 28px));max-height:calc(100% - 52px);overflow:auto;padding:12px 14px 14px;font-size:12.5px;color:#f2f7fc;background:linear-gradient(180deg,#3a4656,#29323d);border:1px solid #70839a;border-radius:10px;box-shadow:0 0 0 1px #000a,0 16px 34px #000d,inset 0 1px 0 #ffffff33}
.mls-help[hidden]{display:none}
.mls-help-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:14px}
.mls-help-x{width:auto;min-width:26px;padding:1px 7px}
.mls-help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px}
.mls-help-group h4{margin:0 0 6px;padding-bottom:4px;border-bottom:1px solid #ffffff22;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8fe3ff}
.mls-help-row{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:4px 10px;align-items:start;margin:0 0 7px}
.mls-keys-cap{display:inline-flex;flex-wrap:wrap;gap:3px;align-items:center}
.mls-keys-cap i{font-style:normal;color:#8fa0b3;font-size:11px}
.mls-keys-cap kbd{display:inline-block;min-width:22px;padding:1px 6px;text-align:center;font:600 11.5px/1.5 system-ui;color:#f2f7fc;background:linear-gradient(180deg,#566475,#3a4553);border:1px solid #0b0f14;border-bottom-width:2px;border-radius:5px;box-shadow:inset 0 1px 0 #ffffff33}
.mls-help-what{color:#c4d0dc;line-height:1.4}
@media (max-width:900px){.mls-help-grid{grid-template-columns:1fr}}
/* thin scrollbars over the editor: invisible until the pointer is near them */
.mls-sb{position:absolute;z-index:6;opacity:0;transition:opacity .18s ease;touch-action:none}
.mls-sb[hidden]{display:none}
.mls-sb.on{opacity:1}
.mls-sb-h{left:var(--mls-key-w,48px);right:16px;bottom:calc(64px + 3px);height:10px}
.mls-sb-v{right:3px;top:calc(26px + 3px);bottom:calc(64px + 16px);width:10px}
.mls-sb i{position:absolute;display:block;border-radius:5px;background:rgba(190,210,230,.38);box-shadow:0 0 0 1px rgba(0,0,0,.35);cursor:grab;transition:background .15s}
.mls-sb-h i{top:2px;height:6px;min-width:28px}
.mls-sb-v i{left:2px;width:6px;min-height:28px}
.mls-sb:hover i,.mls-sb.drag i{background:rgba(210,228,245,.62)}
.mls-sb:hover.mls-sb-h i,.mls-sb.drag.mls-sb-h i{top:0;height:10px}
.mls-sb:hover.mls-sb-v i,.mls-sb.drag.mls-sb-v i{left:0;width:10px}
@media (pointer:coarse){.mls-sb{display:none}}
.mls-form{position:absolute;z-index:46;top:36px;right:14px;width:min(280px,calc(100% - 28px));padding:10px 12px;border:1px solid #70839a;border-radius:9px;background:linear-gradient(180deg,#3d4a5a,#2a3440);color:#f2f7fc;box-shadow:0 0 0 1px #000a,0 12px 28px #000c,inset 0 1px 0 #ffffff33}
.mls-form-title{font-size:13px;font-weight:600;margin-bottom:6px}
.mls-form-hint{font-size:11px;opacity:.7;margin:-2px 0 8px}
.mls-form-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:5px 0;font-size:12px}
.mls-form-label{flex:1;min-width:0}
.mls-form-input{width:112px;padding:4px 6px;font-size:12px;color:#f2f7fc;background:#1a2129;border:1px solid #0a0e13;border-radius:5px}
.mls-form-check{width:16px;height:16px}
.mls-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.mls-form-actions button{padding:5px 12px;font-size:12px;border-radius:6px;border:1px solid #0a0e13;color:#f2f7fc;background:#1a2129;cursor:pointer}
.mls-form-actions .mls-form-apply{background:linear-gradient(90deg,#2de2ff,#ff4fd8);color:#0b1118;font-weight:600;border-color:#4a6f86}