.editor-root{display:grid;grid-template-rows:var(--topbar-height) 1fr var(--tooloptions-height) var(--bottombar-height);height:100dvh;width:100vw;background:var(--app-background);color:var(--app-label);position:relative;overflow:hidden;padding-bottom:env(safe-area-inset-bottom)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-md);background:var(--app-background);border-bottom:.5px solid var(--app-separator);position:relative;z-index:60;gap:var(--space-sm);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.topbar .group{display:flex;align-items:center;gap:4px}.topbar .title{font-size:15px;font-weight:600;color:var(--app-label);flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar .icon-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--app-label)}.topbar .icon-btn:hover{background:var(--app-surface)}.topbar .icon-btn:active{background:var(--app-separator)}.topbar .icon-btn:disabled{color:var(--app-label-tertiary);background:transparent}.topbar .text-btn{height:32px;padding:0 12px;border-radius:var(--radius-sm);color:var(--app-primary);font-weight:600;font-size:15px}.topbar .text-btn:hover{background:var(--app-surface)}.canvas-viewport{position:relative;background:var(--app-surface);overflow:hidden;display:flex;align-items:center;justify-content:center}.canvas-viewport canvas{touch-action:none}.canvas-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);color:var(--app-label-secondary);padding:var(--space-xl);text-align:center}.canvas-empty .hint{font-size:13px;max-width:280px}.canvas-empty .cta{margin-top:var(--space-sm);background:var(--app-primary);color:#fff;padding:12px 24px;border-radius:var(--radius-md);font-weight:600}.canvas-empty .cta:hover{background:var(--app-primary-pressed)}.tooloptions{display:flex;align-items:center;gap:var(--space-md);padding:0 var(--space-md);background:var(--app-background);border-top:.5px solid var(--app-separator);border-bottom:.5px solid var(--app-separator);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.tooloptions::-webkit-scrollbar{display:none}.tool-control{display:flex;align-items:center;gap:var(--space-sm);font-size:13px;color:var(--app-label-secondary);flex-shrink:0}.tool-control input[type=range]{-webkit-appearance:none;appearance:none;width:120px;height:4px;background:var(--app-surface);border-radius:2px;outline:none}.tool-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 1px 4px #0003;cursor:pointer}.tool-control input[type=range]::-moz-range-thumb{width:20px;height:20px;background:#fff;border:none;border-radius:50%;box-shadow:0 1px 4px #0003;cursor:pointer}.tool-control .swatch{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--app-separator);cursor:pointer;flex-shrink:0}.tool-control .pill{background:var(--app-surface);border-radius:var(--radius-sm);padding:4px 10px;font-size:13px;color:var(--app-label);display:inline-flex;align-items:center;gap:4px}.tool-control .action-btn{background:var(--app-primary);color:#fff;font-weight:600;height:32px;padding:0 12px;border-radius:var(--radius-sm);font-size:13px;display:inline-flex;align-items:center;gap:6px}.tool-control .action-btn:hover{background:var(--app-primary-pressed)}.tool-control .action-btn.subtle{background:var(--app-surface);color:var(--app-label)}.tool-control .action-btn.subtle:hover{background:var(--app-separator)}.bottombar{display:flex;align-items:center;gap:4px;padding:0 var(--space-md);background:var(--app-background);border-top:.5px solid var(--app-separator);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.bottombar::-webkit-scrollbar{display:none}.tool-btn{width:56px;min-width:56px;height:48px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--app-label-secondary);border-radius:var(--radius-sm);position:relative;flex-shrink:0}.tool-btn span{font-size:10px;font-weight:500}.tool-btn.active{color:var(--app-primary);background:color-mix(in srgb,var(--app-primary) 12%,transparent)}.tool-btn:hover:not(.active){color:var(--app-label)}.layers-panel-backdrop{position:absolute;top:var(--topbar-height);left:0;right:0;bottom:0;background:#00000040;z-index:50;animation:fade-in .18s ease-out}.layers-panel{position:absolute;top:var(--topbar-height);right:0;bottom:0;width:var(--layers-panel-width);background:var(--app-surface-elevated);z-index:51;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:slide-in .22s cubic-bezier(.32,.72,0,1)}.layers-panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);border-bottom:.5px solid var(--app-separator)}.layers-panel-header h3{font-size:18px;font-weight:600}.layers-panel-list{flex:1;overflow-y:auto;padding:var(--space-sm) 0}.layer-row{display:flex;align-items:center;gap:var(--space-sm);padding:8px var(--space-md);cursor:pointer;border-left:3px solid transparent}.layer-row.active{background:color-mix(in srgb,var(--app-primary) 12%,transparent);border-left-color:var(--app-primary)}.layer-row .thumb{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--app-surface);flex-shrink:0;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;overflow:hidden;display:flex;align-items:center;justify-content:center}.layer-row .thumb img{width:100%;height:100%;object-fit:cover;display:block}.layer-row .name{flex:1;font-size:14px;color:var(--app-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-row .icon-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--app-label-secondary);border-radius:var(--radius-sm)}.layer-row .icon-btn:hover{color:var(--app-label);background:var(--app-surface)}.layer-row .icon-btn.danger:hover{color:var(--app-destructive)}.layers-panel-footer{padding:var(--space-md);border-top:.5px solid var(--app-separator);display:flex;gap:var(--space-sm)}.layers-panel-footer button{flex:1;height:36px;border-radius:var(--radius-sm);background:var(--app-surface);font-weight:500;font-size:13px;color:var(--app-label);display:inline-flex;align-items:center;justify-content:center;gap:6px}.layers-panel-footer button:hover{background:var(--app-separator)}.toast{position:absolute;top:calc(var(--topbar-height) + var(--space-md));left:50%;transform:translate(-50%);background:var(--app-surface-elevated);color:var(--app-label);padding:10px 16px;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);font-size:14px;display:flex;align-items:center;gap:var(--space-sm);z-index:100;animation:drop-in .25s cubic-bezier(.32,.72,0,1)}.toast.success{color:var(--app-success)}.toast.error{color:var(--app-destructive)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes drop-in{0%{opacity:0;transform:translate(-50%) translateY(-12px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.spinner{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){.editor-root{grid-template-rows:var(--topbar-height) 1fr var(--bottombar-height)}.tooloptions,.tool-btn span{display:none}.tool-btn{width:48px;height:48px}.topbar{padding:0 var(--space-sm)}.topbar .title{font-size:14px}.topbar .text-btn{font-size:13px;padding:0 8px;height:28px}.layers-panel{width:100vw}}@media (max-width: 480px){.topbar .group{gap:2px}.topbar .icon-btn{width:32px;height:32px}.tool-btn{width:44px;min-width:44px;height:44px}.canvas-empty{padding:var(--space-md)}.canvas-empty .hint{font-size:12px}}.video-root{display:grid;grid-template-rows:var(--topbar-height) 1fr var(--tooloptions-height) 120px;height:100dvh;width:100vw;background:var(--app-background);color:var(--app-label);padding-bottom:env(safe-area-inset-bottom);overflow:hidden}.video-preview{position:relative;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}.video-preview canvas{max-width:100%;max-height:100%;object-fit:contain;display:block}.video-timeline{background:var(--app-surface);border-top:.5px solid var(--app-separator);padding:var(--space-md);overflow-x:auto;overflow-y:hidden}.timeline-empty{color:var(--app-label-secondary);font-size:13px;text-align:center;padding:24px 0}.timeline-tracks{display:flex;gap:4px;height:72px;width:100%;position:relative;cursor:crosshair}.timeline-playhead{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--app-primary);pointer-events:none;z-index:10;transform:translate(-50%)}.timeline-playhead:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:8px;height:8px;background:var(--app-primary);border-radius:50%}.timeline-clip{flex-shrink:0;min-width:80px;height:72px;background:linear-gradient(135deg,#0a84ff,#5856d6);border-radius:var(--radius-sm);padding:var(--space-sm);color:#fff;font-size:12px;font-weight:500;display:flex;align-items:flex-start;justify-content:space-between;cursor:pointer;position:relative;box-shadow:var(--shadow-sm);transition:transform .1s,box-shadow .1s}.timeline-clip:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}.timeline-clip.active{outline:2px solid var(--app-primary);outline-offset:-2px}.timeline-clip .clip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 28px)}.timeline-clip .clip-x{color:#fff;background:#0000004d;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1;flex-shrink:0}.timeline-clip .clip-x:hover{background:#0000008c}.timeline-clip .clip-duration{font-size:10px;opacity:.7;white-space:nowrap}.trim-handle{position:absolute;top:0;bottom:0;width:8px;background:#ffffffe6;cursor:col-resize;z-index:5;display:flex;align-items:center;justify-content:center;transition:background .15s}.trim-handle:after{content:"";width:2px;height:20px;background:#0006;border-radius:1px}.trim-handle:hover{background:#fff}.trim-handle-left{left:0;border-radius:var(--radius-sm) 0 0 var(--radius-sm)}.trim-handle-right{right:0;border-radius:0 var(--radius-sm) var(--radius-sm) 0}:root{--app-primary: #0A84FF;--app-primary-pressed: #0070D9;--app-background: #FFFFFF;--app-surface: #F2F2F7;--app-surface-2: #FFFFFF;--app-surface-elevated: #FFFFFF;--app-label: #000000;--app-label-secondary: rgba(60, 60, 67, .6);--app-label-tertiary: rgba(60, 60, 67, .3);--app-separator: rgba(60, 60, 67, .29);--app-separator-opaque: #C6C6C8;--app-destructive: #FF3B30;--app-success: #34C759;--app-warning: #FF9500;--app-accent: #5856D6;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-xxl: 48px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-card: 16px;--radius-sheet: 20px;--font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .06);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 12px 32px rgba(0, 0, 0, .12);--shadow-bar: 0 0 0 .5px var(--app-separator);--topbar-height: 52px;--tooloptions-height: 52px;--bottombar-height: 64px;--layers-panel-width: min(75vw, 320px)}@media (prefers-color-scheme: dark){:root{--app-primary: #0A84FF;--app-primary-pressed: #409CFF;--app-background: #000000;--app-surface: #1C1C1E;--app-surface-2: #2C2C2E;--app-surface-elevated: #1C1C1E;--app-label: #FFFFFF;--app-label-secondary: rgba(235, 235, 245, .6);--app-label-tertiary: rgba(235, 235, 245, .3);--app-separator: rgba(84, 84, 88, .65);--app-separator-opaque: #38383A;--app-destructive: #FF453A;--app-success: #30D158;--app-warning: #FF9F0A;--app-accent: #5E5CE6;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);--shadow-md: 0 4px 12px rgba(0, 0, 0, .5);--shadow-lg: 0 12px 32px rgba(0, 0, 0, .6)}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden;background:var(--app-background);color:var(--app-label);font-family:var(--font-system);font-size:15px;line-height:1.3;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;touch-action:none;user-select:none;-webkit-user-select:none}button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}button:disabled{opacity:.4;cursor:not-allowed}input,textarea{font-family:inherit;font-size:inherit;color:inherit;background:var(--app-surface);border:none;border-radius:var(--radius-sm);padding:6px 10px;outline:none}input:focus{box-shadow:0 0 0 2px var(--app-primary)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:var(--app-label-tertiary);border-radius:3px}