: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);--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}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:163px;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:163px 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:46px;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:43px;background:var(--color-brand-yellow)}.track-title{position:absolute;left:11px;top:6px;width:128px;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:143px;top:6px;width:14px;height:14px;color:var(--graphics-button-mid)}.track-buttons{position:absolute;left:11px;top:24px;display:flex;gap:2px}.small-button{width:14px;height:14px;padding:0;border:none;border-radius:1px;background:var(--forms-base-material);box-shadow:var(--shadow-drop-small);font:inherit;font-size:var(--text-display);line-height:14px;color:var(--graphics-button-bold);cursor:pointer}.small-button svg{display:block}.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)}.fader{position:absolute;left:77px;top:27px;width:61px;height:10px;border-radius:48px;background:var(--forms-inset);cursor:ew-resize;touch-action:none}.fader{overflow:hidden}.fader .meter{position:absolute;left:0;height:2px;width:0;background:var(--color-meter-green)}.fader .meter.left{top:3px}.fader .meter.right{top:5px}.fader .handle{position:absolute;top:1px;width:8px;height:8px;border-radius:50%;background:var(--forms-base-material);box-shadow:var(--shadow-drop-small)}.pan{position:absolute;left:142px;top:24px;width:16px;height:16px;cursor:ns-resize;touch-action:none}.pan svg{position:absolute;top:0;right:0;bottom:0;left:0}.pan .knob{position:absolute;left:4px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--forms-base-material);box-shadow:var(--shadow-drop-small)}.pan .knob:after{content:"";position:absolute;left:3px;top:1px;width:2px;height:2px;border-radius:50%;background:var(--graphics-button-bold)}.lane{position:relative;height:46px;box-sizing:border-box;border-bottom:1px solid var(--forms-track-divider)}.clip{position:absolute;top:1px;height:43px;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)}.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]{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}