@font-face{font-family:Inter;font-weight:400;src:url(/fonts/Inter-Regular.woff2)format("woff2")}@font-face{font-family:Inter;font-weight:500;src:url(/fonts/Inter-Medium.woff2)format("woff2")}@font-face{font-family:Inter;font-weight:700;src:url(/fonts/Inter-Bold.woff2)format("woff2")}:root{--bg:#fff;--fg:#000;--border:#e5e5e5;--muted:#666;--fg-rgb:0,0,0;--bg-rgb:255,255,255;--accent:var(--fg);--accent-rgb:var(--fg-rgb);--cols:4;color-scheme:light dark}@media (prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=ableton]){--bg:#121214;--fg:#fff;--border:#262626;--muted:#999;--fg-rgb:255,255,255;--bg-rgb:18,18,20}}:root[data-theme=dark]{--bg:#121214;--fg:#fff;--border:#262626;--muted:#999;--fg-rgb:255,255,255;--bg-rgb:18,18,20;color-scheme:dark}:root[data-theme=light]{color-scheme:light}:root[data-theme=ableton]{--bg:#2f2f2f;--fg:#e6e6e6;--border:#484848;--muted:#909090;--fg-rgb:230,230,230;--bg-rgb:47,47,47;--accent:#ffce3d;--accent-rgb:255,206,61;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}body{letter-spacing:0;background:var(--bg);color:var(--fg);-webkit-user-select:none;user-select:none;touch-action:manipulation;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;line-height:1.3;overflow:hidden}#app{grid-template-rows:44px 36px minmax(0,1fr);grid-template-columns:minmax(0,1fr);height:100dvh;display:grid}header{border-bottom:1px solid var(--border);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:4px;min-width:0;padding:0 8px;font-size:11px;display:grid}header .left,header .transport,header .right{align-items:center;gap:4px;min-width:0;display:flex}header .left{padding-left:4px}header .left .spacer,header .right .spacer{flex:1}header .transport{gap:6px}header .title{margin-right:8px}header button{color:var(--muted);border-color:#0000}header button:hover:not(:disabled),header button:focus-visible{color:var(--fg)}header button:disabled{color:var(--border)}header #play{color:var(--accent)}header #random{color:var(--fg);border-color:var(--border)}header #random:hover:not(:disabled){border-color:var(--fg)}header #random:disabled{color:var(--border);border-color:var(--border)}header button.active,header button.active:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--bg)}header #play:disabled{color:var(--muted)}header button.text{align-items:center;gap:6px;min-width:0;padding:0 6px;display:inline-flex}header button.text span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dd,.pop{align-items:center;display:inline-flex;position:relative}.dd .ddb{align-items:center;gap:6px;padding:0 6px 0 8px;display:inline-flex}.menu{background:var(--bg);border:1px solid var(--border);z-index:2;border-radius:3px;flex-direction:column;min-width:100%;padding:4px;display:flex;position:absolute;top:calc(100% + 5px);right:0;box-shadow:0 4px 16px #00000047}.menu[hidden]{display:none}.menu button{text-align:left;height:26px;color:var(--fg);border-color:#0000;padding:0 4px}.menu button.cur{font-weight:500}.menu hr{border:0;border-top:1px solid var(--border);margin:4px 0}.dd .menu{min-width:calc(100% + 24px);left:-1px;right:auto}.pop .menu{right:-1px}#share-menu{font-variant-numeric:tabular-nums;gap:4px;min-width:240px;padding:8px}.menu.wide{min-width:280px}.saverow{gap:4px;padding:0 0 6px;display:flex}.saverow input{min-width:0;height:28px;font:inherit;color:var(--fg);border:1px solid var(--border);background:0 0;border-radius:3px;flex:auto;padding:0 8px;font-size:11px}.saverow input:focus{border-color:var(--fg);outline:0}.saverow button{height:28px;padding:0 12px}#kit-list{flex-direction:column;max-height:260px;display:flex;overflow-y:auto}#kit-list .empty{padding:6px 4px 8px;font-size:11px}.kit{align-items:center;gap:2px;display:flex}.kit .load{text-align:left;border-color:#0000;flex-direction:column;flex:auto;align-items:flex-start;gap:2px;min-width:0;height:auto;padding:6px 4px;display:flex}.kit .load .kn-name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:11px;font-weight:500;overflow:hidden}.kit .load .meta{font-variant-numeric:tabular-nums;font-size:9px}.kit.other .load .kn-name{color:var(--muted)}.kit .del{width:24px;height:24px;color:var(--muted);opacity:0;border-color:#0000;flex:none;transition:opacity .12s}.kit:hover .del,.kit:focus-within .del{opacity:1}.kit .del:hover{color:var(--fg);border-color:var(--border)}#share-url{cursor:copy;-webkit-user-select:all;user-select:all;word-break:break-all}header .title{white-space:nowrap;margin-right:4px;font-weight:700}header #status{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:11px;overflow:hidden}.spacer{flex:1}.muted{color:var(--muted)}header .tempo{align-items:center;gap:4px;font-size:11px;display:inline-flex}header .tempo input{width:42px;height:28px;font:inherit;font-variant-numeric:tabular-nums;color:var(--fg);text-align:right;cursor:ns-resize;-moz-appearance:textfield;appearance:textfield;background:0 0;border:1px solid #0000;border-radius:3px;padding:0 4px;font-size:11px}header .tempo input:hover{border-color:var(--border)}header .tempo input::-webkit-outer-spin-button,header .tempo input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}header .tempo input:focus{border-color:var(--fg);outline:0}header .sep{background:var(--border);flex:none;width:1px;height:16px;margin:0 4px}header .timecode{font-variant-numeric:tabular-nums;color:var(--muted);min-width:44px;margin-right:2px;font-size:11px}header .timecode.on{color:var(--fg)}header .meter{border:1px solid var(--border);border-radius:2px;width:120px;height:4px;margin:0 8px;position:relative;overflow:hidden}header .meter .fill{background:var(--accent);width:0;transition:width 60ms linear;position:absolute;top:0;bottom:0;left:0}button,select{font:inherit;color:var(--fg);cursor:pointer;touch-action:manipulation;white-space:nowrap;background:0 0;border:1px solid;border-radius:3px;height:28px;padding:0 10px;font-size:11px;transition:background .12s,color .12s}button.text{border:0;height:auto;padding:0;font-size:11px;text-decoration:underline}header button.text{height:28px;text-decoration:none}button.solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}button:disabled{color:var(--muted);cursor:default}button:hover:not(:disabled){background:rgba(var(--fg-rgb), .08)}button.solid:hover:not(:disabled){background:var(--fg);opacity:.85}button:focus-visible,select:focus-visible,input:focus-visible{outline:1px solid var(--fg);outline-offset:2px}button.icon{justify-content:center;align-items:center;width:28px;padding:0;display:inline-flex}button[hidden]{display:none}select{padding-right:4px}#grid{grid-template-columns:repeat(var(--cols), minmax(0, 1fr));grid-auto-rows:minmax(0,1fr);gap:8px;min-height:0;padding:8px;display:grid}.pad{background:var(--bg);border:1px solid var(--border);border-radius:3px;grid-template-rows:auto minmax(0,1fr) auto auto auto;min-width:0;min-height:0;transition:border-color .12s;display:grid;position:relative}.pad.empty{cursor:pointer;border-style:dashed}.pad .head{cursor:pointer;align-items:center;gap:6px;min-width:0;height:42px;padding:0 6px 0 10px;display:flex;overflow:hidden}.pad .key{text-align:center;border-radius:2px;flex:none;width:15px;height:15px;font-size:11px;line-height:15px}.pad.on .key{color:var(--fg)}.pad.solo .key{background:var(--accent);color:var(--bg)}.pad .badge{color:var(--muted);font-variant-numeric:tabular-nums;flex:none;font-size:9px;line-height:9px}.pad .badge:empty{display:none}.pad .namerow{align-items:center;min-width:0;height:15px;padding:0 10px;display:flex}.pad .name{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--fg);opacity:0;text-align:left;direction:rtl;flex:auto;font-size:11px;font-weight:500;transition:color .12s,opacity .12s;overflow:hidden}.pad:not(.on):not(.empty) .name{color:var(--muted)}.pad .knobs{flex:none;align-items:flex-start;gap:4px;margin-left:8px;display:flex}.pad .kn{opacity:0;transition:opacity .12s}.pad:hover .name,.pad:focus-within .name,.pad:hover .kn,.pad:focus-within .kn,.pad .kn:has(.knob.set){opacity:1}@media (pointer:coarse){.pad .name,.pad .kn{opacity:1}}.kn{flex-direction:column;align-items:center;gap:1px;min-width:30px;display:flex}.kn em{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:8px;font-style:normal;line-height:8px;transition:color .12s}.kn:hover em,.kn:has(.knob.set) em{color:var(--fg)}.pad .wave{cursor:pointer;touch-action:none;min-height:0;position:relative}.pad.part .wave{cursor:ew-resize}.pad .wave canvas{width:100%;height:100%;transition:opacity .12s;display:block;position:absolute;inset:0}.pad .wave .hint{color:var(--muted);pointer-events:none;justify-content:center;align-items:center;font-size:11px;display:none;position:absolute;inset:0}.pad.empty .wave .hint,.pad.busy .wave .hint,.pad.error .wave .hint{display:flex}.pad.empty .wave canvas,.pad.busy .wave canvas,.pad.error .wave canvas{opacity:0}.pad:not(.on) .wave canvas{opacity:.3}.pad.empty .head,.pad.empty .namerow,.pad.empty .bottom{visibility:hidden}.pad.empty .key{visibility:visible}.pad .steps{visibility:hidden;grid-auto-columns:1fr;grid-auto-flow:column;gap:2px;height:8px;margin:6px 10px 0;display:grid}.pad .bottom{align-items:center;min-width:0;padding:8px 10px 10px;display:flex}.pad .gain{--lv:0;-webkit-appearance:none;appearance:none;cursor:ew-resize;background:0 0;width:100%;height:16px;margin:0}.pad .gain::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--accent) calc(var(--lv) * 100%), var(--border) 0);border-radius:1px;height:2px}.pad .gain::-webkit-slider-thumb{-webkit-appearance:none;background:var(--fg);border:1px solid var(--bg);border-radius:2px;width:8px;height:12px;margin-top:-5px}.pad .gain::-moz-range-track{background:linear-gradient(90deg, var(--accent) calc(var(--lv) * 100%), var(--border) 0);height:2px}.pad .gain::-moz-range-thumb{background:var(--fg);border:1px solid var(--bg);border-radius:2px;width:8px;height:12px}.pad:not(.on) .gain::-webkit-slider-thumb{background:var(--muted)}.pad:not(.on) .gain::-moz-range-thumb{background:var(--muted)}.pad.oneshot .steps{visibility:visible}.pad .steps span{background:var(--border);cursor:pointer;border-radius:1px;transition:background .12s;display:block}.pad .steps span.hit{background:rgba(var(--accent-rgb), .6)}.pad .steps span.hit.acc{background:var(--accent)}.pad .steps span.cur{outline:1px solid var(--accent);outline-offset:1px}.pad:not(.on) .steps span.hit{background:rgba(var(--fg-rgb), .25)}.knob{cursor:ns-resize;touch-action:none;-webkit-tap-highlight-color:transparent;flex:none;width:26px;height:26px}.knob svg{width:100%;height:100%;display:block;overflow:visible}.knob circle{fill:none}.knob .trk{stroke:rgba(var(--fg-rgb), .22);stroke-width:1.5px}.knob .val{stroke:rgba(var(--accent-rgb), .75);stroke-width:2.25px;transition:stroke .12s}.knob .dot{fill:var(--accent);stroke:none;transition:fill .12s}.knob:hover .val,.knob:focus-visible .val,.knob.set .val{stroke:var(--accent)}.knob:focus-visible{outline:1px solid var(--fg);outline-offset:2px;border-radius:50%}.pad:not(.on) .knob .val{stroke:var(--muted)}.pad:not(.on) .knob .dot{fill:var(--muted)}.pad .actions{flex:none;align-items:center;gap:4px;margin-left:auto;display:flex}.pad .actions button{border-color:#0000;width:24px;height:24px}.pad .actions button:hover:not(:disabled){border-color:var(--border)}.pad .actions .rate{font-variant-numeric:tabular-nums;width:auto;min-width:24px;color:var(--muted);padding:0 5px;font-size:10px}.pad.locked .actions [data-act=lock] svg{fill:currentColor}.pad.rated .actions .rate,.pad.solo .actions [data-act=solo],.pad.locked .actions [data-act=lock],.pad.free .actions [data-act=sync],.pad.part .actions [data-act=whole],.pad.rated .actions .rate:hover,.pad.solo .actions [data-act=solo]:hover,.pad.locked .actions [data-act=lock]:hover,.pad.free .actions [data-act=sync]:hover,.pad.part .actions [data-act=whole]:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}@media (pointer:fine){.pad .actions{opacity:0;transition:opacity .12s}.pad:hover .actions,.pad:focus-within .actions{opacity:1}}:root[data-cols="8"] .pad .head{gap:6px;height:36px;padding:0 6px 0 8px}:root[data-cols="8"] .kn em{display:none}:root[data-cols="8"] .pad .knobs{gap:4px;margin-left:4px}:root[data-cols="8"] .knob{width:22px;height:22px}:root[data-cols="8"] .kn{min-width:22px}:root[data-cols="8"] .pad .namerow{height:13px;padding:0 8px}:root[data-cols="8"] .pad .steps{margin:5px 8px 0}:root[data-cols="8"] .pad .bottom{padding:6px 8px 8px}:root[data-cols="8"] .pad .actions{gap:2px;margin:0;position:absolute;top:34px;right:6px}:root[data-cols="8"] .pad .actions button{width:20px;height:20px}:root[data-cols="8"] .pad .actions button svg{width:12px;height:12px}:root[data-cols="8"] .pad .actions .rate{min-width:21px;padding:0 2px;font-size:9px}.pad.shot .wave{cursor:pointer}.pad.shot:active{border-color:var(--accent)}#fx{border-bottom:1px solid var(--border);align-items:center;gap:32px;padding:0 16px;display:flex}#fx .ctl{min-width:0;color:var(--muted);flex:1 1 0;align-items:center;gap:10px;display:flex}#fx .ctl:hover,#fx .ctl:focus-within{color:var(--fg)}#fx .ico{flex:none;display:inline-flex}#fx input{-webkit-appearance:none;appearance:none;cursor:ew-resize;background:0 0;flex:auto;min-width:0;height:16px;margin:0}#fx input::-webkit-slider-runnable-track{background:var(--border);border-radius:1px;height:2px}#fx input::-webkit-slider-thumb{-webkit-appearance:none;background:var(--fg);border:1px solid var(--bg);border-radius:2px;width:8px;height:12px;margin-top:-5px}#fx input::-moz-range-track{background:var(--border);height:2px}#fx input::-moz-range-thumb{background:var(--fg);border:1px solid var(--bg);border-radius:2px;width:8px;height:12px}.drop,.pad.over{outline:2px solid var(--accent);outline-offset:-2px}#app.drop:has(.pad.over){outline-color:#0000}#overlay{background:var(--bg);z-index:3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#overlay[hidden]{display:none}#overlay button{height:44px;padding:0 20px;font-size:16px}@media (width<=800px){#fx{gap:16px;padding:0 8px}header{gap:6px;padding:0 8px}header .timecode,header .title,header #status,header .meter,header .sep,header .dd[data-for=count]{display:none}:root{--cols:2!important}#grid{gap:6px;padding:6px}.pad .head{height:42px;padding:0 6px 0 10px}.pad .namerow{padding:0 10px}.pad .steps{margin:6px 10px 0}.pad .bottom{padding:6px 10px 10px}}