:root{--bg-0: #15181e;--bg-1: #1e222a;--bg-2: #272c35;--bg-3: #323843;--bg-4: #404754;--line: #353b46;--line-strong: #4a525f;--text: #f2f4f8;--text-muted: #aeb6c4;--text-dim: #7d8696;--accent: #e7267a;--accent-2: #5cc8ff;--accent-soft: rgba(231, 38, 122, .18);--danger: #ff5c7a;--warn: #ffb454;--ok: #4ade80;--shadow-1: 0 1px 2px rgba(0, 0, 0, .4);--shadow-2: 0 8px 24px rgba(0, 0, 0, .4);--r-sm: 6px;--r-md: 10px;--r-lg: 14px;--u: 4px;--row-h: 32px;--side-w: 72px;--panel-w: 280px;--panel-left-w: var(--panel-w);--top-h: 48px;--time-h: 240px;--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}[data-theme=light]{--bg-0: #eceef2;--bg-1: #ffffff;--bg-2: #f4f5f8;--bg-3: #e8eaef;--bg-4: #d8dce4;--line: #dfe2e8;--line-strong: #c4cad4;--text: #14171c;--text-muted: #586173;--text-dim: #858e9e;--accent-soft: rgba(231, 38, 122, .12);--shadow-1: 0 1px 2px rgba(20, 23, 28, .08);--shadow-2: 0 8px 24px rgba(20, 23, 28, .12)}[data-density=compact]{--row-h: 28px;--side-w: 64px;--panel-w: 250px;--top-h: 42px}.caneva-tooltip{position:fixed;top:0;left:0;z-index:100000;padding:5px 9px;background:var(--bg-4);color:var(--text);border:1px solid var(--line-strong);border-radius:6px;font-size:11px;font-weight:500;line-height:1.2;white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis;box-shadow:var(--shadow-2);opacity:0;pointer-events:none;transition:opacity .12s ease}.caneva-tooltip.visible{opacity:1}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;padding:0}body{background:var(--bg-0);color:var(--text);font-family:var(--font-ui);font-size:13px;line-height:1.4;overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}input,textarea,select{font-family:inherit;color:inherit}app-root{display:block;height:100vh}.app{display:grid;grid-template-rows:var(--top-h) 1fr;height:100vh}.main{display:grid;grid-template-columns:var(--side-w) var(--panel-left-w) 1fr var(--panel-w);min-height:0;position:relative}app-topbar{display:contents}.topbar{display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--bg-1);border-bottom:1px solid var(--line);height:var(--top-h)}.topbar .logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;letter-spacing:-.01em;padding-right:12px;margin-right:4px;border-right:1px solid var(--line);height:100%}.topbar-spacer{flex:1}.topbar-title{display:flex;align-items:center;gap:8px;background:var(--bg-2);padding:6px 12px;border-radius:var(--r-sm);font-size:13px;color:var(--text);border:1px solid var(--line-strong);cursor:text;transition:border-color .15s ease,box-shadow .15s ease}.topbar-title app-icon{color:var(--text-dim);flex:none}.topbar-title:hover{border-color:var(--text-dim)}.topbar-title:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}.topbar-title input{background:none;border:none;color:inherit;outline:none;width:200px;font-size:inherit;font-weight:500}.topbar-title input::placeholder{color:var(--text-dim)}.topbar-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-sm);font-size:12.5px;font-weight:500;color:var(--text-muted);transition:all .15s}.topbar-btn:hover{background:var(--bg-2);color:var(--text)}.topbar-btn.primary{background:var(--accent);color:#fff;font-weight:600}.topbar-btn.primary:hover{background:#ff3a8e}.topbar-btn.ghost-bordered{border:1px solid var(--line)}app-sidebar{display:contents}.sidebar{background:var(--bg-1);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:8px 0;gap:2px;overflow-y:auto}.side-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;margin:0 6px;border-radius:var(--r-sm);color:var(--text-muted);font-size:10.5px;text-align:center;transition:all .15s;cursor:pointer}.side-item:hover{background:var(--bg-2);color:var(--text)}.side-item.active{background:var(--accent-soft);color:var(--accent)}.side-item svg{width:22px;height:22px}.panel{background:var(--bg-1);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;overflow:hidden}.panel.panel-right{border-right:none;border-left:1px solid var(--line)}.panel>*{display:flex;flex-direction:column;flex:1;min-height:0}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px;font-weight:600;font-size:13px;gap:8px}.panel-header>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.panel-header .h-actions{display:flex;gap:4px}.panel-header .h-actions button{padding:4px;border-radius:4px;color:var(--text-muted)}.panel-header .h-actions button:hover{background:var(--bg-2);color:var(--text)}.panel-search{margin:0 12px 8px;position:relative}.panel-search input{width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 10px 7px 30px;color:var(--text);outline:none;font-size:12px}.panel-search input:focus{border-color:var(--accent)}.panel-search svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text-dim)}.panel-body{flex:1;overflow-y:auto;padding:4px 12px 12px}.panel-section-title{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);font-weight:600;padding:10px 2px 6px}.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.media-tile{aspect-ratio:1;background:var(--bg-2);border-radius:var(--r-sm);border:1px solid var(--line);position:relative;overflow:hidden;cursor:grab;display:grid;place-items:center;color:var(--text-dim);transition:all .15s}.media-tile:hover{border-color:var(--accent);transform:translateY(-1px)}.media-tile img,.media-tile video{width:100%;height:100%;object-fit:cover;pointer-events:none}.media-tile .duration{position:absolute;bottom:4px;right:4px;background:#000000b3;color:#fff;padding:1px 5px;border-radius:3px;font-size:10px;font-feature-settings:"tnum"}.upload-zone{border:1.5px dashed var(--line-strong);border-radius:var(--r-md);padding:24px 16px;text-align:center;color:var(--text-muted);cursor:pointer;transition:all .15s;margin-bottom:12px}.upload-zone:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}.upload-zone svg{width:28px;height:28px;margin-bottom:8px}.upload-zone .ttl{font-weight:600;font-size:12.5px;color:var(--text);margin-bottom:2px}.upload-zone .sub{font-size:11px}.text-style-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 12px;display:grid;place-items:center;cursor:grab;margin-bottom:8px;transition:all .15s;min-height:56px}.text-style-card:hover{border-color:var(--accent);transform:translateY(-1px)}.anim-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.anim-chip{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 8px;text-align:center;cursor:pointer;transition:all .15s;font-size:11.5px;font-weight:500}.anim-chip:hover{border-color:var(--accent);background:var(--bg-3)}.anim-chip.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.anim-chip.disabled{opacity:.5;cursor:default}.anim-chip.disabled:hover{border-color:var(--line);background:var(--bg-2)}.anim-chip .preview{height:20px;display:grid;place-items:center;font-weight:700;font-size:13px;margin-bottom:4px;color:var(--text)}.font-row{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;transition:background .12s}.font-row:hover{background:var(--bg-2)}.font-row.active{background:var(--accent-soft);color:var(--accent)}.font-row .fname{font-size:14px}.font-row .ftag{font-size:10px;color:var(--text-dim);text-transform:uppercase}.cat-tabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}.cat-tabs::-webkit-scrollbar{display:none}.cat-tab{padding:5px 10px;border-radius:999px;font-size:11px;background:var(--bg-2);border:1px solid var(--line);color:var(--text-muted);white-space:nowrap;cursor:pointer}.cat-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}app-stage{display:contents}.stage-wrap{background:var(--bg-0);display:grid;grid-template-rows:1fr var(--time-h);min-width:0;min-height:0;position:relative}.stage{position:relative;overflow:hidden;display:grid;place-items:center;background-color:var(--bg-0);background-image:radial-gradient(circle at 20% 0%,rgba(124,92,255,.08),transparent 45%),radial-gradient(circle at 80% 100%,rgba(92,200,255,.08),transparent 45%),radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:auto,auto,24px 24px}.stage-toolbar{position:absolute;top:12px;left:50%;transform:translate(-50%);background:var(--bg-1);border:1px solid var(--line);border-radius:999px;padding:4px;display:flex;align-items:center;gap:2px;box-shadow:var(--shadow-2);z-index:5}.stage-toolbar button{padding:6px 12px;border-radius:999px;font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:6px}.stage-toolbar button:hover{background:var(--bg-2);color:var(--text)}.stage-toolbar button.active{background:var(--accent-soft);color:var(--accent)}.stage-toolbar .sep{width:1px;background:var(--line);height:18px;margin:0 4px}.stage-bottom{position:absolute;bottom:14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;background:var(--bg-1);border:1px solid var(--line);border-radius:999px;padding:4px 14px;box-shadow:var(--shadow-2);font-feature-settings:"tnum";font-size:12px;color:var(--text-muted)}.stage-bottom button:not(.play-btn){color:var(--text-muted)}.stage-bottom button:not(.play-btn):hover{color:var(--text)}.stage-bottom .play-btn{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center}.stage-bottom .play-btn:hover{background:#ff3a8e}.stage-bottom .play-btn svg{width:14px;height:14px}.canvas-frame{background:#fff;box-shadow:0 24px 80px #000000b3,0 0 0 1px #ffffff2e,0 0 60px #7c5cff14;overflow:hidden;outline:1px solid rgba(255,255,255,.1);position:absolute;left:50%;top:50%}.layer{position:absolute;cursor:move}.layer-text{white-space:pre-wrap;word-wrap:break-word;outline:none;display:flex;align-items:center;justify-content:center}.layer-img,.layer-video{width:100%;height:100%}.layer-img img,.layer-img video,.layer-video img,.layer-video video{width:100%;height:100%;pointer-events:none}.selection-box{position:absolute;border:calc(1.5px * var(--inv-scale, 1)) solid var(--accent);pointer-events:none;z-index:100}.handle{--handle-size: 12px;--handle-grab: 24px;position:absolute;width:calc(var(--handle-size) * var(--inv-scale, 1));height:calc(var(--handle-size) * var(--inv-scale, 1));background:#fff;border:calc(1.5px * var(--inv-scale, 1)) solid var(--accent);border-radius:50%;pointer-events:auto;transform:translate(-50%,-50%)}.handle:before{content:"";position:absolute;top:50%;left:50%;width:calc(var(--handle-grab) * var(--inv-scale, 1));height:calc(var(--handle-grab) * var(--inv-scale, 1));transform:translate(-50%,-50%)}.handle.tl{top:0;left:0;cursor:nwse-resize}.handle.tr{top:0;left:100%;cursor:nesw-resize}.handle.bl{top:100%;left:0;cursor:nesw-resize}.handle.br{top:100%;left:100%;cursor:nwse-resize}.handle.t{top:0;left:50%;cursor:ns-resize}.handle.b{top:100%;left:50%;cursor:ns-resize}.handle.l{top:50%;left:0;cursor:ew-resize}.handle.r{top:50%;left:100%;cursor:ew-resize}.handle.rot{--handle-size: 16px;top:calc(-24px * var(--inv-scale, 1));left:50%;cursor:grab}.anim-letter{display:inline-block;opacity:0}app-timeline{display:contents}.timeline{background:var(--bg-1);border-top:1px solid var(--line);display:grid;grid-template-rows:36px 1fr;min-height:0}.timeline-head{display:flex;align-items:center;padding:0 12px;border-bottom:1px solid var(--line);gap:12px}.timeline-head .tools{display:flex;gap:2px}.timeline-head .tools button{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--text-muted)}.timeline-head .tools button:hover{background:var(--bg-2);color:var(--text)}.page-tab{padding:4px 10px;border-radius:var(--r-sm);background:var(--bg-2);border:1px solid var(--line);font-size:11.5px;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0}.page-tab.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.page-tab .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6}.timeline-body{display:grid;grid-template-columns:140px 1fr;min-height:0;overflow:hidden}.tracks-labels{background:var(--bg-1);border-right:1px solid var(--line);overflow:hidden}.track-label{height:56px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--text-muted)}.track-label .icon{width:24px;height:24px;border-radius:5px;background:var(--bg-3);display:grid;place-items:center;color:var(--text)}.track-label .icon svg{width:12px;height:12px}.track-label .lock{margin-left:auto;opacity:0;cursor:pointer}.track-label:hover .lock{opacity:1}.tracks-area{position:relative;overflow:auto;background:repeating-linear-gradient(90deg,transparent 0,transparent 99px,var(--line) 99px,var(--line) 100px)}.ruler{position:sticky;top:0;z-index:5;height:24px;background:var(--bg-1);border-bottom:1px solid var(--line);display:flex;font-size:10px;color:var(--text-dim);font-feature-settings:"tnum";cursor:ew-resize;-webkit-user-select:none;user-select:none}.ruler .tick{position:relative;height:100%;border-right:1px solid var(--line);flex-shrink:0}.ruler .tick span{position:absolute;bottom:4px;left:4px}.tracks-rows{position:relative}.track-row{height:56px;border-bottom:1px solid var(--line);position:relative}.tl-clip{position:absolute;border-radius:5px;border:1px solid rgba(255,255,255,.12);cursor:grab;display:flex;align-items:center;padding:0 8px;font-size:11px;color:#fff;font-weight:500;overflow:hidden;white-space:nowrap}.tl-clip.selected{outline:1.5px solid white}.tl-clip.video{background:linear-gradient(135deg,#4a6cf7,#1d4ed8)}.tl-clip.image{background:linear-gradient(135deg,#10b981,#059669)}.tl-clip.text{background:linear-gradient(135deg,#f59e0b,#d97706)}.tl-clip.shape{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.tl-clip.audio{background:linear-gradient(135deg,#ec4899,#be185d)}.tl-clip .resize-h{position:absolute;top:0;bottom:0;width:6px;cursor:ew-resize}.tl-clip .resize-h.l{left:0}.tl-clip .resize-h.r{right:0}.tl-clip .thumb{width:28px;height:28px;border-radius:3px;background-size:cover;background-position:center;margin-right:6px;flex-shrink:0}.playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);z-index:10;pointer-events:auto;cursor:ew-resize}.playhead:before{content:"";position:absolute;top:0;left:-6px;width:14px;height:14px;background:var(--accent);clip-path:polygon(0 0,100% 0,50% 100%)}.playhead-handle{position:absolute;top:0;left:-8px;width:18px;height:24px;cursor:ew-resize}.layers-list{display:flex;flex-direction:column;gap:2px}.layer-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-sm);cursor:pointer;font-size:12px}.layer-row:hover{background:var(--bg-2)}.layer-row.active{background:var(--accent-soft);color:var(--accent)}.layer-row .l-thumb{width:30px;height:30px;border-radius:4px;background:var(--bg-3);display:grid;place-items:center;background-size:cover;flex-shrink:0;font-size:10px;overflow:hidden}.layer-row .l-thumb img,.layer-row .l-thumb video{width:100%;height:100%;object-fit:cover}.layer-row .l-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-row .l-actions{display:flex;gap:2px;opacity:0}.layer-row .l-actions button{padding:2px;color:var(--text-muted)}.layer-row .l-actions button:hover{color:var(--text)}.layer-row:hover .l-actions,.layer-row.active .l-actions{opacity:1}.prop-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;gap:10px}.prop-row label{font-size:11.5px;color:var(--text-muted);flex-shrink:0}.prop-input{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 8px;color:var(--text);outline:none;font-size:12px;width:100%}.prop-input:focus{border-color:var(--accent)}.prop-input.num{width:70px;text-align:right;font-feature-settings:"tnum"}.prop-row .duo{display:flex;gap:6px}.prop-color{width:28px;height:22px;border-radius:4px;border:1px solid var(--line);cursor:pointer;background-color:#fff;padding:0}.btn-group{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px}.btn-group button{padding:4px 8px;border-radius:4px;font-size:11.5px;color:var(--text-muted)}.btn-group button.active{background:var(--bg-3);color:var(--text)}.modal-backdrop{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;z-index:1000;padding:32px}.modal{background:var(--bg-1);border:1px solid var(--line);border-radius:16px;padding:32px;width:100%;max-width:720px;box-shadow:var(--shadow-2)}.modal h2{margin:0 0 8px;font-size:20px;font-weight:700;letter-spacing:-.01em}.modal .lead{color:var(--text-muted);margin:0 0 24px;font-size:13px}.format-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.format-card{background:var(--bg-2);border:1.5px solid var(--line);border-radius:var(--r-md);padding:16px;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:8px}.format-card:hover{border-color:var(--accent);transform:translateY(-2px);background:var(--bg-3)}.format-card.active{border-color:var(--accent);background:var(--accent-soft)}.format-card .label{font-size:12px;font-weight:600}.format-card .dim{font-size:10.5px;color:var(--text-dim);font-feature-settings:"tnum"}.format-shape{background:var(--bg-3);border:1.5px solid var(--line-strong);border-radius:4px;position:relative;flex-shrink:0}@keyframes anim-fade{0%{opacity:0}to{opacity:1}}@keyframes anim-slide-l{0%{opacity:0;transform:translate(-40px)}to{opacity:1;transform:translate(0)}}@keyframes anim-slide-r{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}@keyframes anim-slide-u{0%{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)}}@keyframes anim-slide-d{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes anim-zoom{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes anim-zoom-out{0%{opacity:0;transform:scale(1.6)}to{opacity:1;transform:scale(1)}}@keyframes anim-bounce{0%{opacity:0;transform:scale(.3)}60%{transform:scale(1.1)}80%{transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes anim-blur{0%{opacity:0;filter:blur(20px)}to{opacity:1;filter:blur(0)}}@keyframes anim-spin{0%{opacity:0;transform:rotate(-180deg) scale(.4)}to{opacity:1;transform:rotate(0) scale(1)}}@keyframes anim-flip{0%{opacity:0;transform:perspective(800px) rotateY(90deg)}to{opacity:1;transform:perspective(800px) rotateY(0)}}@keyframes anim-glitch{0%{opacity:0;transform:translate(0);text-shadow:none}20%{opacity:1;transform:translate(-2px,1px);text-shadow:2px 0 #ff0080,-2px 0 #00ffff}40%{transform:translate(2px,-1px);text-shadow:-2px 0 #ff0080,2px 0 #00ffff}60%{transform:translate(-1px,2px);text-shadow:1px 0 #ff0080,-1px 0 #00ffff}80%{transform:translate(1px,-2px);text-shadow:none}to{transform:translate(0);text-shadow:none}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--bg-4)}.ico{width:16px;height:16px;flex-shrink:0}.empty{padding:32px 16px;text-align:center;color:var(--text-dim);font-size:12px}.empty svg{width:32px;height:32px;margin-bottom:8px;opacity:.5}