:root{--zone-gameplay-border: #4A9DDF;--zone-gameplay-glow: rgba(74, 157, 223, .5);--zone-camera-border: #8FC69A;--zone-camera-glow: rgba(143, 198, 154, .5);--zone-ui-border: #C084FC;--zone-ui-glow: rgba(192, 132, 252, .5);--seg-bg: #1a3a2a;--seg-header: #8FC69A;--seg-header-text: #0a1f14;--seg-outline: #8FC69A50;--seg-outline-selected: #8FC69A;--seg-glow: rgba(143, 198, 154, .3);--playhead-color: #4A9DDF;--playhead-glow: rgba(74, 157, 223, .8);--z-zone: 10;--z-zone-drag: 20;--z-handle: 20;--z-ruler: 25;--z-playhead: 30;--z-context-menu: 50;--z-overlay-ui: 8;--z-badge: 10;--timeline-px-per-sec: 14;--timeline-cut-gap: 28px;--timeline-track-h: 78px;--timeline-header-h: 16px;--timeline-thumb-h: 40px;--timeline-wave-h: 22px;--timeline-label-w: 72px;--timeline-ruler-h: 18px;--editor-gap-xs: 2px;--editor-gap-sm: 4px;--editor-gap-md: 8px;--editor-gap-lg: 12px;--radius-sm: 3px;--radius-md: 4px;--radius-lg: 6px;--radius-pill: 50px}.editor-grid{display:grid;height:100%;background:var(--surface-950);overflow:hidden;margin:-32px -40px;width:calc(100% + 80px);height:100vh}.editor-resizer{padding:0;border:none;cursor:col-resize;background:var(--border-default);transition:background .15s;outline:none}.editor-resizer:hover,.editor-resizer:focus{background:var(--playhead-color)}.editor-tl-handle{cursor:ns-resize;background:var(--border-default);display:flex;align-items:center;justify-content:center;transition:background .15s}.editor-tl-handle:hover{background:var(--playhead-color)}.editor-tl-handle-bar{width:40px;height:2px;border-radius:1px;background:#ffffff4d}.editor-loading{display:flex;align-items:center;justify-content:center;background:var(--surface-950)}.editor-canvas{grid-area:canvas;background:var(--surface-950);display:flex;flex-direction:column;gap:var(--editor-gap-md);padding:10px 12px 8px;overflow:hidden}.editor-canvas__hint{flex-shrink:0;margin:0;font-size:11px;color:var(--text-muted);font-weight:500}.editor-canvas__viewport{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.editor-canvas__frame{position:relative;aspect-ratio:16/9;height:100%;width:auto;max-width:100%;background:#000;border-radius:var(--radius-sm);overflow:hidden;border:2px solid var(--border-default)}.editor-canvas__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.editor-canvas__overlay{position:absolute;inset:0;background:#0000008c;pointer-events:none}.editor-canvas__legend{flex-shrink:0;display:flex;align-items:center;gap:12px}.editor-canvas__legend-item{display:flex;align-items:center;gap:4px}.editor-canvas__legend-dot{width:8px;height:8px;border-radius:50%}.editor-canvas__legend-label{font-size:10px;color:var(--text-muted)}.editor-canvas__drag-hint{font-size:10px;color:var(--text-muted);margin-left:auto;font-style:italic}.source-zone{position:absolute;cursor:move}.source-zone--dragging{z-index:var(--z-zone-drag)}.source-zone__fill{position:absolute;inset:0;border-radius:var(--radius-lg);opacity:.25}.source-zone__border{position:absolute;inset:0;pointer-events:none;border-radius:var(--radius-lg);border:2px solid}.source-zone__icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.source-zone__label{position:absolute;top:-20px;left:0;color:#fff;padding:1px 6px;border-radius:var(--radius-pill);font-size:10px;font-weight:700;display:flex;align-items:center;gap:3px;white-space:nowrap;pointer-events:none}.source-zone__handle{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid;background:#fff;z-index:var(--z-handle)}.source-zone__handle--tl{top:-5px;left:-5px;cursor:nwse-resize}.source-zone__handle--tr{top:-5px;right:-5px;cursor:nesw-resize}.source-zone__handle--bl{bottom:-5px;left:-5px;cursor:nesw-resize}.source-zone__handle--br{bottom:-5px;right:-5px;cursor:nwse-resize}.editor-timeline{grid-area:timeline;background:var(--surface-900);border-top:1px solid var(--border-default);display:flex;flex-direction:column;overflow:hidden}.transport-bar{height:36px;flex-shrink:0;display:flex;align-items:center;gap:var(--editor-gap-xs);padding:0 8px;border-bottom:1px solid var(--border-default)}.transport-bar__divider{width:1px;height:14px;background:var(--border-default);margin:0 4px}.transport-bar__time{font-size:10px;font-family:monospace;color:var(--text-secondary);margin-left:6px}.transport-btn{background:transparent;border:none;cursor:pointer;color:var(--text-secondary);padding:3px;display:flex;align-items:center;justify-content:center}.transport-btn--play{background:var(--primary-600);border-radius:50%;width:24px;height:24px}.transport-btn--action{border-radius:var(--radius-md)}.transport-btn:disabled{opacity:.3;cursor:default}.timeline-tracks{flex:1;display:flex;overflow:hidden}.timeline-label{width:var(--timeline-label-w);flex-shrink:0;border-right:1px solid var(--border-default);display:flex;flex-direction:column}.timeline-label__spacer{height:var(--timeline-ruler-h);border-bottom:1px solid var(--border-default)}.timeline-label__text{flex:1;font-size:9px;font-weight:600;color:var(--text-secondary);padding-left:10px;display:flex;align-items:center}.timeline-scroll{flex:1;overflow-x:auto;overflow-y:hidden;position:relative}.timeline-ruler{height:var(--timeline-ruler-h);position:sticky;top:0;z-index:var(--z-ruler);border-bottom:1px solid var(--border-default);background:var(--surface-900)}.timeline-ruler__tick{position:absolute;bottom:0;height:100%;display:flex;flex-direction:column;align-items:center}.timeline-ruler__label{font-size:8px;color:var(--text-muted);font-family:monospace;transform:translate(-50%);white-space:nowrap}.timeline-ruler__line{width:1px;flex:1;background:var(--border-default)}.timeline-ruler__line--major{opacity:.5}.timeline-ruler__line--minor{opacity:.15}.timeline-segments{display:flex;align-items:stretch;height:var(--timeline-track-h);padding:4px 0}.segment-block{height:var(--timeline-track-h);flex-shrink:0;border-radius:var(--radius-md);overflow:visible;cursor:pointer;position:relative;outline:1px solid var(--seg-outline);outline-offset:-1px;background:var(--seg-bg);display:flex;flex-direction:column}.segment-block--selected{outline:2px solid var(--seg-outline-selected);box-shadow:0 0 10px var(--seg-glow)}.segment-block__header{height:var(--timeline-header-h);flex-shrink:0;display:flex;align-items:center;gap:4px;padding:0 6px;background:var(--seg-header);border-radius:var(--radius-md) var(--radius-md) 0 0;overflow:hidden;white-space:nowrap}.segment-block__header-title{font-size:8px;font-weight:700;color:var(--seg-header-text)}.segment-block__header-duration{font-size:8px;color:var(--seg-header-text);opacity:.7}.segment-block__thumbs{height:var(--timeline-thumb-h);display:flex;overflow:hidden}.segment-block__thumb-img{height:100%;flex:1;object-fit:cover;min-width:0}.segment-block__thumb-empty{flex:1;background:#8fc69a14;min-width:0}.segment-block__thumb-fallback{flex:1;background:#8fc69a0f;display:flex;align-items:center;justify-content:center}.segment-block__thumb-fallback-text{font-size:7px;color:#8fc69a5e;font-family:monospace}.segment-block__wave{height:var(--timeline-wave-h);flex-shrink:0;background:var(--seg-bg)}.segment-crop-handle{position:absolute;top:0;bottom:0;width:6px;cursor:ew-resize;z-index:5}.segment-crop-handle--start{left:-2px}.segment-crop-handle--end{right:-2px}.segment-crop-handle__bar{position:absolute;top:50%;width:3px;height:20px;border-radius:2px;background:#ffffff4d;transform:translateY(-50%)}.segment-crop-handle--start .segment-crop-handle__bar{left:0}.segment-crop-handle--end .segment-crop-handle__bar{right:0}.segment-block--selected .segment-crop-handle__bar{background:var(--playhead-color)}.cut-indicator{width:var(--timeline-cut-gap);flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;z-index:5}.cut-indicator--open{z-index:var(--z-context-menu)}.cut-indicator__line{position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%);width:1px;background-image:repeating-linear-gradient(to bottom,rgba(255,255,255,.15) 0,rgba(255,255,255,.15) 3px,transparent 3px,transparent 6px)}.cut-indicator__btn{position:relative;z-index:10;width:24px;height:24px;border-radius:var(--radius-lg);background:var(--surface-700);border:1px solid var(--border-hover);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;color:var(--text-muted);transition:all .15s}.cut-indicator__btn:hover{border-color:var(--playhead-color);color:var(--text-primary)}.playhead{position:absolute;top:0;bottom:0;width:0;z-index:var(--z-playhead);pointer-events:none}.playhead__label{position:absolute;top:-16px;left:50%;transform:translate(-50%);background:var(--playhead-color);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:var(--radius-sm);white-space:nowrap;font-family:monospace}.playhead__arrow{position:absolute;top:0;left:-5px}.playhead__line{position:absolute;top:10px;bottom:0;left:0;width:2px;background:var(--playhead-color);box-shadow:0 0 6px var(--playhead-glow)}.timeline-menu{position:absolute;top:20px;z-index:var(--z-context-menu);background:var(--surface-700);border:1px solid var(--border-hover);border-radius:var(--radius-lg);padding:4px;box-shadow:0 8px 24px #0009;white-space:nowrap}.timeline-menu__btn{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--radius-md);background:transparent;border:none;color:var(--text-primary);font-size:11px;font-weight:600;cursor:pointer;width:100%}.timeline-menu__btn:hover{background:var(--surface-800)}.waveform-svg{display:block;opacity:.5}.editor-toolbar{grid-area:toolbar;height:100%;display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:12px;overflow:hidden;background:var(--surface-800);border-right:1px solid var(--border-default)}.editor-toolbar__divider{width:32px;height:1px;background:var(--border-default);flex-shrink:0}.editor-toolbar__btn{width:40px;height:40px;flex-shrink:0;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-muted);cursor:pointer}.editor-toolbar__btn--active{background:var(--playhead-color);color:#fff}.layout-picker{display:flex;gap:6px;flex-shrink:0;justify-content:center}.layout-picker__btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 8px;border-radius:var(--radius-md);cursor:pointer;transition:border-color .15s,background .15s}.layout-picker__btn--active{background:var(--surface-800);border:1.5px solid var(--playhead-color)}.layout-picker__btn--inactive{background:transparent;border:1.5px solid var(--border-default)}.layout-picker__btn--inactive:hover{border-color:var(--border-hover);background:var(--surface-900)}.layout-picker__thumb{width:28px;aspect-ratio:9/16;background:var(--surface-950);border-radius:2px;overflow:hidden;display:flex;flex-direction:column}.layout-picker__label{font-size:9px;font-weight:600;white-space:nowrap}.layout-picker__label--active{color:var(--text-primary)}.layout-picker__label--inactive{color:var(--text-muted)}:root{--primary-400: #60a5fa;--primary-500: #3b82f6;--primary-600: #2563eb;--primary-700: #1d4ed8;--surface-700: #2b303b;--surface-800: #222530;--surface-900: #181b25;--surface-950: #0e121b;--text-primary: #ffffff;--text-secondary: #9ca3af;--text-muted: #6b7280;--success-500: #22c55e;--success-600: #16a34a;--success-bg: #166534;--warning-500: #f59e0b;--warning-bg: #422006;--error-500: #ef4444;--error-600: #dc2626;--error-bg: #7f1d1d;--border-default: #2b303b;--border-hover: #3b4252;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:var(--text-primary);background-color:var(--surface-950);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}a{font-weight:500;color:var(--primary-500);text-decoration:inherit}a:hover{color:var(--primary-400)}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--surface-950)}#root{width:100%;min-height:100vh}h1{font-size:2em;line-height:1.2;margin:0}h2{font-size:1.25em;margin:0}button{font-family:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--surface-900)}::-webkit-scrollbar-thumb{background:var(--surface-700);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}@keyframes spin{to{transform:rotate(360deg)}}.login-twitch-btn:hover{background:var(--primary-600)!important;transform:scale(1.02)!important;box-shadow:0 15px 50px #3b82f666!important}.sidebar-btn:hover{background:var(--surface-700)!important;color:var(--text-primary)!important}.add-clipper-btn:hover{border-color:var(--primary-500)!important;color:var(--primary-500)!important}.glass-hover:hover:not(:disabled){background:#ffffff2e!important;border-color:#ffffff59!important;transform:scale(1.03)}.glass-hover-circle:hover:not(:disabled){background:#ffffff2e!important;border-color:#ffffff59!important;transform:scale(1.08);box-shadow:inset 0 1px 1px #ffffff4d,inset 0 -1px 1px #0000001a,0 6px 24px #0003!important}.hover-danger:hover{border-color:#ef4444e6!important;color:#ef4444!important}.hover-subtle:hover{border-color:var(--primary-500)!important;color:var(--text-primary)!important}.hover-card:hover{background:var(--surface-800)!important;border-color:var(--border-hover)!important}.hover-item:hover{background:var(--surface-700)!important}.hover-text-primary:hover{color:var(--primary-500)!important}.hover-bg:hover:not(:disabled){background:var(--hover-bg)!important}.hover-color:hover{color:var(--hover-color)!important}.hover-border:hover{border-color:var(--hover-border)!important}.hover-lift:hover{transform:translateY(-2px)}.hover-scale:hover{transform:scale(1.03)}.hover-opacity:hover{opacity:1!important}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.clip-skeleton{background:var(--surface-700);position:relative;overflow:hidden}.clip-skeleton:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.07) 50%,transparent 100%);background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite}@keyframes clipFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.editor-preview{grid-area:preview;height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--surface-950)}.editor-preview__viewport{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden}.editor-preview__frame{position:relative;aspect-ratio:9/16;height:100%;max-width:100%;width:auto;background:#000;border-radius:var(--radius-sm);overflow:hidden;border:2px solid var(--border-default);box-shadow:0 25px 50px -12px #000c}.editor-preview__bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(40px) brightness(.6)}.output-zone{position:absolute;overflow:hidden;cursor:pointer;background:#000}.output-zone--selected{outline-offset:-2px}.output-zone__top-border{position:absolute;left:0;right:0;top:0;height:2px;z-index:2}.output-zone__label{position:absolute;top:6px;left:6px;z-index:2;padding:1px 6px;border-radius:var(--radius-pill);font-size:9px;font-weight:700;color:#fff}.preview-resize-handle{position:absolute;left:0;right:0;height:12px;z-index:var(--z-handle);display:flex;align-items:center;justify-content:center;cursor:ns-resize;background:transparent;border:none;padding:0}.preview-resize-handle__bar{width:48px;height:4px;border-radius:var(--radius-pill);background:#ffffff4d;transition:background .15s,box-shadow .15s}.preview-resize-handle:hover .preview-resize-handle__bar,.preview-resize-handle--hovered .preview-resize-handle__bar{background:#fffc;box-shadow:0 0 8px #fff9}.live-badge{position:absolute;top:8px;right:8px;z-index:var(--z-badge);display:flex;align-items:center;gap:6px;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:4px 8px;border-radius:var(--radius-pill)}.live-badge__dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55eb3}.live-badge__text{font-size:10px;color:#fff;font-weight:500}.ratio-badge{position:absolute;bottom:8px;right:8px;z-index:var(--z-badge);background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:4px 8px;border-radius:var(--radius-sm);font-size:10px;color:#fff;font-family:monospace}.ui-overlay{position:absolute;z-index:var(--z-overlay-ui);overflow:hidden;cursor:move;border-radius:var(--radius-md)}.ui-overlay--selected{outline-offset:-1px}.ui-overlay__handle{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;z-index:3}.ui-overlay__handle--tl{top:-4px;left:-4px;cursor:nwse-resize}.ui-overlay__handle--tr{top:-4px;right:-4px;cursor:nesw-resize}.ui-overlay__handle--bl{bottom:-4px;left:-4px;cursor:nesw-resize}.ui-overlay__handle--br{bottom:-4px;right:-4px;cursor:nwse-resize}