html,body,#root{margin:0;width:100%;min-height:100%}body{min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}:root{--bg: #0f1115;--bg-2: #151820;--panel: #1b1f28;--panel-soft: #232937;--panel-raised: #2b3242;--line: rgba(255, 255, 255, .12);--line-soft: rgba(255, 255, 255, .07);--text: #f5f7ff;--muted: #a9b3c6;--accent: #0a84ff;--accent-soft: rgba(10, 132, 255, .16);--accent-2: #64d2ff;--danger: #ff5a5f;--ok: #32d74b;--shadow: 0 12px 26px rgba(0, 0, 0, .32)}*{box-sizing:border-box}.app-shell{min-height:100vh;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,SF Pro Display,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at 20% 0%,rgba(10,132,255,.08),transparent 46%),radial-gradient(circle at 84% 0%,rgba(100,210,255,.06),transparent 42%),linear-gradient(180deg,#0e1116,#0c0f14);display:flex;flex-direction:column;gap:.68rem;padding:1rem}.top-bar{display:grid;grid-template-columns:minmax(240px,1fr) minmax(420px,1.2fr) auto;gap:.55rem;align-items:center;background:linear-gradient(180deg,#282c3ae6,#1b1f2be6);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:.68rem;box-shadow:0 10px 24px #00000057;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);position:relative;z-index:25;overflow:visible}.top-bar.v2 .top-subbar{grid-column:1 / -1}.project-name-wrap{display:flex;align-items:center;gap:.55rem}.badge{background:linear-gradient(120deg,var(--accent) 0%,#6b4dff 100%);color:#fdfdff;border-radius:999px;padding:.24rem .58rem;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.project-name{width:100%;border:1px solid var(--line);background:#ffffff0a;color:var(--text);border-radius:10px;padding:.43rem .58rem;font-size:.9rem;font-weight:520}.view-mode-toggle{display:inline-flex;gap:.15rem;border:1px solid var(--line-soft);border-radius:999px;padding:.13rem;background:#ffffff0a}.view-mode-toggle button{border-radius:999px;padding:.28rem .65rem}.view-mode-toggle.icon-only{gap:.12rem;padding:.12rem}.view-mode-toggle.icon-only button{width:34px;min-width:34px;height:34px;padding:0;font-size:0;gap:0}.view-mode-toggle.icon-only button .ui-icon{width:16px;height:16px}.transport-controls,.io-controls{display:flex;align-items:center;gap:.42rem;flex-wrap:wrap}.transport-controls.primary{justify-content:flex-start}.toolbar-group{border:1px solid var(--line-soft);border-radius:999px;background:#ffffff09;padding:.24rem}.toolbar-divider{width:1px;height:18px;background:var(--line);margin:0 .1rem}.transport-controls button .ui-icon,.io-controls button .ui-icon,.editor-mode-row button .ui-icon,.top-subbar .chip .ui-icon{width:14px;height:14px}.transport-controls.primary button.icon-only{width:42px;min-width:42px;height:36px;padding:0;font-size:0;gap:0}.transport-controls.primary button.icon-only .ui-icon{width:17px;height:17px}.io-controls.compact{justify-content:flex-end}.top-subbar{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:.2rem;margin-top:.15rem}.top-subbar .chip{border:1px solid var(--line);background:#ffffff08;color:var(--muted);border-radius:999px;font-size:.72rem;padding:.2rem .5rem;display:inline-flex;align-items:center;gap:.28rem}.add-menu-wrap{position:relative}.add-menu-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:120;min-width:210px;max-height:min(62vh,420px);overflow:auto;border:1px solid var(--line);background:linear-gradient(180deg,#232637,#1b1d2c);border-radius:12px;padding:.35rem;display:grid;gap:.28rem;box-shadow:0 12px 26px #00000073}.add-menu-pop.align-right{left:auto;right:0}.add-menu-pop button{text-align:left;justify-content:flex-start;white-space:nowrap;padding:.38rem .52rem}.midi-input-label{color:var(--muted);font-size:.74rem;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.transport-controls label{display:flex;align-items:center;gap:.3rem;font-size:.79rem;color:var(--muted)}.transport-controls .tempo-label{padding-left:.1rem}.midi-toggle.active{border-color:#32d74bb8;background:linear-gradient(180deg,#32d74b47,#14712b40)}.metronome-toggle.active{border-color:#7caaffb3;background:linear-gradient(180deg,#7caaff42,#4c73d633)}.toggle-inline{display:inline-flex!important;align-items:center;gap:.35rem;font-weight:600}.toggle-inline input{width:auto!important}.transport-controls input{width:72px}.master-gain-label{min-width:210px}.master-gain-label input{width:130px}.return-level-label{min-width:170px}.return-level-label input{width:104px}.hidden{display:none!important}button,input,select{font:inherit}button,input[type=number],select{border:1px solid var(--line);background:linear-gradient(180deg,#2b3240,#232936);color:var(--text);border-radius:12px;padding:.34rem .62rem;font-size:.78rem}button{cursor:pointer;transition:all .14s ease;display:inline-flex;align-items:center;justify-content:center;gap:.34rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ui-icon{width:13px;height:13px;stroke-width:2;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:.9;flex:0 0 auto}button:hover{border-color:#0a84ffa8;box-shadow:0 0 0 1px #0a84ff38 inset}button:disabled{opacity:.45;cursor:not-allowed}button.active{border-color:#0a84ffcc;background:linear-gradient(180deg,#0a84ff6b,#0752b26b);color:#fff}.icon-btn.subtle{padding-inline:.5rem;color:var(--muted)}.transport-hero{border-color:#57b4ff94;background:linear-gradient(180deg,#57b4ff52,#4062b152)}.transport-sub{opacity:.9}.transport-counter{min-width:78px;border:1px solid rgba(124,170,255,.45);border-radius:9px;padding:.16rem .48rem;background:linear-gradient(180deg,#4262a84d,#2a3f7057);display:grid;gap:0;line-height:1.05}.transport-counter-label{font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;color:#b4c7e8cc}.transport-counter strong{font-size:.82rem;letter-spacing:.03em;color:#eef3ff}.transport-record{border-color:#ff637f73}.transport-record.active-rec{background:linear-gradient(180deg,#ff637f6b,#92325061)}button.danger,.piano-note button:hover{border-color:var(--danger)}.toast-strip{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}.toast-strip.minimal{gap:.35rem}.toast-pill{border:1px solid var(--line);background:#161823e6;color:var(--muted);border-radius:999px;padding:.18rem .5rem;font-size:.69rem;display:inline-flex;align-items:center;gap:.32rem}.toast-pill.status-pill{color:#d9dff3;max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast-pill.info{border-color:#57b4ff7a;background:#2849783d}.toast-pill.warning{border-color:#ffb26f80;background:#623a1b52;color:#ffe4cb}.toast-pill.guide{border-color:#9f63ff75;background:#42276847}.toast-pill.chrome-tip{border-color:#89bfff99;background:#24447057;color:#deebff}.toast-pill.chrome-tip .ui-icon{width:12px;height:12px;color:#9fd4ff}.toast-pill button{padding:.12rem .4rem;font-size:.68rem}.recovery-banner{border:1px solid rgba(87,180,255,.42);background:#28497847;border-radius:12px;padding:.5rem .72rem;display:flex;justify-content:space-between;gap:.8rem;align-items:center;color:#dcedff;font-size:.84rem}.recovery-actions{display:flex;gap:.4rem}.missing-media-banner{border:1px solid rgba(255,178,111,.45);background:#623a1b73;border-radius:12px;padding:.5rem .72rem;display:flex;justify-content:space-between;gap:.8rem;align-items:center;color:#ffe8cf;font-size:.84rem}.quickstart-banner{border:1px solid rgba(159,99,255,.45);background:#4227686b;border-radius:12px;padding:.56rem .78rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:#ece4ff;font-size:.84rem}.quickstart-banner ol{margin:.35rem 0 0;padding-left:1.1rem;display:grid;gap:.18rem}.quickstart-actions{display:flex;align-items:flex-start;gap:.4rem;flex-wrap:wrap}.missing-more{color:var(--muted);align-self:center}.main-grid{min-height:0;flex:1;display:grid;grid-template-columns:210px 1fr 290px;gap:.58rem;position:relative}.main-grid-divider{position:absolute;left:0;right:0;bottom:var(--editor-panel-height, 300px);height:12px;cursor:row-resize;-webkit-user-select:none;user-select:none;z-index:44}.main-grid-divider:before{content:"";position:absolute;left:14px;right:14px;top:calc(50% - .5px);height:1px;background:linear-gradient(90deg,#7e9adb00,#7e9adb2e 18%,#7e9adb52,#7e9adb2e 82%,#7e9adb00);opacity:.64}.main-grid-divider.dragging:before,.main-grid-divider:hover:before{opacity:.92}.main-grid.mobile .main-grid-divider{display:none}.main-grid-resize-handle{position:absolute;left:0;right:0;bottom:var(--editor-panel-height, 300px);height:12px;-webkit-user-select:none;user-select:none;display:grid;place-items:center;pointer-events:none;z-index:45}.main-grid-resize-handle span{width:42px;height:4px;border-radius:999px;background:linear-gradient(180deg,#eef4ffd6,#c4d2ff94);border:1px solid rgba(255,255,255,.32);box-shadow:0 0 0 1px #455c9059,0 3px 8px #00000047;opacity:.82}.main-grid-divider:hover+.main-grid-resize-handle span,.main-grid-resize-handle.dragging span{opacity:1;box-shadow:0 0 0 1px #5d80ce7a,0 4px 12px #0e204280}.main-grid.mobile .main-grid-resize-handle{display:none}.main-grid.inspector-collapsed{grid-template-columns:210px 1fr}.mixer-shell{min-height:0;flex:1;border:1px solid var(--line);border-radius:14px;background:#161824eb;overflow:auto;padding:.8rem}.mixer-scroll{display:flex;gap:.62rem;min-height:100%;align-items:stretch}.mixer-strip{width:170px;flex:0 0 170px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#1f2234,#181b2a);padding:.55rem;display:flex;flex-direction:column;gap:.45rem}.mixer-strip.selected{border-color:#9f63ffa6;box-shadow:0 0 0 1px #9f63ff40 inset}.mixer-strip.return-strip{background:linear-gradient(180deg,#25223a,#1f1c30)}.mixer-strip.master-strip{background:linear-gradient(180deg,#222737,#1a202d)}.mixer-strip-title{font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mixer-meter{position:relative;height:160px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:linear-gradient(180deg,#151828,#0f1320);overflow:hidden}.mixer-meter-fill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#67f6a7,#ffd35b 62%,#ff637f);min-height:2px}.mixer-meter-value{font-size:.72rem;color:var(--muted)}.mixer-mini-row{display:grid;grid-template-columns:1fr 1fr;gap:.34rem}.mixer-strip label{display:flex;flex-direction:column;gap:.2rem;font-size:.72rem;color:var(--muted)}.mixer-strip input[type=range]{width:100%}.panel-toggle-btn{width:30px;height:30px;border-radius:8px;padding:0;display:inline-flex;align-items:center;justify-content:center}.track-panel{min-height:0;display:grid;grid-template-rows:calc(100% - var(--editor-panel-height, 300px) - 12px) var(--editor-panel-height, 300px);gap:12px;overflow:visible}.track-panel-top-shell,.track-panel-bottom-shell{border:1px solid var(--line);border-radius:14px;background:#161824eb}.track-panel-top-shell{min-height:0;display:flex;flex-direction:column;overflow:visible}.track-panel-bottom-shell{min-height:0;display:flex;overflow:hidden}.track-panel-ruler{height:64px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#232538f5,#171927f5);display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding:0 .65rem}.track-panel-title{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.track-panel-tracks-shell{margin:.45rem;border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;flex:1;min-height:0;display:flex}.track-panel-list{flex:1;min-height:0;display:grid;grid-auto-rows:64px;align-content:start;overflow-y:auto;overflow-x:visible}.track-panel-library{margin:.45rem .45rem 0;border:1px solid var(--line-soft);border-radius:10px;padding:.42rem;display:grid;gap:.35rem;min-height:120px;max-height:210px}.track-panel-bottom-shell .track-panel-library{margin:.45rem;flex:1;min-height:0;max-height:none;grid-template-rows:auto minmax(0,1fr)}.track-panel-library-title{font-size:.67rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.track-panel-library .audio-library-list.compact{max-height:150px;overflow:auto}.track-panel-bottom-shell .track-panel-library .audio-library-list.compact{max-height:none}.audio-library-empty{border:1px dashed rgba(255,255,255,.18);border-radius:10px;padding:.55rem;color:var(--muted);font-size:.74rem}.track-card{border:1px solid var(--line);border-radius:0;border-left-width:3px;background:linear-gradient(180deg,#24273a,#1e2131);margin:0;padding:.35rem .42rem;box-sizing:border-box;position:relative;overflow:visible}.track-card.selected{border-color:#0a84ffad;box-shadow:0 0 0 1px #0a84ff38 inset}.track-card.minimal{padding:.28rem .38rem .58rem}.track-row-top{display:flex;justify-content:space-between;align-items:center;gap:.3rem;margin-bottom:.22rem}.track-row-meta{display:inline-flex;align-items:center;gap:.35rem;position:relative}.track-name-label{font-size:.84rem;font-weight:600;color:#e8ebff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-type{font-size:.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}.track-color-chip{width:18px;height:18px;border:1px solid rgba(255,255,255,.45);border-radius:5px;padding:0;cursor:pointer;background-image:none}.track-color-chip.active{border-color:#ffffffeb;box-shadow:0 0 0 1px #fff3 inset}.track-color-popover{position:absolute;top:auto;bottom:calc(100% + 6px);right:0;width:148px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,#272b3e,#1d2233);padding:.38rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.34rem;z-index:160;box-shadow:0 12px 26px #0000006b}.track-color-popover.inspector{top:calc(100% + 8px);right:auto;left:0}.track-color-option{width:100%;aspect-ratio:1;border-radius:7px;border:1px solid rgba(255,255,255,.32);padding:0;background-image:none}.track-color-option.active{border-color:#ffffffeb;box-shadow:0 0 0 1px #ffffff42 inset}.track-btn-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem}.track-btn-row.mini{grid-template-columns:repeat(3,1fr)}.track-btn-row.mini button{padding:.24rem .2rem;font-size:.66rem;gap:.14rem}.track-btn-row.mini button .ui-icon{width:10px;height:10px;opacity:.78}.mini-toggle-label{font-size:.64rem;font-weight:700;letter-spacing:.03em}.track-live-meter{position:absolute;left:8px;right:8px;bottom:4px;height:3px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#080d1773;overflow:hidden}.track-live-meter-fill{height:100%;width:0;background:linear-gradient(90deg,#63e2be,#7bc3ff 55%,#ffa86e);transition:width 80ms linear}.track-mix-row{margin-top:.45rem;display:grid;grid-template-columns:1fr 1fr;gap:.35rem}.track-mix-row label{display:flex;flex-direction:column;gap:.2rem;color:var(--muted);font-size:.72rem}.track-mix-row.single{grid-template-columns:1fr}.track-mix-row input[type=range],.track-mix-row select{width:100%}.track-panel-hint{margin-top:.62rem;border:1px dashed rgba(255,255,255,.2);border-radius:10px;padding:.45rem .52rem;color:var(--muted);font-size:.73rem}.inspector-panel{border:1px solid var(--line);border-radius:14px;background:#161824eb;padding:.68rem;overflow:auto}.inspector-mode-row{display:flex;gap:.35rem;margin-bottom:.55rem}.inspector-mode-row button{flex:1}.inspector-panel.basic .advanced-only{display:none!important}.inspector-title{font-size:.78rem;color:var(--muted);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.08em}.inspector-section{border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#24273a,#1e2131);padding:.55rem;margin-bottom:.55rem;display:grid;gap:.45rem}.inspector-section h4{margin:0;font-size:.8rem;color:var(--muted);font-weight:700}.inspector-section label{display:flex;flex-direction:column;gap:.22rem;font-size:.72rem;color:var(--muted)}.inspector-section input,.inspector-section select{width:100%}.track-color-control-row{display:flex;align-items:center;gap:.36rem;flex-wrap:wrap;position:relative}.track-color-picker-toggle{border-radius:999px;padding:.2rem .55rem;font-size:.7rem}.track-color-control-row span{font-size:.68rem;letter-spacing:.04em;color:var(--text)}.inspector-two-col{display:grid;grid-template-columns:1fr 1fr;gap:.38rem}.inspector-hint{font-size:.77rem;color:var(--muted)}.audio-library-list{display:flex;flex-direction:column;gap:.38rem;max-height:220px;overflow:auto}.audio-library-item{text-align:left;border:1px solid rgba(126,178,255,.35);border-radius:9px;background:linear-gradient(180deg,#3a598e4d,#2336574d);padding:.35rem .5rem;display:flex;align-items:center;gap:.5rem;cursor:grab;min-height:44px}.audio-library-item .play-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:#7eb2ff40;border-radius:50%;flex-shrink:0}.audio-library-item .play-icon:after{content:"";display:block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid #e6eeff;margin-left:2px}.audio-library-item:active{cursor:grabbing}.audio-library-item.dragging{opacity:.65}.audio-library-item-name{font-size:.74rem;font-weight:700;color:#e6eeff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.audio-library-item-meta{font-size:.66rem;color:#b8caea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;max-width:80px}.arrange-column{min-height:0;display:grid;grid-template-rows:1fr 300px;gap:12px}.timeline-scroll{border:1px solid var(--line);border-radius:14px;background:#12141ef2;overflow:auto;position:relative}.timeline-canvas{min-height:100%;position:relative;cursor:pointer}.timeline-canvas.scrubbing{cursor:ew-resize}.first-load-hint{position:absolute;top:.7rem;left:50%;transform:translate(-50%);z-index:6;pointer-events:none}.first-load-hint span{display:inline-block;border-radius:999px;border:1px solid rgba(110,196,255,.72);background:linear-gradient(180deg,#4daaff61,#3978c05c);color:#e9f6fff7;font-size:.76rem;font-weight:700;padding:.35rem .8rem;box-shadow:0 0 0 1px #88d4ff6b inset,0 0 22px #54bbff7a;animation:first-load-bounce 1.15s ease-in-out infinite,first-load-glow 1.8s ease-in-out infinite}@keyframes first-load-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}@keyframes first-load-glow{0%,to{opacity:.83}50%{opacity:1}}.ruler{position:absolute;top:0;left:0;right:0;height:64px;background:linear-gradient(180deg,#232538f5,#171927f5);border-bottom:1px solid var(--line)}.ruler-bar{position:absolute;top:0;width:1px;height:100%;border-left:2px solid rgba(255,255,255,.14);color:var(--muted);font-size:.72rem;padding:.28rem}.timeline-row{position:absolute;left:0;right:0;border-bottom:1px solid var(--line-soft);background-image:repeating-linear-gradient(to right,rgba(255,255,255,.04) 0 1px,transparent 1px 34px),repeating-linear-gradient(to right,rgba(255,255,255,.08) 0 2px,transparent 2px 136px)}.timeline-row.selected{background-color:#9f63ff17}.timeline-row.audio-library-drop-target{box-shadow:inset 0 0 0 2px #76cbffcc,inset 2px 0 #76cbff;background-color:#437abe33!important}.timeline-row.ai-audio-selectable{cursor:crosshair}.recording-range-preview{position:absolute;top:7px;bottom:7px;border-radius:10px;border:1px solid rgba(255,120,132,.78);background:linear-gradient(90deg,#ff677f57,#ff677f24);box-shadow:0 0 14px #ff637f3d;pointer-events:none;z-index:2;overflow:hidden}.recording-range-preview.audio{border-color:#f4c570d1;background:linear-gradient(90deg,#f4c57052,#f4c57024)}.recording-range-preview span{position:absolute;top:4px;left:8px;font-size:.64rem;font-weight:700;color:#fff1e6eb;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.5)}.ai-audio-range{position:absolute;top:0;bottom:0;border-radius:10px;border:1px dashed rgba(111,193,255,.75);background:linear-gradient(180deg,#6fc1ff40,#3e84da33);box-shadow:0 0 16px #49a5ff47;display:flex;align-items:center;padding:0 .5rem;pointer-events:none;z-index:3}.ai-audio-range span{font-size:.67rem;color:#e7f2ff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.45)}.ai-audio-range.generating{border-color:#8ee4fffa;background:linear-gradient(180deg,#6fc1ff5c,#3e84da3d),linear-gradient(120deg,#b3ebff00 10%,#b3ebff7a 45%,#b3ebff00 75%);background-size:100% 100%,220% 100%;box-shadow:0 0 0 1px #a2e9ff94 inset,0 0 24px #62cfffc7;animation:ai-range-pulse 1.05s ease-in-out infinite,ai-range-shimmer 1.15s linear infinite}.ai-audio-range.generating span{font-weight:700;animation:ai-range-text-flicker .9s ease-in-out infinite}@keyframes ai-range-pulse{0%,to{opacity:.76;transform:scaleY(.99)}50%{opacity:1;transform:scaleY(1)}}@keyframes ai-range-shimmer{0%{background-position:0 0,220% 0}to{background-position:0 0,-20% 0}}@keyframes ai-range-text-flicker{0%,to{opacity:.78}50%{opacity:1}}.clip{position:absolute;top:0;height:100%;border-radius:0;border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;gap:.35rem;padding:0 .42rem;color:#0f1220;font-size:.77rem;font-weight:700;overflow:hidden;touch-action:none}.clip>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:2}.clip.audio{color:#1a1720}.clip-fade{position:absolute;top:0;bottom:0;pointer-events:none;z-index:1}.clip-fade.fade-in{left:0;background:linear-gradient(110deg,#00000057,#0000)}.clip-fade.fade-out{right:0;background:linear-gradient(250deg,#0000005c,#0000)}.clip-wave{position:absolute;inset:3px 12px 3px 6px;display:flex;align-items:center;gap:1px;opacity:.48;pointer-events:none}.clip-wave-bar{width:2px;background:#2b271b94;border-radius:2px}.clip.selected{box-shadow:0 0 0 2px #ffffff73 inset}.clip.active{box-shadow:0 0 0 2px #ffffff80 inset,0 0 8px #ffffff38}.clip-resize-handle{width:8px;height:86%;border-radius:3px;background:#00000052;cursor:ew-resize;z-index:2}.loop-region{position:absolute;top:0;background:#9f63ff1a;border-left:1px solid rgba(159,99,255,.55);border-right:1px solid rgba(159,99,255,.55);pointer-events:none}.punch-marker{position:absolute;top:0;width:2px;background:#ffc56af2;box-shadow:0 0 8px #ffc56a99;pointer-events:none}.punch-marker.out{background:#ff6d6df2;box-shadow:0 0 8px #ff6d6da6}.playhead{position:absolute;top:0;width:2px;background:#ff637f;box-shadow:0 0 10px #ff637fa3;pointer-events:none}.piano-roll-panel{border:1px solid var(--line);border-radius:14px;background:#12141ef2;display:flex;flex-direction:column;overflow:hidden}.piano-roll-header{display:flex;justify-content:space-between;gap:.9rem;align-items:flex-start;border-bottom:1px solid var(--line);padding:.54rem .7rem}.editor-mode-row{display:inline-flex;align-items:center;gap:.2rem;border:1px solid var(--line-soft);border-radius:999px;padding:.14rem;background:#ffffff08}.editor-mode-row button{min-width:84px;border-radius:999px}.automation-hint{color:var(--muted);font-size:.74rem}.piano-roll-meta{margin-top:.2rem;color:var(--muted);font-size:.82rem}.piano-roll-controls{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.piano-roll-controls.minimal .advanced-only{display:none!important}.piano-roll-controls label{display:flex;align-items:center;gap:.3rem;font-size:.76rem;color:var(--muted)}.piano-roll-controls input[type=number]{width:86px}.piano-roll-controls input[type=range]{width:95px}.piano-roll-wrap{min-height:0;flex:1;display:grid;grid-template-columns:70px 1fr}.piano-roll-keys{border-right:1px solid var(--line);overflow:hidden;position:relative;background:#23283a}.piano-roll-keys-inner{will-change:transform}.piano-key{height:20px;padding:0 .4rem;display:flex;align-items:center;font-size:.7rem;color:#d0dbf2;border-bottom:1px solid var(--line-soft);background:#23283a}.piano-key.black{background:#1d2232;color:#97a6c7}.piano-roll-scroll{overflow:auto}.piano-roll-grid{position:relative;--piano-bar-width: 192px;background-image:repeating-linear-gradient(to right,rgba(255,255,255,.16) 0 1px,transparent 1px 12px),repeating-linear-gradient(to right,rgba(121,169,255,.35) 0 1px,transparent 1px 48px),repeating-linear-gradient(to right,rgba(121,169,255,.68) 0 2px,transparent 2px var(--piano-bar-width)),repeating-linear-gradient(to bottom,rgba(255,255,255,.12) 0 1px,transparent 1px 20px),repeating-linear-gradient(to bottom,rgba(202,220,255,.28) 0 2px,transparent 2px 240px);background-color:#101526}.piano-note{position:absolute;border-radius:6px;background:linear-gradient(180deg,#b679ff,#8f52e7);border:1px solid rgba(78,39,153,.75);color:#f6efff;font-size:.63rem;font-weight:700;padding:0 .25rem;display:flex;align-items:center;justify-content:space-between;gap:.3rem;overflow:hidden;white-space:nowrap;cursor:pointer;touch-action:none}.piano-note.selected{box-shadow:0 0 0 2px #ffffff6b inset}.piano-note.active{box-shadow:0 0 0 2px #ffffff80 inset}.piano-note-resize{width:7px;height:80%;border-radius:4px;background:#00000057;cursor:ew-resize}.piano-playhead{position:absolute;top:0;bottom:0;width:2px;background:#ff637f;box-shadow:0 0 8px #ff637fb3;pointer-events:none}.velocity-lane{position:relative;height:86px;border-top:1px solid var(--line);background:#101626}.velocity-bar{position:absolute;bottom:0;border:1px solid rgba(165,198,255,.45);border-bottom:0;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#7ec7ff,#4f7bb4);cursor:pointer}.velocity-bar.selected{border-color:#fff;background:linear-gradient(180deg,#cce4ff,#6b94c4)}.automation-wrap{min-height:0;flex:1;overflow:auto;padding:.75rem}.automation-grid{position:relative;border:1px solid var(--line);border-radius:12px;background-image:repeating-linear-gradient(to right,rgba(255,255,255,.05) 0 1px,transparent 1px),repeating-linear-gradient(to right,rgba(255,255,255,.08) 0 2px,transparent 2px);background-color:#111625;min-height:180px}.automation-point{position:absolute;width:12px;height:12px;padding:0;border-radius:999px;background:#d2a4ff;border:2px solid #ffffff;transform:translate(-50%,-50%);box-shadow:0 0 10px #c68affe6}.automation-playhead{position:absolute;top:0;bottom:0;width:2px;background:#ff748f;box-shadow:0 0 10px #ff748fc7;pointer-events:none}.audio-editor-wrap{padding:1rem}.audio-editor-card{border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#25273a,#1f2232);padding:.8rem;display:grid;gap:.6rem;color:var(--text);font-size:.86rem}.audio-editor-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.28rem .65rem}.audio-ai-prompt{grid-column:1 / -1;color:var(--muted);font-size:.78rem;line-height:1.3;word-break:break-word}.audio-wave-editor{display:grid;gap:.5rem}.audio-wave-viewport{overflow:auto;border:1px solid var(--line-soft);border-radius:10px;background:#0a0e1680;padding:.35rem;cursor:crosshair}.audio-wave-viewport.fit{overflow-x:hidden}.audio-wave-track{position:relative;height:164px;min-width:100%;display:flex;align-items:center;gap:2px}.audio-wave-track.fit{gap:1px}.audio-wave-bar{flex:0 0 auto;width:3px;min-height:6px;border-radius:4px;background-color:#b5d0ffc7;align-self:center}.audio-wave-track.fit .audio-wave-bar{flex:1 1 0;width:auto;min-width:1px;border-radius:2px}.audio-wave-overlay{position:absolute;top:0;bottom:0;pointer-events:none}.audio-wave-overlay.fade-in{left:0;background:linear-gradient(90deg,#6aaeff47,#6aaeff0f)}.audio-wave-overlay.fade-out{right:0;background:linear-gradient(270deg,#6aaeff47,#6aaeff0f)}.audio-wave-playhead{position:absolute;top:0;bottom:0;width:2px;background:#ff7a96;box-shadow:0 0 10px #ff7a96c2;pointer-events:none}.audio-wave-edit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.45rem}.audio-wave-edit-grid label{display:grid;gap:.2rem;font-size:.76rem;color:var(--muted)}.audio-wave-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:.8rem}.audio-editor-hint{color:var(--muted);font-size:.79rem}.piano-roll-empty{color:var(--muted);font-size:.88rem;padding:1rem}.ai-chat-panel{position:fixed;right:1rem;bottom:5.1rem;width:min(360px,calc(100vw - 2rem));height:min(58vh,520px);border:1px solid rgba(255,255,255,.2);border-radius:16px;background:radial-gradient(circle at 90% 0%,rgba(146,181,255,.12),transparent 45%),linear-gradient(180deg,#262c3ef0,#161b28f5);box-shadow:0 18px 40px #00000073;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:140;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}.ai-chat-header{display:flex;align-items:center;justify-content:space-between;padding:.56rem .62rem;border-bottom:1px solid var(--line-soft)}.ai-chat-subtitle{font-size:.67rem;color:#c9d8ffcc;margin-top:.14rem}.ai-chat-header strong{font-size:.92rem}.ai-chat-actions{display:inline-flex;gap:.28rem}.ai-chat-actions button{font-size:.64rem;padding:.2rem .44rem}.ai-chat-note{margin:.45rem .6rem .1rem;font-size:.7rem;color:#dfebffde;border:1px solid rgba(146,199,255,.3);border-radius:10px;padding:.35rem .46rem;background:#619aeb24}.ai-chat-log{overflow:auto;padding:.65rem;display:grid;gap:.52rem;align-content:start}.ai-msg{border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#ffffff0a;padding:.46rem .58rem}.ai-msg.user{margin-left:1.4rem;border-color:#79a9ff8c;background:linear-gradient(180deg,#4280f040,#365ca733)}.ai-msg.assistant{margin-right:1.1rem;border-color:#7edaae73;background:linear-gradient(180deg,#51ad8033,#38765829)}.ai-msg.pending{opacity:.9}.ai-msg.pending .ai-msg-text{font-style:italic}.ai-msg.system{border-style:dashed;border-color:#ffe2a873;background:#ffd68514}.ai-msg-role{font-size:.62rem;letter-spacing:.03em;color:#e0e8ffd1;margin-bottom:.22rem;font-weight:700}.ai-msg-text{font-size:.79rem;line-height:1.33;white-space:pre-wrap;word-break:break-word}.ai-chat-suggestions{display:flex;gap:.3rem;overflow:auto;padding:.46rem .55rem .36rem;border-top:1px solid var(--line-soft)}.ai-chat-suggestions button{border-radius:999px;white-space:nowrap;padding:.2rem .58rem;font-size:.69rem;color:#e3eeff;background:linear-gradient(180deg,#7caaff3d,#5781da36);border-color:#7caaff61}.ai-chat-suggestions button:hover{border-color:#a4d0ffb8}.ai-chat-form{display:grid;grid-template-columns:1fr auto;gap:.36rem;padding:.56rem;border-top:1px solid var(--line-soft)}.ai-chat-form input{width:100%;border-radius:999px;padding:.36rem .7rem}.ai-chat-form button{border-radius:999px;padding-inline:.78rem}.ai-chat-fab{position:fixed;right:1rem;bottom:1rem;z-index:141;border-radius:999px;padding:.46rem .72rem;display:inline-flex;align-items:center;gap:.35rem;border:1px solid rgba(146,181,255,.5);background:linear-gradient(180deg,#618bf061,#4865b76b);box-shadow:0 12px 24px #00000059}.ai-chat-fab.open{border-color:#8fefc59e;background:linear-gradient(180deg,#43b68c59,#31796061)}.ai-chat-fab .ui-icon{width:13px;height:13px}.ai-generate-backdrop{position:fixed;inset:0;background:#05080e85;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:150;display:flex;align-items:center;justify-content:center;padding:1rem}.ai-generate-dialog{width:min(540px,calc(100vw - 2rem));border-radius:16px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(180deg,#24293af5,#161b27f5);box-shadow:0 24px 48px #00000073;padding:.9rem;display:grid;gap:.55rem}.ai-generate-dialog h3{margin:0;font-size:.96rem}.ai-generate-dialog p{margin:0;font-size:.76rem;color:var(--muted)}.ai-generate-dialog input[type=text]{width:100%;height:40px;border-radius:12px;border:1px solid var(--line);background:#ffffff0f;color:var(--text);padding:0 .58rem;font:inherit}.ai-generate-error{font-size:.73rem;color:#ffd1d1;border:1px solid rgba(255,117,141,.5);border-radius:10px;background:#ff66821f;padding:.35rem .45rem}.ai-generate-provider-note{font-size:.74rem;color:var(--muted)}.ai-generate-actions{display:flex;justify-content:flex-end;gap:.4rem}@media(max-width:1520px){.main-grid{grid-template-columns:200px 1fr 270px}.main-grid.inspector-collapsed{grid-template-columns:200px 1fr}}@media(max-width:1200px){.top-bar{grid-template-columns:1fr;gap:.45rem;padding:.55rem}.toolbar-group{border-radius:12px;padding:.2rem}.transport-controls.primary{display:grid;grid-template-columns:repeat(3,minmax(0,max-content));gap:.26rem;justify-content:flex-start}.transport-controls.primary .toolbar-divider{display:none}.transport-controls.primary>.view-mode-toggle,.transport-controls.primary>.tempo-label{grid-column:span 2}.transport-counter{min-width:58px;padding:.14rem .4rem}.transport-counter-label{display:none}.transport-controls.primary button,.io-controls.compact button{padding:.26rem .5rem}.transport-controls.primary .view-mode-toggle button,.transport-controls.primary .transport-hero,.transport-controls.primary .transport-sub,.transport-controls.primary .transport-record,.transport-controls.primary .midi-toggle,.transport-controls.primary .metronome-toggle{min-width:38px;min-height:36px;padding:.3rem;font-size:0;gap:0;justify-content:center}.transport-controls.primary .view-mode-toggle button .ui-icon,.transport-controls.primary .transport-hero .ui-icon,.transport-controls.primary .transport-sub .ui-icon,.transport-controls.primary .transport-record .ui-icon,.transport-controls.primary .midi-toggle .ui-icon,.transport-controls.primary .metronome-toggle .ui-icon{width:15px;height:15px;opacity:.92}.io-controls.compact{justify-content:flex-start}}@media(max-width:980px){.transport-controls.primary{grid-template-columns:repeat(2,minmax(0,max-content))}.transport-controls.primary>.view-mode-toggle,.transport-controls.primary>.tempo-label{grid-column:span 2}.project-name{font-size:.84rem}}@media(max-width:1360px){.top-bar,.main-grid{grid-template-columns:1fr}.arrange-column{grid-template-rows:400px 240px}.mixer-strip{width:150px;flex-basis:150px}.ai-chat-panel{right:.6rem;bottom:4.7rem;width:calc(100vw - 1.2rem);height:min(56vh,500px)}.ai-chat-fab{right:.6rem;bottom:.6rem;padding-inline:.62rem}.ai-chat-fab span{display:none}}.mobile-layout{padding-bottom:68px}.mobile-layout .top-bar{position:sticky;top:0;z-index:120}.mobile-bottom-nav{position:fixed;left:.5rem;right:.5rem;bottom:.5rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem;padding:.34rem;border:1px solid var(--line);border-radius:14px;background:#141823f2;z-index:170}.mobile-bottom-nav button{min-height:40px;border-radius:10px;font-size:.68rem;padding:.24rem .25rem;display:grid;justify-items:center;gap:.08rem}.mobile-bottom-nav button .ui-icon{width:14px;height:14px}.mobile-generate-button,.mobile-track-drawer-button{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;min-height:36px}.mobile-generate-button.active{border-color:#8fefc5a6;background:linear-gradient(180deg,#43b68c47,#31796052)}.track-panel.mobile-drawer{position:fixed;left:.5rem;right:.5rem;bottom:74px;top:auto;height:min(70vh,520px);z-index:175;transform:translateY(calc(100% + 16px));transition:transform .18s ease;box-shadow:0 18px 32px #00000073;display:flex;flex-direction:column;gap:0;grid-template-rows:none;border:1px solid var(--line);border-radius:14px;background:#161824fa;overflow:hidden}.track-panel.mobile-drawer.open{transform:translateY(0)}.track-panel-mobile-tabs{display:inline-flex;align-items:center;gap:.22rem}.track-panel-mobile-tabs button{padding:.2rem .42rem;font-size:.68rem;border-radius:8px}.track-panel-mobile-tabs .icon-btn{width:28px;height:28px;padding:0}.track-panel.mobile-drawer .track-panel-top-shell{border:none;border-radius:0;background:transparent;height:100%}.track-panel.mobile-drawer .track-panel-list{overflow-y:auto}.mobile-studio-panel{position:fixed;left:.5rem;right:.5rem;bottom:74px;height:min(58vh,460px);z-index:165;border:1px solid var(--line);border-radius:14px;background:#121723f5;padding:.8rem;display:grid;gap:.5rem;align-content:start;overflow:auto}.mobile-studio-panel h4{margin:0;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.mobile-studio-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem}.mobile-studio-actions button{min-height:42px;justify-content:center}@media(max-width:768px){.top-bar{padding:.5rem;gap:.38rem}.project-name-wrap{padding:.3rem}.transport-controls.primary{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:.24rem;padding-bottom:.1rem}.transport-controls.primary button{min-width:40px;min-height:38px;padding:.28rem;font-size:0;gap:0;justify-content:center}.transport-controls.primary button .ui-icon{width:16px;height:16px}.transport-counter{min-width:62px;padding:.15rem .36rem}.io-controls.compact{justify-content:flex-start}.main-grid.mobile{grid-template-columns:1fr;gap:.45rem}.arrange-column{grid-template-rows:minmax(220px,1fr) 0;gap:0}.arrange-column.mobile-focus-arrange{grid-template-rows:minmax(240px,1fr) 0}.arrange-column.mobile-focus-editor{grid-template-rows:1fr}.arrange-column.mobile-focus-editor .timeline-scroll{display:none}.piano-roll-panel{min-height:280px}.ai-chat-panel{left:.5rem;right:.5rem;width:auto;top:auto;bottom:74px;height:min(62vh,520px);border-radius:14px;z-index:166}}.user-menu{margin-left:auto;display:flex;align-items:center}.user-menu .clerk-sign-up-button,.user-menu .clerk-user-button{border-radius:8px}