:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#16162a;--panel:#1a1a2e;--panel-2:#1e1e32;--panel-3:#222238;--surface:#222;--surface-2:#2a2a3e;--border:#333;--border-2:#444;--border-3:#555;--text:#eee;--text-2:#ccc;--text-3:#aaa;--text-4:#888;--text-5:#666;--accent:#4a9eff;--accent-bg:#2a3a5e;--ok:#4b4;--ok-bg:#2a5a2a;--warn:#e8a735;--danger:#f44;--danger-soft:#f66;--danger-bg:#3a1a1a;--danger-border:#a44;--loop:#c060e0;--loop-bg:#2a2040;--loop-border:#8050a0;--radius:6px;--radius-lg:10px;--control-h:32px;--control-h-sm:28px;--control-h-lg:40px;--font-ui:13px;--font-sm:12px;--font-xs:11px;--keyboard-w:60px;--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}@media (pointer:coarse){:root{--control-h:44px;--control-h-sm:38px;--control-h-lg:48px;--font-ui:14px;--font-sm:13px;--font-xs:12px}}@media (width<=640px){:root{--keyboard-w:44px}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow-x:clip}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:var(--font-ui);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overscroll-behavior-x:none;line-height:1.4}#root{height:100%}input,select,textarea,button{font:inherit;color:inherit;min-width:0;max-width:100%}img,video,svg{max-width:100%}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.45}h1,h2,h3{font-weight:600;line-height:1.25}[hidden]{display:none!important}.app-shell{background:var(--bg);flex-direction:column;height:100dvh;display:flex}.app-main{flex-direction:column;flex:1;min-height:0;display:flex}.screen-scroll{-webkit-overflow-scrolling:touch;min-height:0;padding-bottom:var(--safe-bottom);flex:1;overflow-y:auto}.page{width:100%;max-width:800px;margin:0 auto;padding:16px}@media (width>=641px){.page{padding:24px}}.app-header{z-index:30;min-height:48px;padding:6px 12px;padding-left:max(12px, var(--safe-left));padding-right:max(12px, var(--safe-right));background:var(--panel);border-bottom:1px solid var(--border);align-items:center;gap:8px;display:flex;position:relative}.brand{min-height:var(--control-h);color:var(--accent);background:0 0;border:0;flex-shrink:0;align-items:center;gap:8px;padding:0 4px;font-size:18px;font-weight:600;display:inline-flex}.brand-mark{width:22px;height:22px}.project-name{min-width:0;min-height:var(--control-h);text-align:left;border-radius:var(--radius);color:var(--text-3);text-overflow:ellipsis;white-space:nowrap;background:0 0;border:1px solid #0000;flex:auto;padding:4px 6px;font-size:14px;overflow:hidden}@media (hover:hover){.project-name:hover{border-color:var(--border-2)}}.project-name-input{flex:auto;min-width:0;max-width:320px}.header-email{max-width:200px;color:var(--text-5);font-size:var(--font-sm);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.header-wide{display:none}.header-narrow{display:contents}@media (width>=641px){.header-wide{display:contents}.header-narrow{display:none}}.menu-backdrop{z-index:40;position:fixed;inset:0}.menu{z-index:41;background:var(--panel-3);border:1px solid var(--border-2);border-radius:var(--radius-lg);flex-direction:column;min-width:200px;max-width:calc(100vw - 16px);padding:6px;display:flex;position:absolute;top:calc(100% + 4px);right:8px;box-shadow:0 8px 32px #00000080}.menu-email{color:var(--text-5);font-size:var(--font-sm);text-overflow:ellipsis;white-space:nowrap;padding:8px 10px;overflow:hidden}.menu-item{min-height:var(--control-h);text-align:left;border-radius:var(--radius);color:var(--text);background:0 0;border:0;padding:0 10px}.menu-item:active{background:var(--surface-2)}.segmented{border:1px solid var(--border-3);border-radius:var(--radius);flex-shrink:0;display:inline-flex;overflow:hidden}.segmented>button{min-height:calc(var(--control-h) - 2px);color:var(--text-3);font-size:var(--font-ui);white-space:nowrap;background:0 0;border:0;padding:0 12px}.segmented>button+button{border-left:1px solid var(--border-3)}.segmented>button.is-active{background:var(--accent);color:#fff}.btn{min-height:var(--control-h);border:1px solid var(--border-2);border-radius:var(--radius);background:var(--surface);color:var(--text-3);font-size:var(--font-ui);white-space:nowrap;justify-content:center;align-items:center;gap:6px;padding:0 12px;line-height:1;text-decoration:none;display:inline-flex}@media (hover:hover){.btn:not(:disabled):hover{border-color:var(--border-3);color:var(--text)}}.btn:active:not(:disabled){transform:translateY(1px)}.btn-sm{min-height:var(--control-h-sm);font-size:var(--font-xs);padding:0 9px}.btn-lg{min-height:var(--control-h-lg);padding:0 16px;font-size:14px}.btn-icon{width:var(--control-h);flex-shrink:0;padding:0;font-size:15px}.btn-icon.btn-sm{width:var(--control-h-sm)}.btn-ghost{border-color:var(--border-3);background:0 0}.btn-plain{color:var(--text-5);background:0 0;border-color:#0000;font-size:18px}.btn-accent{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}.btn-danger{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-soft)}.btn-danger-solid{background:var(--danger);border-color:var(--danger);color:#fff}.btn-loop{background:var(--loop-bg);border-color:var(--loop-border);color:var(--loop)}.btn.is-active{background:var(--accent);border-color:var(--accent);color:#fff}@media (hover:hover){.btn-primary:not(:disabled):hover,.btn.is-active:not(:disabled):hover{color:#fff}}.input,.select{width:100%;min-height:var(--control-h);border:1px solid var(--border-2);border-radius:var(--radius);background:var(--surface);color:var(--text);outline:none;padding:0 10px;font-size:14px}@media (pointer:coarse){.input,.select{font-size:16px}}.input:focus,.select:focus{border-color:var(--accent)}.input-sm{min-height:var(--control-h-sm);padding:0 6px}.input-num{text-align:center;width:64px}.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");background-position:right 9px center;background-repeat:no-repeat;width:auto;padding-right:26px}.check{min-height:var(--control-h);color:var(--text-3);font-size:var(--font-sm);white-space:nowrap;cursor:pointer;align-items:center;gap:6px;display:inline-flex}.check input{width:18px;height:18px;accent-color:var(--accent)}.range{width:90px;min-height:var(--control-h-sm);accent-color:var(--accent)}.field{flex-direction:column;gap:4px;display:flex}.field>span{color:var(--text-3);font-size:var(--font-sm)}.toolbar{scrollbar-width:none;-webkit-overflow-scrolling:touch;background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:nowrap;flex-shrink:0;align-items:center;gap:8px;padding:6px 10px;display:flex;overflow-x:auto}.toolbar::-webkit-scrollbar{display:none}.toolbar-secondary{background:var(--panel-2)}@media (width>=641px){.toolbar{flex-wrap:wrap;row-gap:6px;padding:6px 12px;overflow:visible}}.toolbar-group{flex-shrink:0;align-items:center;gap:4px;display:inline-flex}.toolbar-label{color:var(--text-5);font-size:var(--font-xs);white-space:nowrap}.toolbar-value{min-width:32px;color:var(--text-4);font-size:var(--font-xs)}.toolbar-sep{background:var(--border);flex-shrink:0;width:1px;height:20px}.spacer{flex:1 1 0;min-width:0}.time-display{min-width:72px;color:var(--text-2);font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}.rec-label{color:var(--danger);font-size:var(--font-sm);font-weight:600}.devices-bar{background:var(--panel-2);border-bottom:1px solid var(--border);flex-shrink:0;padding:8px 12px}.editor{flex-direction:column;flex:1;min-height:0;display:flex}.editor-body{flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.editor-toast{z-index:10;color:#fff;max-width:calc(100% - 24px);font-size:var(--font-ui);pointer-events:none;background:#28283cf2;border:0;border-radius:8px;align-items:center;gap:10px;padding:10px 20px;font-weight:600;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #00000080}.editor-toast-rec{background:#ff2828e6}.editor-toast-ok{background:#28a028e6}.editor-toast-err{background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger-soft);pointer-events:auto;cursor:pointer;font-weight:400}.editor-overlay{z-index:20;width:min(720px,100% - 24px);max-height:calc(100% - 32px);position:absolute;top:16px;left:50%;overflow-y:auto;transform:translate(-50%)}.editor-footer{padding:6px 12px;padding-bottom:calc(6px + var(--safe-bottom));background:var(--panel);border-top:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:8px;display:flex}.editor-status{min-width:0;color:var(--text-5);font-size:var(--font-sm);white-space:nowrap;flex:1 0 100%;align-items:center;gap:12px;display:flex;overflow:hidden}.editor-actions{flex:1 0 100%;gap:8px;display:flex}.editor-actions .btn{flex:1;padding:0 6px}@media (width>=641px){.editor-status{flex:auto}.editor-actions{flex:none;margin-left:auto}.editor-actions .btn{flex:none;padding:0 16px}}.unsaved{color:var(--warn)}.spinner{border:2px solid var(--accent);border-top-color:#0000;border-radius:50%;flex-shrink:0;width:16px;height:16px;animation:.8s linear infinite spin}.rec-dot{background:#fff;border-radius:50%;width:10px;height:10px;animation:1s infinite blink}.blink{animation:1s infinite blink}@keyframes spin{to{transform:rotate(360deg)}}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.rec-btn{border:2px solid var(--border-3);background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:inline-flex}.rec-btn-sm{width:var(--control-h);height:var(--control-h)}.rec-btn:before{content:"";background:var(--danger);border-radius:50%;width:14px;height:14px;transition:border-radius .15s,width .15s,height .15s}.rec-btn-sm:before{width:12px;height:12px}.rec-btn.is-recording{background:var(--danger);border-color:var(--danger)}.rec-btn.is-recording:before{background:#fff;border-radius:2px;width:12px;height:12px}.piano-roll{overscroll-behavior:contain;flex:1;min-width:0;min-height:0;display:flex;overflow:hidden}.piano-keys{width:var(--keyboard-w);background:#1a1a1a;flex-shrink:0;position:relative;overflow:hidden}.piano-key{border-bottom:1px solid #1a1a1a;justify-content:flex-end;align-items:center;width:100%;padding-right:4px;font-size:9px;display:flex;position:absolute;left:0}.roll-main{overscroll-behavior:contain;flex-direction:column;flex:1;min-width:0;display:flex;position:relative;overflow:hidden}.roll-ruler{border-bottom:1px solid var(--border);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#16162e;flex-shrink:0;height:22px;position:relative;overflow:hidden}.roll-ruler canvas{display:block}.roll-canvas-wrap{flex:1;min-height:0;position:relative;overflow:hidden}.roll-canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;display:block;position:absolute;inset:0}.roll-selbox{z-index:5;pointer-events:none;background:#4a9eff1f;border:1px solid #4a9eff99;position:absolute}.roll-ctx{z-index:20;background:var(--surface-2);border:1px solid var(--border-3);border-radius:var(--radius);flex-direction:column;gap:6px;min-width:180px;max-width:calc(100% - 16px);padding:8px;display:flex;position:absolute;box-shadow:0 4px 16px #00000080}.roll-ctx-title{color:var(--text-3);font-size:var(--font-xs)}.roll-ctx-actions{gap:4px;display:flex}.roll-ctx-actions .btn{flex:1}.roll-ctx-actions .btn-icon{flex:none}.btn-warn{background:var(--warn);border-color:var(--warn);color:var(--panel);font-weight:600}.card{background:var(--panel);border-radius:var(--radius-lg);padding:16px}.card-divider{border-top:1px solid var(--border);margin-top:12px;padding-top:12px}.action-grid{grid-template-columns:1fr;gap:10px;margin-bottom:20px;display:grid}@media (width>=420px){.action-grid{grid-template-columns:repeat(3,1fr)}}.instrument-pick{flex-wrap:wrap;align-items:center;gap:6px;margin:-8px 0 16px;display:flex}.dropzone{text-align:center;background:var(--panel);border:2px dashed var(--border-2);cursor:pointer;border-radius:12px;margin-bottom:20px;padding:28px 16px}.dropzone.is-busy{cursor:default}.dropzone.is-over{border-color:var(--accent)}.dropzone-title{color:var(--text-4);margin-bottom:6px;font-size:15px}.dropzone-sub{color:var(--text-5);font-size:var(--font-sm)}.dropzone-progress{color:var(--accent);margin-bottom:12px;font-size:16px}.progress{background:var(--border);border-radius:4px;width:100%;height:8px;overflow:hidden}.progress>div{background:var(--accent);border-radius:4px;height:100%;transition:width .3s}.record-card{margin-bottom:20px}.record-row{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:10px;display:flex}.record-row .btn{margin-left:auto}.record-options{flex-wrap:wrap;align-items:center;gap:4px 12px;display:flex}.alert{font-size:var(--font-ui);border-radius:8px;margin-bottom:16px;padding:12px}.alert-danger{background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger-soft)}.section-title{margin:28px 0 12px;font-size:16px}.project-list{flex-direction:column;gap:6px;list-style:none;display:flex}.project-item{background:var(--panel);border:1px solid #0000;border-radius:8px;align-items:center;gap:4px;padding:4px 6px 4px 12px;display:flex}.project-item.is-confirming{border-radius:8px 8px 0 0}@media (hover:hover){.project-item:hover{border-color:var(--border)}}.project-main{min-width:0;min-height:var(--control-h);text-align:left;background:0 0;border:0;flex:1;padding:6px 0}.project-title{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.project-meta{color:var(--text-5);font-size:var(--font-xs);margin-top:2px}.badge{color:#fff;border-radius:10px;flex-shrink:0;padding:2px 8px;font-size:11px}.project-confirm{background:var(--danger-bg);color:#f88;font-size:var(--font-sm);border-top:1px solid #422;border-radius:0 0 8px 8px;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;display:flex}.project-confirm span{flex:140px;min-width:0}.empty{color:var(--text-5);padding:16px}.login-wrap{padding:16px;padding-bottom:calc(16px + var(--safe-bottom));flex:1;justify-content:center;align-items:center;display:flex;overflow-y:auto}.login-card{border:1px solid var(--surface-2);flex-direction:column;gap:14px;width:100%;max-width:360px;padding:24px;display:flex}.login-card h2{text-align:center;font-size:22px}.dialog{border:1px solid var(--border);background:var(--panel);width:100%;max-width:100%;max-height:calc(100dvh - 40px);color:var(--text);border-bottom:0;border-radius:14px 14px 0 0;margin:auto 0 0;padding:0;box-shadow:0 8px 40px #0009}.dialog::backdrop{background:#0009}.dialog-inner{padding:16px;padding-bottom:calc(16px + var(--safe-bottom))}@media (width>=641px){.dialog{border-bottom:1px solid var(--border);border-radius:var(--radius-lg);width:min(560px,100% - 32px);max-height:calc(100dvh - 32px);margin:auto}.dialog-inner{padding:20px}}.dialog-head{align-items:center;gap:8px;margin-bottom:12px;display:flex}.dialog-head h2{flex:1;min-width:0;font-size:18px}.dialog-text{color:var(--text-4);font-size:var(--font-sm);margin-bottom:16px}.share-rows{flex-direction:column;gap:8px;display:flex}.share-row{background:var(--panel-3);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;display:flex}.share-row-label{min-width:90px;color:var(--text-2);font-weight:600}.share-row .input{min-height:var(--control-h-sm);color:var(--text-3);flex:200px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}@media (pointer:fine){.share-row .input{font-size:11px}}.share-row-empty{color:var(--text-5);font-size:var(--font-sm);flex:1;font-style:italic}.share-row-actions{gap:6px;margin-left:auto;display:flex}.picker{background:var(--panel);border:1px solid var(--accent);border-radius:var(--radius-lg);padding:16px;box-shadow:0 8px 32px #00000080}.picker-head{justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;font-size:14px;font-weight:600;display:flex}.picker-list{flex-direction:column;gap:6px;max-height:50vh;display:flex;overflow-y:auto}.track-row{border:1px solid var(--surface-2);border-radius:var(--radius);background:#161624;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 12px;display:flex}.track-row.is-on{background:var(--surface);border-color:var(--accent)}.track-row>input{width:20px;height:20px;accent-color:var(--accent);flex-shrink:0}.track-info{flex:140px;min-width:0}.track-name{text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.track-row:not(.is-on) .track-name{color:var(--text-4)}.track-meta{color:var(--text-5);font-size:var(--font-xs)}.track-instr{flex-wrap:wrap;flex:1 0 100%;gap:4px;padding-left:30px;display:flex}@media (width>=641px){.track-instr{flex:none;padding-left:0}}.picker-foot{justify-content:space-between;align-items:center;gap:8px;margin-top:12px;display:flex}.devices{grid-template-columns:auto 1fr;align-items:center;gap:8px 10px;display:grid}.devices .select{width:100%}@media (width>=641px){.devices{flex-wrap:wrap;display:flex}.devices .select{width:auto;max-width:240px}}.sheet-area{-webkit-overflow-scrolling:touch;background:#e8e8e8;flex-direction:column;flex:1;align-items:center;min-height:0;padding:12px;display:flex;overflow:auto}@media (width>=641px){.sheet-area{padding:32px}}.sheet-page{background:#fff;border-radius:2px;max-width:100%;margin-bottom:24px;box-shadow:0 2px 16px #0003}.sheet-page>div{width:100%}.sheet-empty{color:#888;text-align:center;padding:2rem}.sheet-error{color:#c00;background:#fff0f0;border:1px solid #fcc;border-radius:8px;width:100%;margin-bottom:16px;padding:16px;font-size:14px}.sheet-page svg path,.sheet-page svg rect,.sheet-page svg line,.sheet-page svg polygon,.sheet-page svg circle,.sheet-page svg ellipse{fill:#000!important;stroke:#000!important}.sheet-page svg text{fill:#000!important}.sheet-page svg [fill=none],.sheet-page svg [fill=transparent]{fill:none!important}.sheet-page svg [stroke=none],.sheet-page svg [stroke=transparent]{stroke:none!important}.sheet-page svg .abcjs-active-note,.sheet-page svg .abcjs-active-note path,.sheet-page svg .abcjs-active-note rect,.sheet-page svg .abcjs-active-note polygon,.sheet-page svg .abcjs-active-note circle,.sheet-page svg .abcjs-active-note ellipse,.sheet-page svg .abcjs-active-note text{fill:var(--accent)!important;stroke:var(--accent)!important}.view-shell{background:var(--bg);flex-direction:column;height:100dvh;display:flex}.view-header{background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 12px;display:flex}.brand-text{color:var(--accent);font-size:16px;font-weight:600}.view-title{min-width:0;max-width:60vw;color:var(--text-2);text-overflow:ellipsis;white-space:nowrap;flex:0 auto;font-size:14px;overflow:hidden}.chip{background:var(--panel-3);border:1px solid var(--border);color:var(--text-3);font-size:var(--font-sm);white-space:nowrap;border-radius:4px;padding:2px 8px}.live-status{color:#a85;font-size:var(--font-sm);white-space:nowrap;align-items:center;gap:6px;display:inline-flex}.live-status.is-live{color:#7ec97e}.live-dot{background:currentColor;border-radius:50%;width:8px;height:8px;transition:box-shadow .4s}.live-dot.is-flash{box-shadow:0 0 0 6px #7ec97e40}.view-transport{padding:8px 12px;padding-bottom:calc(8px + var(--safe-bottom));background:var(--panel);border-top:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;display:flex}.centered{background:var(--bg);height:100dvh;color:var(--text-3);text-align:center;justify-content:center;align-items:center;padding:16px;display:flex}.hide-narrow{display:none!important}.show-narrow{display:inline}@media (width>=641px){.hide-narrow{display:revert!important}.show-narrow{display:none!important}}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media print{.no-print,header,nav,.toolbar,.editor-footer,.app-header,.view-header,.view-transport{display:none!important}html,body,#root,.app-shell,.app-main,.editor,.view-shell{color:#000!important;background:#fff!important;height:auto!important;overflow:visible!important}.sheet-area{background:#fff!important;padding:0!important;display:block!important;overflow:visible!important}.sheet-page{width:100%!important;box-shadow:none!important;border-radius:0!important;margin:0!important;padding:1.2cm 1.5cm 1.5cm!important}@page{margin:0;size:A4 portrait}}