:root{--page:#f2f4f7;--panel:#fff;--border:#e2e5ea;--text:#16181d;--muted:#6b7280;--accent:#2f6fed;--disabled:#b8bdc7;--warning:#b45309}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{color:var(--text);background:var(--page);-webkit-text-size-adjust:100%;margin:0;font:14px/1.4 Inter,ui-sans-serif,system-ui,sans-serif}.shell{flex-direction:column;height:100%;display:flex}.toolbar{background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:12px;padding:4px 12px;display:flex}.brand{letter-spacing:.04em;color:var(--muted);margin:0;font-size:15px;font-weight:700}.song-title{min-height:44px;color:var(--text);font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;margin-right:auto;padding:0 6px;font-weight:600}.song-title:hover:enabled{border-color:var(--border)}.song-title:disabled{color:var(--muted);cursor:default}.button{border:1px solid var(--border);background:var(--panel);min-width:44px;min-height:44px;color:var(--text);font:inherit;cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:0 14px;display:inline-flex}.button:hover{border-color:var(--accent)}.file-input{opacity:0;width:1px;height:1px;position:absolute}.picker{color:var(--muted);align-items:center;gap:6px;font-size:12px;display:flex}.picker select{border:1px solid var(--border);background:var(--panel);min-height:44px;color:var(--text);font:inherit;border-radius:8px;padding:0 8px}.segmented{border:1px solid var(--border);border-radius:8px;display:flex;overflow:hidden}.segment{background:var(--panel);min-height:44px;color:var(--text);font:inherit;cursor:pointer;border:0;padding:0 14px}.segment[aria-pressed=true]{background:var(--accent);color:#fff}.zoom{align-items:center;gap:4px;display:flex}.zoom-value{text-align:center;min-width:52px;color:var(--muted);font-variant-numeric:tabular-nums}.problem{color:#b42318;background:#fff4f4;border-bottom:1px solid #f3c9c9;margin:0;padding:8px 12px}.notice{background:var(--page);border-bottom:1px solid var(--border);color:var(--muted);margin:0;padding:8px 12px}.frame{flex-direction:column;flex:1;min-height:0;display:flex}.pane{background:var(--panel);min-height:0;display:flex;overflow:hidden}.pane.editor{flex-direction:column;flex:1}.divider{background:var(--page);border-top:1px solid var(--border);border-bottom:1px solid var(--border);cursor:row-resize;touch-action:none;flex:none;height:8px}.empty{color:var(--muted);margin:auto}.editor-header{border-bottom:1px solid var(--border);flex:none;align-items:center;gap:16px;padding:0 12px;display:flex}.tabs{gap:4px;display:flex}.tab{min-height:44px;color:var(--text);font:inherit;cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;padding:0 12px}.tab[aria-selected=true]{border-bottom-color:var(--accent);color:var(--accent)}.tab:disabled{color:var(--disabled);cursor:default}.editor-range{color:var(--muted)}.pane.editor:focus{outline:none}.editor-pattern{color:var(--muted)}.editor-fill{color:var(--warning)}.editor-voices{color:var(--muted)}.editor-cursor{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto}.editor-toolbar{border-bottom:1px solid var(--border);flex-wrap:wrap;flex:none;align-items:center;gap:10px;padding:4px 12px;display:flex}.tool-group{border-right:1px solid var(--border);align-items:center;gap:2px;padding-right:10px;display:flex}.tool-group:last-of-type{border-right:0;padding-right:0}.tool{min-width:44px;min-height:44px;color:var(--text);font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;padding:0 6px;display:inline-flex}.tool:hover:enabled{border-color:var(--border);background:var(--page)}.tool[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:#fff}.tool:disabled{color:var(--disabled);cursor:default}.voices{align-items:center;gap:4px;display:flex}.tool.wide{white-space:nowrap;padding:0 10px;font-size:12px}.icon{width:22px;height:22px}.icon-label{letter-spacing:.02em;white-space:nowrap;font-size:11px;font-weight:600}.menu-layer{z-index:10;position:fixed;inset:0}.menu-anchor{pointer-events:none;align-items:flex-start;display:flex;position:absolute;top:8px;bottom:8px;right:8px}.menu-anchor.up{align-items:flex-end}.menu{pointer-events:auto;border:1px solid var(--border);background:var(--panel);border-radius:10px;min-width:200px;max-height:100%;padding:4px;overflow-y:auto;box-shadow:0 12px 32px #1018282e}.menu:focus{outline:none}.menu-item{width:100%;min-height:44px;color:var(--text);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;align-items:center;gap:16px;padding:0 10px;display:flex}.menu-item:hover:enabled{background:var(--page)}.menu-item:disabled{color:var(--disabled);cursor:default}.menu-item[aria-pressed=true] .menu-title:before{content:"✓ ";color:var(--accent)}.menu-title{flex:1}.menu-shortcut{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.menu-empty{color:var(--muted);margin:0;padding:12px 10px}.palette-layer{background:#1018283d}.palette{border:1px solid var(--border);background:var(--panel);border-radius:12px;width:min(560px,90vw);position:absolute;top:12vh;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 20px 48px #1018283d}.palette-query{border:0;border-bottom:1px solid var(--border);width:100%;min-height:48px;color:var(--text);font:inherit;background:0 0;padding:0 14px;font-size:15px}.palette-query:focus{outline:none}.palette-results{max-height:50vh;padding:4px;overflow-y:auto}.palette-result{width:100%;min-height:44px;color:var(--text);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;align-items:center;gap:12px;padding:0 10px;display:flex}.palette-result[aria-selected=true],.palette-result:hover{background:var(--page)}.palette-title{flex:1}.palette-category{color:var(--muted);font-size:12px}.surface{flex:1;min-width:0;min-height:0;position:relative;overflow:hidden}.surface-canvas{position:absolute;top:0;left:0}.surface-scroller{touch-action:pan-x pan-y;position:absolute;inset:0;overflow:auto}.drums{flex-direction:column;flex:1;min-height:0;display:flex;overflow:auto}.drums-header{border-bottom:1px solid var(--border);flex-wrap:wrap;flex:none;align-items:center;gap:12px;padding:6px 12px;display:flex}.drums-title{font-weight:600}.drums-header .picker{margin-left:auto}.drums-skipped{color:var(--muted);margin:0;padding:6px 12px}.drum-grid{align-items:flex-start;gap:12px;padding:10px 12px;display:flex}.drum-names,.drum-cells{grid-template-rows:repeat(8,28px);gap:2px;display:grid}.drum-names{padding-top:20px}.drum-name{color:var(--muted);white-space:nowrap;justify-content:flex-end;align-items:center;padding-right:6px;font-size:12px;display:flex}.drum-bar{flex-direction:column;min-width:0;display:flex}.drum-bar-name{height:20px;color:var(--muted);font-variant-numeric:tabular-nums}.drum-cell{border:1px solid var(--border);background:var(--panel);cursor:pointer;border-radius:4px;min-width:22px;padding:0}.drum-cell.beat{border-color:var(--muted)}.drum-cell:hover{background:var(--page)}.drum-cell[aria-pressed=true]{border-color:var(--accent);background:var(--accent)}.roll{flex-direction:column;flex:1;min-height:0;display:flex}.roll-header{border-bottom:1px solid var(--border);flex-wrap:wrap;flex:none;align-items:center;gap:12px;padding:6px 12px;display:flex}.roll-title{font-weight:600}.roll-header .picker{margin-left:auto}.roll-view:focus-within{outline:none}.roll-skipped{color:var(--muted);margin:0;padding:6px 12px}.tool-group.text .tool{white-space:nowrap;min-width:0;padding:0 8px;font-size:12px}.diff{flex-direction:column;flex:1;min-height:0;display:flex}.diff-header{border-bottom:1px solid var(--border);flex-wrap:wrap;flex:none;align-items:center;gap:12px;padding:6px 12px;display:flex}.diff-title{font-weight:600}.diff-summary{color:var(--muted)}.diff-legend{color:var(--muted);gap:12px;margin:0 0 0 auto;padding:0;list-style:none;display:flex}.diff-legend-item{align-items:center;gap:4px;display:flex}.diff-swatch{border-radius:3px;width:12px;height:12px}.diff-bars{border-bottom:1px solid var(--border);flex-wrap:wrap;flex:none;gap:16px;margin:0;padding:6px 12px;list-style:none;display:flex}.diff-bar{align-items:center;gap:6px;display:flex}.diff-bar-name{color:var(--muted);font-variant-numeric:tabular-nums}.record{flex-direction:column;flex:1;min-height:0;display:flex;overflow-y:auto}.record-header,.listen{border-bottom:1px solid var(--border);flex-wrap:wrap;flex:none;align-items:center;gap:12px;padding:6px 12px;display:flex}.record-header .field,.listen .field{width:auto}.record-where{color:var(--muted);margin-left:auto}.record-lane{flex:none;padding:6px 12px}.record-lane canvas{border:1px solid var(--border);border-radius:4px;display:block}.listen .field-group{margin:0}.listen-meter{border:1px solid var(--border);border-radius:4px;width:120px;height:8px;overflow:hidden}.listen-level{background:var(--accent);width:0;height:100%}.listen-heard,.take-where{color:var(--muted);font-variant-numeric:tabular-nums}.take{flex-direction:column;flex:1;min-height:200px;display:flex}.take-header{border-bottom:1px solid var(--border);flex-wrap:wrap;flex:none;align-items:center;gap:12px;padding:6px 12px;display:flex}.take-summary{font-weight:600}.overview{flex:1;min-height:0;display:flex}.overview-gutter{border-right:1px solid var(--border);flex:none;width:250px;overflow:hidden}.overview-lane-name{border-bottom:1px solid var(--border);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;background:#f4f6f9;align-items:center;padding:0 10px;font-size:11px;display:flex}.overview-track{border-bottom:1px solid var(--border);align-items:center;gap:2px;padding-right:6px;display:flex}.overview-track-name{min-width:0;height:100%;color:var(--text);font:inherit;text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;background:0 0;border:0;flex:1;align-items:center;gap:8px;padding:0 10px;font-size:12px;display:flex;overflow:hidden}.overview-track-name:hover{background:var(--page)}.overview-track-toggle{border:1px solid var(--border);background:var(--panel);width:20px;height:20px;color:var(--muted);font:inherit;cursor:pointer;border-radius:4px;flex:none;padding:0;font-size:11px;line-height:1}.overview-track-toggle[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:#fff}.overview-track-volume{flex:none;width:64px}.overview-add-track{width:100%;min-height:34px;color:var(--muted);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;align-items:center;padding:0 10px;font-size:12px;display:flex}.overview-add-track:hover{background:var(--page);color:var(--text)}.overview-track-swatch{border-radius:2px;flex:none;width:8px;height:8px}.overview-scroller{cursor:crosshair}.transport{background:var(--panel);border-top:1px solid var(--border);flex-wrap:wrap;flex:none;align-items:center;gap:8px;padding:4px 12px;display:flex}.transport-position{font-variant-numeric:tabular-nums;align-items:baseline;gap:8px;min-width:110px;padding:0 6px;display:flex}.transport-bar-beat{font-size:17px;font-weight:600}.transport-clock{color:var(--muted)}.transport-tempo{border:1px solid var(--border);background:var(--panel);width:72px;min-height:36px;color:var(--text);font:inherit;border-radius:8px;padding:0 8px}.transport-scale{width:110px}.transport-loading{color:var(--muted);align-items:center;gap:8px;font-size:12px;display:flex}.transport-problem{color:#b42318}.popover-center{max-height:84vh;display:flex;position:absolute;top:8vh;left:50%;transform:translate(-50%)}.popover{pointer-events:auto;border:1px solid var(--border);background:var(--panel);border-radius:12px;flex-direction:column;width:min(380px,100vw - 24px);max-height:100%;display:flex;overflow:hidden;box-shadow:0 16px 40px #10182833}.popover:focus{outline:none}.popover-head{border-bottom:1px solid var(--border);flex:none;align-items:center;gap:8px;padding:4px 4px 4px 14px;display:flex}.popover-title{margin:0;font-size:14px;font-weight:600}.popover-close{min-width:44px;min-height:44px;color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:8px;margin-left:auto;font-size:18px}.popover-close:hover{background:var(--page);color:var(--text)}.popover-problem{color:#b42318;background:#fff4f4;border-bottom:1px solid #f3c9c9;flex:none;margin:0;padding:8px 14px}.popover-body{padding:6px 14px 14px;overflow-y:auto}.popover-actions{border-top:1px solid var(--border);background:var(--panel);gap:8px;padding:10px 0 0;display:flex;position:sticky;bottom:0}.field{align-items:center;gap:10px;min-height:44px;display:flex}.field-label{color:var(--muted);flex:0 0 108px;font-size:12px}.field-input{border:1px solid var(--border);background:var(--panel);min-width:0;min-height:36px;color:var(--text);font:inherit;border-radius:8px;flex:1;padding:0 8px}.field-range{flex:1;min-width:0}.field-color{border:1px solid var(--border);background:var(--panel);border-radius:8px;width:44px;min-height:36px;padding:2px}.field-value{min-width:56px;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.field-text{overflow-wrap:anywhere;flex:1;min-width:0}.field.check{justify-content:flex-start}.field-group{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:14px 0 4px;font-size:11px;font-weight:600}.snapshot{border:1px solid var(--border);background:var(--page);width:100%;height:220px;color:var(--text);resize:vertical;border-radius:8px;padding:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.preset-list{flex-direction:column;gap:6px;margin-top:10px;display:flex}.preset{border:1px solid var(--border);background:var(--panel);min-height:44px;color:var(--text);font:inherit;text-align:left;cursor:pointer;border-radius:10px;align-items:center;gap:10px;padding:6px 10px;display:flex}.preset:hover{border-color:var(--accent)}.preset.band{gap:10px}.band-choice{cursor:pointer;flex:1;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px;display:grid}.band-choice input{grid-row:1/span 3}.preset-name{font-weight:600}.preset-note,.preset-tracks{color:var(--muted);font-size:12px}.preset-swatch{border-radius:3px;flex:none;width:10px;height:10px}.preset:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.button.primary{border-color:var(--accent);background:var(--accent);color:#fff}.button.danger{color:#b42318;margin-left:auto}.button:disabled{color:var(--disabled);cursor:default}.songs{flex-direction:column;gap:12px;width:min(760px,100%);margin:0 auto;padding:16px 20px 32px;display:flex}.songs-head{align-items:center;gap:16px;min-height:52px;display:flex}.songs-title{margin:0;font-size:20px;font-weight:600}.account{color:var(--muted);align-items:center;gap:10px;margin-left:auto;display:flex}.songs-head>.button{margin-left:auto}.songs-folder{border:1px solid var(--border);background:var(--panel);border-radius:10px;align-items:center;gap:12px;padding:8px 12px;display:flex}.songs-folder-name{flex:1}.songs-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.button.disabled{color:var(--disabled);cursor:default}.songs-busy{color:var(--muted)}.song-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.song-row{border:1px solid var(--border);background:var(--panel);width:100%;min-height:52px;color:var(--text);font:inherit;text-align:left;cursor:pointer;border-radius:10px;align-items:baseline;gap:12px;padding:8px 14px;display:flex}.song-row:hover{border-color:var(--accent)}.song-name{flex:1;font-weight:600}.song-meta{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.songs .empty{text-align:center;margin:24px 0}.sync{align-items:center;gap:8px;display:flex}.sync-status{border:1px solid var(--border);background:var(--panel);min-height:32px;color:var(--muted);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer;border-radius:16px;padding:0 10px;font-size:12px}.sync-status.saving,.sync-status.merged{color:var(--accent);border-color:var(--accent)}.sync-status.offline{color:var(--warning);border-color:var(--warning)}.sync-status.error{color:#b42318;border-color:#f3c9c9}.peers{gap:8px;margin:0;padding:0;list-style:none;display:flex}.peer{color:var(--muted);align-items:center;gap:4px;font-size:12px;display:flex}.peer-dot{border-radius:50%;width:10px;height:10px}.peer[data-live=true] .peer-dot{box-shadow:0 0 0 2px #ffffffe6,0 0 0 3px}.peer-follow{border:1px solid var(--border);color:inherit;font:inherit;cursor:pointer;background:0 0;border-radius:4px;padding:0 4px}.peer-follow[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.update-prompt{z-index:20;border:1px solid var(--border);background:var(--panel);border-radius:10px;align-items:center;gap:8px;padding:8px 8px 8px 14px;display:flex;position:fixed;bottom:16px;right:16px;box-shadow:0 6px 24px #1018282e}