: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-display: 12px;--line-display: 1.4;--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);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));box-sizing:border-box;padding:var(--spacing-4) var(--spacing-6) var(--spacing-6);background:var(--forms-base-material);border-radius:var(--radius-panel);box-shadow:var(--shadow-panel);font-size:var(--text-4);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;margin-bottom:var(--spacing-4)}.instrument-sections{display:flex;flex-wrap:wrap;gap:var(--spacing-6)}.instrument-section{padding-left:var(--spacing-4);border-left:1px solid var(--forms-track-divider)}.instrument-section-title{margin-bottom:var(--spacing-3);color:var(--graphics-button-mid)}.dials{display:flex;gap:var(--spacing-4)}.dial{--dial-width: calc(2 * var(--spacing-7) + var(--spacing-4));display:flex;flex-direction:column;align-items:center;gap:var(--spacing-3);width:var(--dial-width);flex:none}.dial-knob.pan{position:relative;left:auto;top:auto}.dial-toggle{display:flex;align-items:center;justify-content:center;height:25px}.dial-label{width:100%;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;line-height:var(--line-display);color:var(--graphics-button-mid)}.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}