:root{--app-background: #bfbfbf;--canvas-dot: color-mix(in srgb, var(--color-gray-500) 60%, var(--app-background));--shadow-panel: 0 22px 43px 0 rgba(0, 0, 0, .3);--radius-panel: 3px;--shadow-lane-inset: inset 0 2px 5px 0 rgba(0, 0, 0, .1);--shadow-inner-field: inset 0 2px 5px 0 rgba(0, 0, 0, .25);--track-header-width: 220px;--track-row-height: 52px;--font-ui: "Inter", system-ui, sans-serif;--font-clip: "Roboto Mono", ui-monospace, monospace;--text-track-title: 12px;--toggle-switch-size: 17px;--toggle-switch-ring: var(--spacing-2)}html,body{overscroll-behavior:none}body{margin:0;background:var(--app-background);font-family:var(--font-ui)}.app{position:relative;height:100vh;min-height:560px;overflow:hidden;-webkit-user-select:none;user-select:none}.app .dot-grid{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;color:var(--canvas-dot)}.app input{-webkit-user-select:text;user-select:text}.master-light{--level: 0;position:absolute;z-index:10;top:21px;right:29px;width:14px;height:14px;border-radius:50%;background:color-mix(in srgb,var(--color-meter-green) calc(var(--level) * 100%),var(--graphics-button-bold))}.master-light.clipping{background:var(--color-brand-record-red)}.app:before{content:"";position:absolute;z-index:9;inset:0 0 auto;height:56px;pointer-events:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-mask-image:linear-gradient(black 60%,transparent);mask-image:linear-gradient(black 60%,transparent)}.project{position:absolute;z-index:10;left:45px;top:21px;display:flex;gap:32px;font-size:var(--text-display);line-height:15px;color:var(--graphic-overlay)}.project input{font:inherit;color:inherit;background:none;border:none;padding:0;outline:none}.project input:focus{text-decoration:underline}.project .name{font-weight:700}.project .bpm{display:flex}.transport{position:absolute;z-index:10;top:17px;left:50%;transform:translate(-50%);display:flex;gap:5px}.icon-button{width:24px;height:24px;padding:0;border:none;background:none;color:var(--graphic-overlay);cursor:pointer}.icon-button svg{display:block}.icon-button:disabled{cursor:default}.icon-button.record{color:var(--graphics-button-bold)}.icon-button.record[aria-pressed=true]{color:var(--color-brand-record-red)}.icon-button[aria-pressed=true]{color:var(--graphics-button-bold)}.timeline{position:absolute;width:1015px;height:366px;background:var(--forms-base-material);border-radius:var(--radius-panel);box-shadow:var(--shadow-panel);overflow:hidden}.timeline.maximized{left:0!important;top:56px!important;width:auto;height:auto;right:0;bottom:0;border-radius:0;box-shadow:none;zoom:1!important}.timeline.moving,.app.panning{cursor:grabbing}.timeline .maximize{position:absolute;left:4px;top:4px;z-index:5;width:14px;height:14px;color:var(--graphics-micro-text)}.timeline .maximize:hover{color:var(--graphics-button-mid)}.scroller{overscroll-behavior:none;position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto;scrollbar-width:none}.scroller::-webkit-scrollbar{display:none}.lane-shade{position:absolute;left:var(--track-header-width);top:20px;right:0;bottom:0;border-radius:2px;box-shadow:var(--shadow-lane-inset);pointer-events:none;z-index:3}.grid{position:relative;display:grid;grid-template-columns:var(--track-header-width) auto;grid-template-rows:20px auto;min-height:100%}.corner{cursor:grab;position:sticky;left:0;top:0;z-index:4;height:20px;background:var(--forms-base-material)}.ruler{position:sticky;top:0;z-index:2;height:20px;background:var(--forms-base-material);cursor:pointer}.ruler span{pointer-events:none;position:absolute;top:4px;font-family:var(--font-clip);font-size:var(--text-3);line-height:12px;color:var(--graphics-micro-text)}.headers{cursor:grab;position:sticky;left:0;z-index:2;background:var(--forms-base-material)}.lanes{position:relative;background:var(--forms-track-lane)}.track-header{cursor:default;position:relative;height:var(--track-row-height);box-sizing:border-box;border-bottom:1px solid var(--forms-track-divider);font-size:var(--text-4)}.track-header.selected:before{content:"";position:absolute;left:1px;top:1px;width:3px;height:calc(var(--track-row-height) - 3px);background:var(--color-brand-yellow)}.track-title{position:absolute;left:10px;top:6px;width:177px;font:inherit;font-size:var(--text-track-title);line-height:13px;color:var(--graphics-track-title);background:none;border:none;padding:0;outline:none}.track-header .more{position:absolute;left:191px;top:7px;width:14px;height:14px;color:var(--graphics-button-mid)}.track-buttons{position:absolute;left:10px;top:27px;display:flex;gap:var(--spacing-2)}.small-button{width:16px;height:16px;padding:0;border:none;border-radius:1px;background:var(--forms-base-material);box-shadow:var(--shadow-drop-small);font:inherit;font-size:var(--text-4-1);line-height:16px;color:var(--graphics-button-bold);cursor:pointer}.small-button svg{display:block;margin:1px}.small-button.arm{color:var(--graphics-button-bold)}.small-button.arm[aria-pressed=true]{color:var(--color-brand-record-red)}.small-button:disabled{cursor:default}.small-button[aria-pressed=true]{background:var(--graphics-button-bold);color:var(--forms-base-material)}.toggle-switch{box-sizing:border-box;width:var(--toggle-switch-size);height:var(--toggle-switch-size);padding:0;border:var(--toggle-switch-ring) solid var(--inner-field);border-radius:50%;background:var(--forms-inset);cursor:pointer}.toggle-switch[aria-pressed=true]{background:var(--color-meter-green)}.fader{position:absolute;left:91px;top:26px;width:84px;height:18px;border-radius:48px;background:var(--inner-field);box-shadow:var(--shadow-inner-field);cursor:ew-resize;touch-action:none}.fader{overflow:hidden}.fader .meter{position:absolute;left:0;height:3px;width:0;background:var(--color-meter-green)}.fader .meter.left{top:5px}.fader .meter.right{top:10px}.fader .handle{position:absolute;top:1px;width:16px;height:16px;border-radius:50%;background:var(--forms-base-material);box-shadow:var(--shadow-drop-small)}.pan{position:absolute;left:185px;top:23px;width:25px;height:25px;cursor:ns-resize;touch-action:none}.pan svg{position:absolute;left:0;top:0}.pan .knob{position:absolute;left:4px;top:4px;width:17px;height:17px;border-radius:50%;background:var(--forms-base-material);box-shadow:var(--shadow-drop-small)}.pan .knob:after{content:"";position:absolute;left:8px;top:1px;width:1px;height:5px;border-radius:1px;background:var(--graphics-button-bold)}.lane{position:relative;height:var(--track-row-height);box-sizing:border-box;border-bottom:1px solid var(--forms-track-divider)}.clip{position:absolute;top:1px;height:calc(var(--track-row-height) - 3px);box-sizing:border-box;background:var(--forms-base-material);border-radius:2px;box-shadow:var(--shadow-drop-small);cursor:grab;touch-action:none}.clip.selected{background:var(--color-brand-yellow)}.clip.recording{background:var(--color-brand-record-red);pointer-events:none}.clip.recording .clip-name,.clip.recording .clip-wave,.clip.recording .clip-notes{color:var(--color-gray-999)}.clip.dragging{cursor:grabbing;z-index:1}.clip-name{position:absolute;left:5px;bottom:3px;right:5px;overflow:hidden;white-space:nowrap;font-family:var(--font-clip);font-size:var(--text-3);line-height:11px;color:var(--graphics-clip-name);pointer-events:none}.clip-wave{position:absolute;top:3px;left:0;right:0;bottom:16px;width:100%;height:calc(100% - 19px);color:var(--graphics-clip-name);pointer-events:none}.clip-notes{position:absolute;top:3px;left:0;right:0;bottom:16px;width:100%;height:calc(100% - 19px);color:var(--graphics-clip-name);fill:currentColor;shape-rendering:crispEdges;pointer-events:none}.clip .edge{position:absolute;top:0;bottom:0;width:5px;cursor:ew-resize}.clip .edge.start{left:0}.clip .edge.end{right:0}.playhead{position:absolute;top:0;bottom:0;width:1px;background:var(--color-brand-record-red);pointer-events:none;z-index:1}.add-track{display:block;margin:8px 0 8px 11px;padding:0;border:none;background:none;font:inherit;font-size:var(--text-track-title);line-height:13px;color:var(--graphics-button-mid);cursor:pointer}.add-track:hover{color:var(--graphics-track-title)}.menu{position:fixed;z-index:20;display:flex;flex-direction:column;padding:4px 0;background:var(--forms-base-material);border-radius:var(--radius-panel);box-shadow:var(--shadow-panel);font-size:var(--text-display);line-height:var(--line-display)}.menu button{padding:4px 12px;border:none;background:none;font:inherit;text-align:left;cursor:pointer}.menu button:hover{background:var(--forms-track-lane)}.instrument-panel{position:fixed;z-index:15;left:50%;bottom:var(--spacing-7);transform:translate(-50%);max-width:calc(100vw - 2 * var(--spacing-7));overflow-x:auto;box-sizing:border-box;background:var(--forms-base-material);border-radius:var(--radius-panel);box-shadow:var(--shadow-panel);color:var(--graphics-track-title)}.instrument-panel[hidden]{display:none}.instrument-title{font-size:var(--text-display);line-height:var(--line-display);display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-4) var(--grid-unit) 0;color:var(--graphics-button-mid)}.panel-grid{position:relative;width:calc(var(--cols) * var(--grid-unit));height:calc(var(--rows) * var(--grid-unit))}.panel-item{position:absolute;left:calc(var(--col) * var(--grid-unit));top:calc(var(--row) * var(--grid-unit))}.panel-section-title{width:calc(var(--cells) * var(--grid-unit));text-align:center;font-size:var(--text-section-title);font-weight:var(--weight-section-title);line-height:var(--line-section-title);color:var(--graphics-track-title)}.panel-title-large{transform:translate(calc(var(--nudge-x) * 1px),calc(var(--nudge-y) * 1px));font-size:var(--text-title-large);font-weight:var(--weight-title-large);line-height:var(--line-title-large);color:var(--color-gray-300);white-space:nowrap;pointer-events:none}.control-label{font-size:var(--text-control-label);font-weight:var(--weight-control-label);line-height:var(--line-control-label);color:var(--graphics-track-title);text-align:center;white-space:nowrap}.dial{display:flex;flex-direction:column;align-items:center;gap:var(--knob-label-gap);width:var(--knob-cells)}.dial-s{--knob-size: var(--knob-s-size);--knob-cap: var(--knob-s-cap);--knob-notch: var(--knob-s-notch);--knob-cells: var(--knob-s-cells);--knob-shadow: var(--shadow-drop-small)}.dial-m{--knob-size: var(--knob-m-size);--knob-cap: var(--knob-m-cap);--knob-notch: var(--knob-m-notch);--knob-cells: var(--knob-m-cells);--knob-shadow: var(--shadow-drop-knob)}.dial-l{--knob-size: var(--knob-l-size);--knob-cap: var(--knob-l-cap);--knob-notch: var(--knob-l-notch);--knob-cells: var(--knob-l-cells);--knob-shadow: var(--shadow-drop-knob)}.dial-knob{position:relative;width:var(--knob-size);height:var(--knob-size);cursor:ns-resize;touch-action:none}.dial-knob svg{position:absolute;left:0;top:0}.knob-track{fill:var(--knob-track)}.knob-fill{fill:var(--knob-fill)}.dial-m .dial-knob:before,.dial-l .dial-knob:before{content:"";position:absolute;inset:var(--knob-ring);border-radius:50%;background:var(--forms-base-material)}.knob-cap{position:absolute;left:calc((var(--knob-size) - var(--knob-cap)) / 2);top:calc((var(--knob-size) - var(--knob-cap)) / 2);width:var(--knob-cap);height:var(--knob-cap);border-radius:50%;background:var(--forms-base-material);box-shadow:var(--knob-shadow)}.knob-cap:after{content:"";position:absolute;left:calc((var(--knob-cap) - var(--spacing-1)) / 2);top:var(--knob-notch);width:var(--spacing-1);height:var(--knob-notch-length);border-radius:var(--spacing-1);background:var(--graphics-button-bold)}.switch-control{display:flex;align-items:center}.switch-label-below{flex-direction:column}.switch-box{display:flex;align-items:center;justify-content:center;width:var(--switch-box);height:var(--switch-box)}.fader-channel{display:flex;flex-direction:column;align-items:center;width:var(--fader-v-width)}.fader-channel .fader-v{margin-bottom:var(--grid-unit)}.fader-v{--position: 0;position:relative;width:var(--fader-v-width);height:var(--fader-v-height);cursor:ns-resize;touch-action:none}.fader-v:before{content:"";position:absolute;left:calc((var(--fader-v-width) - var(--fader-v-track)) / 2);top:0;width:var(--fader-v-track);height:100%;border-radius:var(--spacing-1);background:var(--inner-field)}.fader-v-cap{position:absolute;left:calc((var(--fader-v-width) - var(--fader-v-cap-width)) / 2);top:calc((1 - var(--position)) * (var(--fader-v-height) - var(--fader-v-cap-height)));width:var(--fader-v-cap-width);height:var(--fader-v-cap-height);border-radius:var(--spacing-2);background:var(--forms-base-material);box-shadow:var(--shadow-drop-small)}.main-menu-button{position:absolute;z-index:10;top:17px;left:13px}.main-menu{min-width:160px}.main-menu .menu-item{display:grid;grid-template-columns:12px 1fr auto;gap:4px;align-items:center;padding:4px 12px 4px 8px;color:var(--graphics-track-title)}.main-menu .menu-item.open{background:var(--forms-track-lane)}.main-menu .menu-item:disabled{color:var(--graphics-button-mid);background:none;cursor:default}.main-menu .menu-shortcut{padding-left:24px;color:var(--graphics-button-mid)}.menu-separator{height:1px;margin:4px 0;background:var(--forms-track-lane)}.dev{background:#fff;padding:8px 16px;font-family:system-ui,sans-serif}.dev[hidden],.dev .dev-dots[hidden]{display:none}.dev .dev-dots{position:fixed;z-index:30;left:16px;bottom:16px;display:flex;flex-direction:column;gap:4px;padding:8px 12px;background:#fff;box-shadow:var(--shadow-drop-small)}.library-dialog{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 64px);padding:0;border:none;border-radius:var(--radius-panel);background:var(--forms-base-material);box-shadow:var(--shadow-panel);color:var(--graphics-track-title);font-family:var(--font-ui);font-size:var(--text-display);line-height:var(--line-display)}.library-dialog button{padding:2px 8px;border:none;border-radius:1px;background:var(--forms-base-material);box-shadow:var(--shadow-drop-small);font:inherit;color:var(--graphics-button-bold);cursor:pointer}.library-dialog button:disabled{color:var(--graphics-button-mid);cursor:default}.library-dialog::backdrop{background:#0003}.library-dialog header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 0}.library-dialog h2{margin:0;font-size:var(--text-display)}.library-body{padding:8px 16px 16px;overflow:auto;max-height:calc(100vh - 140px)}.library-storage{margin:4px 0 12px;color:var(--graphics-button-mid)}.library-list{margin:12px 0 0;padding:0;list-style:none}.library-list li{display:grid;grid-template-columns:minmax(120px,1fr) auto;gap:2px 12px;padding:8px 0;border-top:1px solid var(--forms-track-lane)}.library-list li.open .library-name{font-weight:600}.library-name{font:inherit;min-width:0}.library-detail{grid-column:1;color:var(--graphics-button-mid)}.library-actions{grid-column:2;grid-row:1 / span 2;display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:flex-end}