:root{--bg: #0b0f17;--surface: #121826;--surface-2: #1a2233;--surface-3: #232d42;--line: #2a3448;--text: #e8edf7;--muted: #93a0b8;--accent: #e11d48;--accent-soft: #e11d4826;--ok: #22c55e;--warn: #f59e0b;--radius: 14px;--tap: 44px;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:15px/1.45 -apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,sans-serif;overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}button,input,select,textarea{font:inherit;color:inherit}button{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;min-height:var(--tap);cursor:pointer}button:active{background:var(--surface-3)}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}button.ghost{background:transparent;border-color:transparent}button.small{min-height:34px;padding:6px 10px;font-size:13px}input,select,textarea{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;width:100%;min-height:var(--tap);font-size:16px}input[type=range],input[type=checkbox],input[type=color]{accent-color:var(--accent);background:transparent;border:none}textarea{min-height:90px;resize:vertical}label.field{display:block;margin-bottom:12px}label.field>span{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}.app{display:flex;flex-direction:column;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.topbar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line);background:var(--surface);flex:0 0 auto}.topbar h1{font-size:15px;font-weight:600;margin:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar .icon-btn{min-height:38px;min-width:38px;padding:0 10px}.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}.dot.live{background:var(--ok)}.dot.connecting{background:var(--warn)}.dot.offline{background:var(--accent)}.peers{display:flex;gap:-6px}.peer-chip{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#06090f;margin-left:-6px;border:2px solid var(--surface)}.stage{flex:1 1 auto;min-height:0;display:grid;place-items:center;background:#05070c;position:relative;overflow:hidden}.canvas{position:relative;background:#000;overflow:hidden;box-shadow:0 10px 40px #0009}.canvas video,.canvas img.layer-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}.canvas .overlay-layer{position:absolute;inset:0;pointer-events:none}.canvas .text-layer{position:absolute;white-space:pre-wrap;line-height:1.2;transform:translate(-50%,-50%)}.canvas .subtitle-layer{position:absolute;left:6%;right:6%;text-align:center;transform:translateY(-50%);white-space:pre-wrap}.empty-stage{color:var(--muted);text-align:center;padding:24px}.transport{display:flex;align-items:center;gap:4px;padding:6px;background:var(--surface);border-top:1px solid var(--line);flex:0 0 auto;overflow-x:auto;scrollbar-width:none}.transport::-webkit-scrollbar{display:none}.timecode{font-variant-numeric:tabular-nums;font-size:12px;color:var(--muted);min-width:84px;text-align:center;flex:0 0 auto}.play-btn{min-width:52px}.transport button{flex:0 0 auto;padding:6px 8px;min-height:40px}.transport button.small{padding:6px 8px}.timeline{flex:0 0 auto;background:var(--surface);border-top:1px solid var(--line);position:relative;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;-webkit-overflow-scrolling:touch}.timeline-inner{position:relative}.ruler{height:22px;position:sticky;top:0;border-bottom:1px solid var(--line);background:var(--surface)}.ruler .tick{position:absolute;top:0;bottom:0;border-left:1px solid var(--line);padding-left:4px;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}.track-row{position:relative;border-bottom:1px solid var(--line)}.track-label{position:sticky;left:0;z-index:3;width:46px;height:100%;background:linear-gradient(90deg,var(--surface) 70%,transparent);font-size:10px;color:var(--muted);padding:3px 4px;display:flex;align-items:flex-start;pointer-events:none}.clip{position:absolute;top:3px;bottom:3px;border-radius:8px;background:var(--surface-3);border:1px solid var(--line);overflow:hidden;touch-action:none;display:flex;align-items:flex-end}.clip.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.clip .clip-name{font-size:10px;padding:2px 5px;background:#000000a6;border-radius:0 6px 0 0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clip .filmstrip{position:absolute;inset:0;background-repeat:no-repeat;opacity:.85}.clip .waveform{position:absolute;inset:0;width:100%;height:100%}.clip.text-clip{background:linear-gradient(135deg,#3b2a52,#2a2140)}.clip.brand-clip{background:linear-gradient(135deg,#5c1d33,#3a1524)}.clip.color-clip{background:var(--surface-3)}.trim-handle{position:absolute;top:0;bottom:0;width:22px;z-index:2;touch-action:none;display:grid;place-items:center}.trim-handle:after{content:"";width:3px;height:40%;border-radius:2px;background:#ffffff8c}.trim-handle.left{left:0}.trim-handle.right{right:0}.clip.selected .trim-handle:after{background:var(--accent);width:4px}.transition-badge{position:absolute;left:2px;top:4px;z-index:4;background:var(--accent);color:#fff;font-size:9px;border-radius:8px;padding:1px 5px;pointer-events:none}.playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);z-index:5;pointer-events:none}.playhead:before{content:"";position:absolute;top:0;left:-5px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--accent)}.peer-playhead{position:absolute;top:0;bottom:0;width:2px;opacity:.75;z-index:4;pointer-events:none}.tabbar{display:flex;border-top:1px solid var(--line);background:var(--surface);flex:0 0 auto}.tabbar button{flex:1;border:none;border-radius:0;background:transparent;font-size:11px;padding:8px 2px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;min-height:54px}.tabbar button.active{color:var(--text);background:var(--surface-2)}.tabbar .glyph{font-size:17px;line-height:1}.sheet-backdrop{position:fixed;inset:0;background:#000a;z-index:20}.sheet{position:fixed;left:0;right:0;bottom:0;z-index:21;background:var(--surface);border-radius:18px 18px 0 0;border-top:1px solid var(--line);max-height:82dvh;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom);animation:sheet-in .18s ease-out}@keyframes sheet-in{0%{transform:translateY(12%);opacity:.6}to{transform:none;opacity:1}}@media(prefers-reduced-motion:reduce){.sheet{animation:none}}.sheet-header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}.sheet-header h2{font-size:16px;margin:0;flex:1}.sheet-body{padding:14px;overflow-y:auto;-webkit-overflow-scrolling:touch}.grab{width:38px;height:4px;border-radius:2px;background:var(--line);margin:8px auto 0}.list{display:flex;flex-direction:column;gap:8px}.row{display:flex;align-items:center;gap:10px;padding:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px}.row .grow{flex:1;min-width:0}.row .title{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row .sub{font-size:12px;color:var(--muted)}.thumb{width:64px;height:40px;border-radius:7px;object-fit:cover;background:var(--surface-3);flex:0 0 auto}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:8px 12px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:13px;min-height:38px}.chip.active{background:var(--accent);border-color:var(--accent);color:#fff}.badge{font-size:11px;padding:2px 7px;border-radius:999px;background:var(--surface-3);color:var(--muted)}.badge.ok{background:#22c55e26;color:#86efac}.badge.err{background:#e11d4826;color:#fda4af}.badge.busy{background:#f59e0b26;color:#fcd34d}.progressbar{height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden}.progressbar>div{height:100%;background:var(--accent);transition:width .2s linear}.slider-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}.slider-row label{flex:0 0 96px;font-size:13px;color:var(--muted)}.slider-row input[type=range]{flex:1;min-height:34px;padding:0}.slider-row .value{flex:0 0 44px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums}.toasts{position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:40;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{background:var(--surface-3);border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-size:14px;pointer-events:auto;box-shadow:0 8px 24px #0008}.toast.error{border-color:var(--accent)}.toast.success{border-color:var(--ok)}.page{max-width:640px;margin:0 auto;padding:24px 16px calc(32px + env(safe-area-inset-bottom));width:100%;overflow-y:auto;height:100dvh}.page h1{font-size:22px;margin:0 0 4px}.page .lede{color:var(--muted);margin:0 0 22px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px}.error-text{color:#fda4af;font-size:14px;margin:10px 0 0}.hint{color:var(--muted);font-size:12px;margin-top:6px}.spread{display:flex;gap:10px;align-items:center;justify-content:space-between}.stack{display:flex;flex-direction:column;gap:10px}@media(min-width:900px){.timeline{height:240px}.sheet{left:auto;right:16px;bottom:16px;width:420px;border-radius:18px;max-height:70dvh}}