:root { --ve-bg:#111511; --ve-panel:#181d18; --ve-panel-2:#202620; --ve-line:#303830; --ve-text:#f3f5ef; --ve-muted:#8d998e; --ve-lime:#d8ff67; --ve-coral:#ff785c; --ve-blue:#7eb7ff; --ve-track:#141914; --ve-label:164px; --ve-px:75px; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html, body { margin:0; min-width:320px; min-height:100%; background:var(--ve-bg); color:var(--ve-text); font-family:Bahnschrift,"Aptos Display","Segoe UI",sans-serif; }
button, input, select, textarea { font:inherit; }
button { color:inherit; }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ve-body { overflow:hidden; }
.ve-app { display:grid; grid-template-rows:58px minmax(0,1fr) clamp(220px,35vh,330px); width:100%; height:100dvh; min-height:0; overflow:hidden; background:radial-gradient(circle at 55% 20%,rgba(216,255,103,.035),transparent 30%),var(--ve-bg); }
.ve-topbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:0 16px; border-bottom:1px solid var(--ve-line); background:rgba(17,21,17,.97); }
.ve-brand-group,.ve-top-actions,.ve-history-actions { display:flex; align-items:center; gap:12px; min-width:0; }
.ve-top-actions { justify-content:flex-end; }
.ve-brand { display:flex; align-items:center; gap:9px; color:var(--ve-text); text-decoration:none; font-size:15px; font-weight:800; letter-spacing:-.02em; }
.ve-brand > i,.ve-welcome-mark i { display:block; width:7px; height:18px; border-radius:1px; transform:skew(-16deg); }
.ve-brand > i:nth-child(1),.ve-welcome-mark i:nth-child(1) { background:var(--ve-coral); }
.ve-brand > i:nth-child(2),.ve-welcome-mark i:nth-child(2) { margin-left:-7px; background:var(--ve-lime); transform:skew(16deg); }
.ve-brand > i:nth-child(3),.ve-welcome-mark i:nth-child(3) { margin-left:-7px; background:var(--ve-blue); }
.ve-divider { width:1px; height:23px; background:var(--ve-line); }
.ve-project-name { max-width:250px; padding:7px 8px; overflow:hidden; border:0; background:transparent; color:var(--ve-text); text-overflow:ellipsis; white-space:nowrap; font-weight:650; text-align:left; cursor:pointer; }
.ve-project-name:hover { background:var(--ve-panel-2); }
.ve-save-state { color:var(--ve-muted); font:500 10px/1 Consolas,monospace; text-transform:uppercase; letter-spacing:.08em; }
.ve-icon-button,.ve-round-button { display:grid; place-items:center; padding:0; border:0; border-radius:8px; background:transparent; cursor:pointer; }
.ve-icon-button { width:34px; height:34px; color:var(--ve-muted); }
.ve-icon-button:hover { background:var(--ve-panel-2); color:var(--ve-text); }
.ve-icon-button:disabled { opacity:.28; cursor:default; }
.ve-icon-button.danger:hover { background:#3a211d; color:#ff9983; }
.ve-quiet-button { height:36px; padding:0 15px; border:1px solid var(--ve-line); border-radius:8px; background:var(--ve-panel); font-size:12px; font-weight:700; cursor:pointer; }
.ve-preview-button { display:flex; align-items:center; gap:7px; height:38px; padding:0 15px; border:1px solid #4a5747; border-radius:8px; background:#20281e; color:#eef6e8; font-size:11px; font-weight:800; cursor:pointer; }.ve-preview-button:hover { border-color:var(--ve-lime); background:#293225; }.ve-preview-button svg { width:15px; height:15px; fill:currentColor; stroke:none; }
.ve-export-button { display:flex; align-items:center; gap:8px; height:38px; padding:0 16px; border:0; border-radius:8px; background:var(--ve-lime); color:#10150c; font-size:12px; font-weight:800; cursor:pointer; box-shadow:0 0 28px rgba(216,255,103,.1); }
.ve-export-button:hover { filter:brightness(1.06); transform:translateY(-1px); }
.ve-export-button svg { width:16px; height:16px; stroke-width:2.2; }
.ve-main { display:grid; grid-template-columns:72px 300px minmax(360px,1fr) 286px; min-width:0; min-height:0; overflow:hidden; }
.ve-tool-rail { display:flex; flex-direction:column; gap:6px; padding:10px 7px; border-right:1px solid var(--ve-line); background:#101410; }
.ve-tool-rail button { display:grid; justify-items:center; gap:5px; width:58px; min-height:58px; padding:7px 3px; border:0; border-radius:9px; background:transparent; color:#7e897f; font-size:9px; font-weight:650; cursor:pointer; }
.ve-tool-rail button:hover { background:var(--ve-panel); color:var(--ve-text); }
.ve-tool-rail button.active { background:#293126; color:var(--ve-lime); }
.ve-tool-rail svg { width:21px; height:21px; }
.ve-library,.ve-inspector { position:relative; z-index:1; min-width:0; min-height:0; overflow-y:scroll; overscroll-behavior:contain; border-right:1px solid var(--ve-line); background:var(--ve-panel); scrollbar-width:auto; scrollbar-color:#596558 #121712; }
.ve-library::-webkit-scrollbar,.ve-inspector::-webkit-scrollbar,.ve-timeline-scroll::-webkit-scrollbar { width:12px; height:12px; }.ve-library::-webkit-scrollbar-track,.ve-inspector::-webkit-scrollbar-track,.ve-timeline-scroll::-webkit-scrollbar-track { background:#111511; }.ve-library::-webkit-scrollbar-thumb,.ve-inspector::-webkit-scrollbar-thumb,.ve-timeline-scroll::-webkit-scrollbar-thumb { border:3px solid #111511; border-radius:99px; background:#566255; }.ve-library::-webkit-scrollbar-thumb:hover,.ve-inspector::-webkit-scrollbar-thumb:hover,.ve-timeline-scroll::-webkit-scrollbar-thumb:hover { background:var(--ve-lime); }
.ve-drawer-close { display:none; position:sticky; z-index:5; top:8px; float:right; width:34px; height:34px; margin:8px 8px -42px 0; border:1px solid var(--ve-line); border-radius:9px; background:#252d24; color:#d6ded3; font-size:22px; cursor:pointer; }
.ve-inspector { border-right:0; border-left:1px solid var(--ve-line); }
.ve-panel { display:none; padding:18px 15px 24px; }
.ve-panel.active { display:block; animation:ve-panel-in .18s ease-out; }
@keyframes ve-panel-in { from { opacity:0; transform:translateX(-5px); } }
.ve-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.ve-panel-head h2 { margin:0; font-size:17px; line-height:1.2; letter-spacing:-.035em; }
.ve-panel-head p { margin:5px 0 0; color:var(--ve-muted); font-size:10px; line-height:1.45; }
.ve-round-button { width:30px; height:30px; background:var(--ve-lime); color:#111511; font-size:20px; font-weight:500; }
.ve-live-count { display:grid; place-items:center; min-width:30px; height:25px; padding:0 7px; border:1px solid #445044; border-radius:999px; background:#101510; color:var(--ve-lime); font:700 9px Consolas,monospace; }
.ve-template-filters { display:flex; gap:5px; margin:0 -15px 13px; padding:0 15px 5px; overflow:auto; scrollbar-width:none; }.ve-template-filters::-webkit-scrollbar { display:none; }.ve-template-filters button { flex:0 0 auto; padding:6px 9px; border:1px solid transparent; border-radius:999px; background:#222922; color:#8e998e; font-size:8px; font-weight:700; cursor:pointer; }.ve-template-filters button.active { border-color:#63705f; background:#30392d; color:var(--ve-text); }
.ve-template-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; transition:opacity .18s; }.ve-template-grid.loading { opacity:.4; pointer-events:none; }
.ve-template-card { min-width:0; overflow:hidden; border:1px solid var(--ve-line); border-radius:10px; background:#111511; cursor:pointer; transition:transform .18s,border-color .18s,box-shadow .18s; }.ve-template-card:hover { z-index:2; border-color:#7b8877; transform:translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,.28); }
.ve-template-preview { position:relative; display:flex; align-items:flex-end; aspect-ratio:4/5; overflow:hidden; padding:11px; background:linear-gradient(145deg,var(--template-a),var(--template-b) 72%); color:var(--template-c); isolation:isolate; }.ve-template-preview:after { content:""; position:absolute; inset:0; z-index:-1; opacity:.45; background:repeating-linear-gradient(120deg,transparent 0 16px,rgba(255,255,255,.09) 16px 17px); }.ve-template-card[data-pattern=orb] .ve-template-preview:after,.ve-template-card[data-pattern=rings] .ve-template-preview:after { inset:15% -30% -35% 15%; border:20px solid var(--template-c); border-radius:50%; background:transparent; }.ve-template-card[data-pattern=burst] .ve-template-preview:after { inset:-40%; background:repeating-conic-gradient(from 20deg,transparent 0 10deg,rgba(255,255,255,.18) 10deg 16deg); }.ve-template-card[data-pattern=waves] .ve-template-preview:after { background:repeating-radial-gradient(ellipse at 50% 110%,transparent 0 10px,rgba(255,255,255,.13) 11px 13px); }.ve-template-card[data-pattern=split] .ve-template-preview:after { left:50%; background:var(--template-c); opacity:.28; }.ve-template-card[data-pattern=grid] .ve-template-preview:after,.ve-template-card[data-pattern=architecture] .ve-template-preview:after { background-image:linear-gradient(rgba(255,255,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px); background-size:22px 22px; }
.ve-template-preview > div { position:relative; z-index:1; display:grid; gap:5px; width:100%; }.ve-template-preview strong { display:block; font-size:15px; line-height:.94; letter-spacing:-.045em; text-wrap:balance; }.ve-template-preview div span { display:-webkit-box; overflow:hidden; color:currentColor; font-size:7px; line-height:1.35; opacity:.8; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.ve-template-ratio { position:absolute; top:8px; right:8px; padding:3px 5px; border-radius:4px; background:rgba(0,0,0,.3); color:#fff; font:600 6px Consolas,monospace; backdrop-filter:blur(8px); }.ve-template-preview button { position:absolute; z-index:3; right:8px; bottom:8px; padding:5px 7px; border:0; border-radius:5px; background:var(--ve-lime); color:#101510; font-size:7px; font-weight:800; opacity:0; transform:translateY(4px); transition:.15s; }.ve-template-card:hover .ve-template-preview button { opacity:1; transform:none; }.ve-template-shape { position:absolute; z-index:-1; display:block; border:1px solid currentColor; opacity:.22; }.ve-template-shape.one { top:13%; left:-10%; width:80%; height:25%; transform:rotate(-12deg); }.ve-template-shape.two { right:-15%; bottom:18%; width:70%; height:20%; transform:rotate(18deg); }
.ve-template-meta { display:grid; gap:3px; padding:8px; }.ve-template-meta strong { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.ve-template-meta span { display:-webkit-box; overflow:hidden; color:var(--ve-muted); font-size:7px; line-height:1.4; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.ve-search { display:flex; align-items:center; gap:8px; height:36px; margin-bottom:11px; padding:0 10px; border:1px solid var(--ve-line); border-radius:8px; background:#111511; }
.ve-search svg { width:15px; height:15px; color:#788478; }
.ve-search input { width:100%; border:0; outline:0; background:transparent; color:var(--ve-text); font-size:11px; }
.ve-upload-zone { display:grid; justify-items:center; gap:3px; width:100%; padding:15px; border:1px dashed #465246; border-radius:10px; background:#141914; color:var(--ve-text); cursor:pointer; }
.ve-upload-zone:hover { border-color:var(--ve-lime); background:#1a2118; }
.ve-upload-zone strong { font-size:11px; }
.ve-upload-zone small { color:var(--ve-muted); font-size:9px; }
.ve-upload-icon { display:grid; place-items:center; width:29px; height:29px; margin-bottom:3px; border-radius:50%; background:#2b3428; color:var(--ve-lime); }
.ve-upload-icon svg { width:14px; height:14px; }
.ve-filter-row { display:flex; gap:4px; margin:14px 0 10px; }
.ve-filter-row button { padding:5px 8px; border:0; border-radius:6px; background:transparent; color:var(--ve-muted); font-size:9px; cursor:pointer; }
.ve-filter-row button.active { background:#2b3329; color:var(--ve-text); }
.ve-asset-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ve-asset { position:relative; overflow:hidden; min-width:0; border:1px solid var(--ve-line); border-radius:8px; background:#101410; cursor:pointer; }
.ve-asset:hover { border-color:#697568; }
.ve-asset-preview { position:relative; display:grid; place-items:center; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,#2c352d,#121612); color:var(--ve-muted); }
.ve-asset-preview img,.ve-asset-preview video { width:100%; height:100%; object-fit:cover; }
.ve-asset-preview svg { width:27px; height:27px; }
.ve-asset-meta { display:grid; gap:2px; min-width:0; padding:7px 8px; }
.ve-asset-meta strong { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.ve-asset-meta span { color:var(--ve-muted); font:400 8px/1.3 Consolas,monospace; }
.ve-asset-add { position:absolute; right:5px; bottom:33px; display:grid; place-items:center; width:24px; height:24px; border:0; border-radius:6px; background:var(--ve-lime); color:#101510; opacity:0; cursor:pointer; }
.ve-asset:hover .ve-asset-add { opacity:1; }
.ve-empty-assets { grid-column:1/-1; padding:24px 10px; color:var(--ve-muted); text-align:center; font-size:10px; line-height:1.6; }
.ve-prompt-card,.ve-coming-note { padding:14px; border:1px solid var(--ve-line); border-radius:11px; background:#121712; }
.ve-prompt-card > label:first-child { display:block; margin-bottom:7px; font-size:10px; font-weight:700; }
.ve-prompt-card textarea,.ve-inspector textarea { width:100%; resize:vertical; border:1px solid var(--ve-line); border-radius:8px; outline:0; background:#0e120e; color:var(--ve-text); font-size:11px; line-height:1.6; }
.ve-prompt-card textarea { padding:10px; }
.ve-prompt-card textarea:focus,.ve-inspector textarea:focus { border-color:#71806d; }
.ve-inline-field { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:11px 0; color:var(--ve-muted); font-size:10px; }
.ve-inline-field select,.ve-field-grid input,.ve-field-grid select,.ve-export-fields select { height:34px; border:1px solid var(--ve-line); border-radius:7px; outline:0; background:#202620; color:var(--ve-text); font-size:10px; }
.ve-inline-field select { padding:0 8px; }
.ve-primary-wide,.ve-secondary-wide,.ve-export-confirm,.ve-download-button { width:100%; min-height:40px; border:0; border-radius:8px; font-size:11px; font-weight:800; text-align:center; cursor:pointer; }
.ve-primary-wide,.ve-export-confirm { background:var(--ve-lime); color:#111511; }
.ve-secondary-wide { border:1px solid var(--ve-line); background:#222922; color:var(--ve-text); }
.ve-prompt-card p { margin:10px 0 0; color:var(--ve-muted); font-size:9px; line-height:1.55; }
.ve-add-text { display:flex; align-items:center; gap:11px; width:100%; padding:10px; border:1px solid var(--ve-line); border-radius:9px; background:#111511; cursor:pointer; }
.ve-add-text span { display:grid; place-items:center; width:34px; height:34px; border-radius:6px; background:#2b332a; font-family:Georgia,serif; font-size:20px; }
.ve-add-text strong { font-size:11px; }
.ve-section-label { margin:19px 0 9px; color:var(--ve-muted); font:500 9px/1 Consolas,monospace; text-transform:uppercase; letter-spacing:.09em; }
.ve-text-presets { display:grid; gap:8px; }
.ve-text-presets button { display:grid; justify-items:start; gap:4px; min-height:68px; padding:12px; border:1px solid var(--ve-line); border-radius:9px; background:#101410; cursor:pointer; }
.ve-text-presets button strong { font-size:16px; letter-spacing:-.02em; }
.ve-text-presets button span { color:var(--ve-muted); font-size:9px; }
.ve-text-presets button:nth-child(2) strong { padding:2px 5px; background:#fff; color:#111; font-size:12px; }
.ve-text-presets button:nth-child(3) strong { color:#64e8ff; text-shadow:0 0 10px #20bfff; }
.ve-text-presets button:nth-child(4) strong { font:italic 17px Georgia,serif; font-weight:400; }
.ve-text-presets button:nth-child(5) strong { color:var(--ve-lime); text-shadow:2px 2px 0 #101510; -webkit-text-stroke:1px #101510; }.ve-text-presets button:nth-child(6) strong { font:italic 15px Georgia,serif; font-weight:400; }.ve-text-presets button:nth-child(7) strong { padding:4px 7px; background:var(--ve-lime); color:#111511; font-size:12px; }.ve-text-presets button:nth-child(8) strong { font:800 14px Consolas,monospace; letter-spacing:.12em; }
.ve-shape-row { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.ve-shape-row button { display:grid; justify-items:center; gap:7px; padding:9px 4px; border:1px solid var(--ve-line); border-radius:8px; background:#111511; color:var(--ve-muted); font-size:7px; cursor:pointer; }.ve-shape-row button:hover { border-color:#667364; color:var(--ve-text); }.ve-shape-row i { display:block; width:34px; height:18px; border-radius:2px; background:var(--ve-lime); }.ve-shape-row button:nth-child(2) i { height:27px; background:#234c65; }.ve-shape-row button:nth-child(3) i { height:3px; margin-block:7px; background:var(--ve-coral); }
.ve-audio-hero { padding:18px 13px; border:1px solid var(--ve-line); border-radius:11px; background:linear-gradient(140deg,#283326,#151a15 65%); }
.ve-audio-hero > strong { display:block; margin-top:14px; font-size:12px; }
.ve-audio-hero p { margin:6px 0 13px; color:var(--ve-muted); font-size:9px; line-height:1.5; }
.ve-audio-hero button { padding:7px 11px; border:0; border-radius:6px; background:var(--ve-lime); color:#111511; font-size:9px; font-weight:800; cursor:pointer; }
.ve-wave-art { display:flex; align-items:center; gap:3px; height:34px; }
.ve-wave-art i { width:4px; border-radius:3px; background:var(--ve-lime); }
.ve-wave-art i:nth-child(1),.ve-wave-art i:nth-child(8) { height:9px; }.ve-wave-art i:nth-child(2),.ve-wave-art i:nth-child(7) { height:18px; }.ve-wave-art i:nth-child(3),.ve-wave-art i:nth-child(6) { height:29px; }.ve-wave-art i:nth-child(4),.ve-wave-art i:nth-child(5) { height:22px; }
.ve-audio-list { display:grid; gap:6px; margin-top:12px; }
.ve-audio-row { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px; border:1px solid var(--ve-line); border-radius:8px; background:#111511; cursor:pointer; }
.ve-audio-row > i { display:grid; place-items:center; width:30px; height:30px; border-radius:6px; background:#283326; color:var(--ve-lime); font-style:normal; }
.ve-audio-row div { min-width:0; }.ve-audio-row strong { display:block; overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.ve-audio-row span { color:var(--ve-muted); font:400 8px Consolas,monospace; }
.ve-effect-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.ve-effect-grid button { display:grid; gap:8px; padding:9px; border:1px solid var(--ve-line); border-radius:8px; background:#111511; color:var(--ve-muted); font-size:9px; cursor:pointer; }
.ve-effect-grid button:hover,.ve-effect-grid button.active { border-color:var(--ve-lime); color:var(--ve-text); }
.ve-canvas-settings { display:grid; gap:8px; }.ve-canvas-settings label { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; color:var(--ve-muted); font-size:9px; }.ve-canvas-settings input,.ve-canvas-settings select { width:116px; height:34px; padding:4px 7px; border:1px solid var(--ve-line); border-radius:7px; background:#101510; color:var(--ve-text); font-size:9px; }.ve-color-swatches { display:flex; gap:7px; margin-top:10px; }.ve-color-swatches button { width:27px; height:27px; padding:0; border:2px solid #4c574c; border-radius:50%; cursor:pointer; box-shadow:inset 0 0 0 2px #151a15; }
.ve-effect-grid i { display:block; height:42px; border-radius:5px; background:linear-gradient(135deg,#3a4637,#1a201a); }
.fx-fade { opacity:.55; }.fx-rise { transform:translateY(-4px); box-shadow:0 6px 0 #2b3529; }.fx-pop { transform:scale(.82); box-shadow:0 0 0 5px rgba(216,255,103,.13); }.fx-type { background:repeating-linear-gradient(90deg,#344031 0 8px,#171c17 8px 12px)!important; }
.ve-coming-note { display:grid; gap:6px; margin-top:14px; }.ve-coming-note strong { font-size:10px; }.ve-coming-note span { color:var(--ve-muted); font-size:9px; line-height:1.55; }
.ve-stage-column { display:grid; grid-template-rows:42px minmax(0,1fr) 48px; min-width:0; min-height:0; overflow:hidden; background:#0e120e; }
.ve-canvas-toolbar,.ve-player-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 13px; border-bottom:1px solid var(--ve-line); background:#151a15; }
.ve-player-bar { border-top:1px solid var(--ve-line); border-bottom:0; }
.ve-canvas-actions,.ve-canvas-meta,.ve-player-left,.ve-player-right,.ve-timecode { display:flex; align-items:center; gap:7px; }
.ve-canvas-actions button { padding:5px 8px; border:0; border-radius:5px; background:transparent; color:var(--ve-muted); font-size:9px; cursor:pointer; }
.ve-canvas-actions button:hover { background:var(--ve-panel-2); color:var(--ve-text); }
.ve-canvas-meta { color:var(--ve-muted); font:400 8px/1 Consolas,monospace; }.ve-canvas-meta span+span:before { content:'·'; margin-right:7px; }
.ve-stage-wrap { position:relative; display:grid; place-items:center; min-height:0; overflow:hidden; padding:22px; background-color:#0b0e0b; background-image:linear-gradient(45deg,#111611 25%,transparent 25%),linear-gradient(-45deg,#111611 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#111611 75%),linear-gradient(-45deg,transparent 75%,#111611 75%); background-size:18px 18px; background-position:0 0,0 9px,9px -9px,-9px 0; }
.ve-stage-backdrop { position:absolute; inset:15% 20%; border-radius:50%; background:rgba(216,255,103,.04); filter:blur(40px); }
.ve-stage { position:relative; overflow:hidden; width:min(84%,900px); max-height:calc(100% - 8px); aspect-ratio:16/9; background:#101311; box-shadow:0 25px 85px rgba(0,0,0,.88),0 0 0 1px #3c463c; transform-origin:center; transition:aspect-ratio .24s,width .24s; }
.ve-stage-empty { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:5px; color:#687368; text-align:center; }.ve-stage-empty span { display:grid; place-items:center; width:42px; height:42px; margin-bottom:5px; border:1px solid #344034; border-radius:50%; }.ve-stage-empty strong { color:#8d998e; font-size:11px; }.ve-stage-empty p { margin:0; font-size:9px; }
.ve-stage-empty[hidden] { display:none; }
.ve-stage-item { position:absolute; transform-origin:center; user-select:none; cursor:move; }
.ve-stage-item img,.ve-stage-item video { width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ve-stage-item.is-selected { outline:2px solid var(--ve-lime); outline-offset:1px; }
.ve-stage-text { display:flex; align-items:center; justify-content:center; padding:12px; overflow:hidden; white-space:pre-wrap; line-height:1.08; }
.ve-stage-text.align-left { justify-content:flex-start; text-align:left; }.ve-stage-text.align-center { text-align:center; }.ve-stage-text.align-right { justify-content:flex-end; text-align:right; }
.ve-stage-text.fx-fade-in,.ve-stage-item.fx-fade-in { animation:ve-fade .5s ease both; }.ve-stage-text.fx-rise-in,.ve-stage-item.fx-rise-in { animation:ve-rise .55s cubic-bezier(.2,.8,.2,1) both; }.ve-stage-text.fx-pop-in { animation:ve-pop .4s cubic-bezier(.2,1.5,.4,1) both; }.ve-stage-item.fx-slide-in { animation:ve-slide .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ve-fade { from { opacity:0; } } @keyframes ve-rise { from { opacity:0; transform:translateY(12%); } } @keyframes ve-pop { from { opacity:0; transform:scale(.78); } }
@keyframes ve-slide { from { opacity:.4; translate:35% 0; } }
.ve-stage-item.look-warm img,.ve-stage-item.look-warm video { filter:sepia(.2) saturate(1.12) hue-rotate(-8deg); }.ve-stage-item.look-cool img,.ve-stage-item.look-cool video { filter:saturate(.95) hue-rotate(12deg) brightness(.96); }.ve-stage-item.look-mono img,.ve-stage-item.look-mono video { filter:grayscale(1) contrast(1.08); }.ve-stage-item.look-vivid img,.ve-stage-item.look-vivid video { filter:saturate(1.45) contrast(1.08); }.ve-stage-item.look-cinema img,.ve-stage-item.look-cinema video { filter:saturate(.82) contrast(1.17) brightness(.91); }.ve-stage-item.look-fade img,.ve-stage-item.look-fade video { filter:saturate(.72) contrast(.9) brightness(1.06); }
.ve-play-button { display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:50%; background:var(--ve-text); color:#111511; cursor:pointer; }.ve-play-button svg { width:16px; height:16px; stroke-width:2.4; }.ve-play-button .pause-icon,.ve-play-button.playing .play-icon { display:none; }.ve-play-button.playing .pause-icon { display:block; }
.ve-timecode { font:500 9px/1 Consolas,monospace; }.ve-timecode span { color:#657065; }.ve-timecode strong { min-width:54px; }
.ve-inspector-empty { display:grid; place-content:center; justify-items:center; gap:6px; min-height:100%; padding:30px; color:var(--ve-muted); text-align:center; }.ve-inspector-empty span { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--ve-line); border-radius:50%; }.ve-inspector-empty strong { margin-top:7px; color:var(--ve-text); font-size:12px; }.ve-inspector-empty p { max-width:190px; margin:0; font-size:9px; line-height:1.6; }
.ve-inspector-content { padding:17px 15px 24px; }.ve-inspector-head { display:flex; align-items:flex-start; justify-content:space-between; padding-bottom:15px; border-bottom:1px solid var(--ve-line); }.ve-inspector-head > div { display:grid; gap:4px; min-width:0; }.ve-inspector-head span { color:var(--ve-lime); font:500 8px/1 Consolas,monospace; letter-spacing:.1em; }.ve-inspector-head strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.ve-inspector-section { padding:15px 0; border-bottom:1px solid var(--ve-line); }.ve-inspector-section h3 { margin:0 0 11px; font-size:10px; }.ve-inspector textarea { padding:8px; }
.ve-filter-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:11px; }.ve-filter-strip button { display:grid; gap:5px; padding:5px; border:1px solid var(--ve-line); border-radius:7px; background:#111511; color:var(--ve-muted); font-size:7px; cursor:pointer; }.ve-filter-strip button.active { border-color:var(--ve-lime); color:var(--ve-text); }.ve-filter-strip i { display:block; height:27px; border-radius:4px; background:linear-gradient(135deg,#d98b5f,#37546a); }.ve-filter-strip button:nth-child(2) i { filter:sepia(.5) saturate(1.4); }.ve-filter-strip button:nth-child(3) i { filter:hue-rotate(25deg); }.ve-filter-strip button:nth-child(4) i { filter:grayscale(1); }.ve-filter-strip button:nth-child(5) i { filter:saturate(1.8); }.ve-filter-strip button:nth-child(6) i { filter:saturate(.7) contrast(1.3); }
.ve-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px; }.ve-field-grid label { display:grid; gap:5px; min-width:0; color:var(--ve-muted); font-size:8px; }.ve-field-grid input,.ve-field-grid select { width:100%; min-width:0; padding:0 7px; }.ve-field-grid input[type=color] { padding:4px; }.ve-secondary-wide { margin-top:10px; }
.ve-timeline-shell { position:relative; z-index:10; display:grid; grid-template-rows:42px minmax(0,1fr); min-height:0; overflow:hidden; border-top:1px solid var(--ve-line); background:#101410; }
.ve-timeline-toolbar { display:flex; align-items:center; justify-content:space-between; height:42px; padding:0 12px; border-bottom:1px solid var(--ve-line); }.ve-timeline-toolbar > div { display:flex; gap:5px; }.ve-tool-button { display:flex; align-items:center; gap:6px; height:30px; padding:0 9px; border:0; border-radius:6px; background:transparent; color:var(--ve-muted); font-size:9px; cursor:pointer; }.ve-tool-button:hover { background:var(--ve-panel-2); color:var(--ve-text); }.ve-tool-button svg { width:15px; height:15px; }
.ve-timeline-zoom { align-items:center; }.ve-timeline-zoom button { width:26px; height:26px; border:0; border-radius:5px; background:transparent; color:var(--ve-muted); cursor:pointer; }.ve-timeline-zoom input { width:100px; accent-color:var(--ve-lime); }
.ve-timeline { display:grid; grid-template-columns:var(--ve-label) minmax(0,1fr); min-height:0; overflow:hidden; }.ve-track-labels { min-height:max-content; padding-top:28px; overflow:hidden; border-right:1px solid var(--ve-line); background:#141914; }.ve-track-label { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:7px; height:51px; padding:0 8px; border-bottom:1px solid #242b24; color:var(--ve-muted); }.ve-track-label i { display:grid; place-items:center; width:25px; height:25px; border-radius:6px; background:#222922; color:#a5b0a5; font-style:normal; font-size:9px; }.ve-track-label strong { overflow:hidden; color:#bdc5bc; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.ve-track-label button { width:22px; height:22px; padding:0; border:0; background:transparent; color:#5e685e; cursor:pointer; }.ve-track-label button.muted { color:var(--ve-coral); }
.ve-timeline-scroll { min-width:0; min-height:0; overflow:scroll; overscroll-behavior:contain; scrollbar-width:auto; scrollbar-color:#596558 #111511; }.ve-timeline-content { position:relative; min-width:100%; min-height:max-content; width:max(100%,calc(var(--ve-duration,15) * var(--ve-px) + 80px)); }.ve-ruler { position:relative; height:28px; border-bottom:1px solid var(--ve-line); background:#121712; }.ve-ruler-mark { position:absolute; bottom:0; width:1px; height:8px; background:#3a433a; }.ve-ruler-mark.major { height:13px; }.ve-ruler-mark span { position:absolute; left:4px; top:-12px; color:#687268; font:400 8px Consolas,monospace; white-space:nowrap; }
.ve-app.timeline-collapsed { grid-template-rows:58px minmax(0,1fr) 82px; }.ve-app.timeline-collapsed .ve-timeline-shell { grid-template-rows:42px 40px; }.ve-app.timeline-collapsed .ve-timeline { opacity:.45; pointer-events:none; }.ve-app.timeline-collapsed #timelineToggleButton { transform:rotate(180deg); }
.ve-track-lane { position:relative; height:51px; border-bottom:1px solid #252c25; background-image:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:var(--ve-px) 100%; }.ve-track-lane.drag-over { background-color:rgba(216,255,103,.06); }
.ve-clip { position:absolute; top:5px; bottom:5px; display:flex; align-items:center; min-width:12px; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:6px; color:#111; cursor:grab; user-select:none; box-shadow:0 2px 6px rgba(0,0,0,.22); }.ve-clip:active { cursor:grabbing; }.ve-clip.selected { outline:2px solid var(--ve-text); outline-offset:1px; }.ve-clip.video { background:#7fb9ff; }.ve-clip.image { background:#e3a5ff; }.ve-clip.text { background:var(--ve-lime); }.ve-clip.audio { background:#ff956e; }.ve-clip-label { position:relative; z-index:1; overflow:hidden; padding:0 9px; font-size:8px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.ve-clip-wave { position:absolute; inset:0; opacity:.23; background:repeating-linear-gradient(90deg,transparent 0 5px,currentColor 5px 7px,transparent 7px 11px); }.ve-clip-handle { position:absolute; z-index:2; top:0; bottom:0; width:6px; cursor:ew-resize; }.ve-clip-handle.left { left:0; }.ve-clip-handle.right { right:0; }
.ve-playhead { position:absolute; z-index:20; top:0; bottom:0; left:0; width:1px; background:var(--ve-coral); pointer-events:none; }.ve-playhead i { position:absolute; top:0; left:-5px; width:11px; height:9px; border-radius:2px 2px 5px 5px; background:var(--ve-coral); }
.ve-dialog { max-width:none; padding:0; border:1px solid #3b453b; border-radius:15px; background:#171c17; color:var(--ve-text); box-shadow:0 32px 100px #000; }.ve-dialog::backdrop { background:rgba(5,7,5,.84); backdrop-filter:blur(10px); }.ve-dialog form { position:relative; margin:0; }.ve-dialog-close { position:absolute; z-index:2; top:13px; right:13px; width:32px; height:32px; border:0; border-radius:50%; background:#242b24; color:#9ba59b; font-size:21px; cursor:pointer; }
.ve-welcome { width:min(900px,calc(100vw - 30px)); background:linear-gradient(125deg,#151a15 0 51%,#1e251d 51%); }.ve-welcome form { display:grid; grid-template-columns:1.08fr .92fr; min-height:530px; }.ve-welcome-copy { display:flex; flex-direction:column; justify-content:flex-end; padding:55px; background:radial-gradient(circle at 20% 25%,rgba(216,255,103,.14),transparent 28%),linear-gradient(145deg,transparent 35%,rgba(126,183,255,.05)); }.ve-welcome-mark { display:flex; margin-bottom:auto; }.ve-welcome-mark i { width:13px; height:34px; }.ve-welcome-copy h1 { margin:0 0 20px; font-size:clamp(35px,5vw,62px); line-height:.97; letter-spacing:-.055em; }.ve-welcome-copy p { max-width:41ch; margin:0; color:#a8b2a7; font-size:12px; line-height:1.7; }.ve-start-options { display:flex; flex-direction:column; justify-content:center; gap:9px; padding:48px 42px; }.ve-start-card { position:relative; display:grid; justify-items:start; gap:4px; width:100%; padding:16px 17px 16px 50px; border:1px solid #394239; border-radius:10px; background:#171d17; text-align:left; cursor:pointer; }.ve-start-card:hover,.ve-start-card.featured { border-color:#72806f; background:#222a20; }.ve-start-card > span { position:absolute; left:16px; top:18px; color:var(--ve-lime); font:500 9px Consolas,monospace; }.ve-start-card strong { font-size:12px; }.ve-start-card small { color:var(--ve-muted); font-size:9px; }.ve-ratio-picker { display:grid; grid-template-columns:1fr repeat(4,auto); align-items:center; gap:5px; margin-top:10px; }.ve-ratio-picker > span { color:var(--ve-muted); font-size:9px; }.ve-ratio-picker button { min-width:43px; height:29px; border:1px solid #394239; border-radius:6px; background:transparent; color:#8e998e; font:500 8px Consolas,monospace; cursor:pointer; }.ve-ratio-picker button.active { border-color:var(--ve-lime); color:var(--ve-lime); }
.ve-projects-dialog,.ve-export-dialog { width:min(540px,calc(100vw - 28px)); }.ve-projects-dialog form,.ve-export-dialog form { padding:25px; }.ve-dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }.ve-dialog-heading span { color:var(--ve-lime); font:500 8px Consolas,monospace; letter-spacing:.12em; }.ve-dialog-heading h2 { margin:5px 0 0; font-size:24px; letter-spacing:-.04em; }.ve-dialog-heading .ve-dialog-close { position:static; }
.ve-project-list { display:grid; gap:8px; max-height:350px; margin-bottom:14px; overflow:auto; }.ve-project-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:13px; border:1px solid var(--ve-line); border-radius:9px; background:#111511; cursor:pointer; }.ve-project-row:hover { border-color:#697569; }.ve-project-row strong { display:block; overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.ve-project-row span { color:var(--ve-muted); font:400 8px Consolas,monospace; }.ve-project-row button { border:0; background:transparent; color:#8d998e; cursor:pointer; }
.ve-export-preview { display:flex; align-items:center; justify-content:space-between; padding:14px; border:1px solid var(--ve-line); border-radius:9px; background:#111511; }.ve-export-preview div { display:grid; gap:5px; }.ve-export-preview strong { font-size:12px; }.ve-export-preview span { color:var(--ve-muted); font:400 8px Consolas,monospace; }.ve-export-preview i { padding:7px 8px; border-radius:6px; background:var(--ve-lime); color:#111511; font:800 9px Bahnschrift,"Segoe UI",sans-serif; font-style:normal; }.ve-export-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:13px 0; }.ve-export-fields label { display:grid; gap:6px; color:var(--ve-muted); font-size:9px; }.ve-export-fields select { width:100%; padding:0 8px; }.ve-export-confirm { min-height:44px; }.ve-render-progress { margin-top:15px; }.ve-render-progress div { display:flex; justify-content:space-between; margin-bottom:7px; font-size:9px; }.ve-render-progress strong { font:500 9px Consolas,monospace; }.ve-render-progress progress { width:100%; height:7px; border:0; }.ve-render-progress progress::-webkit-progress-bar { border-radius:5px; background:#2a312a; }.ve-render-progress progress::-webkit-progress-value { border-radius:5px; background:var(--ve-lime); }.ve-download-button { display:grid; place-items:center; margin-top:12px; background:var(--ve-blue); color:#101510; text-decoration:none; }
.ve-full-preview { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; overflow:hidden; border:0; background:#080b08; color:var(--ve-text); }.ve-full-preview::backdrop { background:#080b08; }.ve-preview-shell { display:grid; grid-template-rows:64px minmax(0,1fr) 100px; width:100%; height:100%; background:radial-gradient(circle at 50% 42%,#20281d 0,transparent 38%),#080b08; }.ve-preview-head { display:flex; align-items:center; justify-content:space-between; padding:0 22px; border-bottom:1px solid #283027; background:rgba(10,13,10,.92); }.ve-preview-head div { display:grid; gap:5px; }.ve-preview-head span { color:var(--ve-lime); font:600 9px Consolas,monospace; letter-spacing:.13em; }.ve-preview-head strong { font-size:14px; }.ve-preview-head button { width:38px; height:38px; border:1px solid #344034; border-radius:50%; background:#171d17; color:#d9e0d6; font-size:25px; cursor:pointer; }.ve-preview-viewport { position:relative; display:grid; place-items:center; min-height:0; overflow:hidden; padding:24px; }.ve-preview-viewport .ve-stage { width:auto; max-width:100%; height:100%; max-height:100%; box-shadow:0 30px 100px #000,0 0 0 1px #4b574a; transform:none!important; }.ve-preview-viewport .ve-stage-item { cursor:default; pointer-events:none; }.ve-preview-viewport .ve-stage-item.is-selected { outline:0; }.ve-preview-controls { display:grid; align-content:center; gap:13px; padding:12px 22px 18px; border-top:1px solid #283027; background:rgba(10,13,10,.94); }.ve-preview-controls input { width:100%; height:4px; accent-color:var(--ve-lime); cursor:pointer; }.ve-preview-control-row,.ve-preview-control-row>div { display:flex; align-items:center; justify-content:space-between; gap:10px; }.ve-preview-control-row>div { min-width:150px; justify-content:flex-start; }.ve-preview-control-row button { display:grid; place-items:center; width:38px; height:38px; padding:0; border:0; border-radius:50%; background:transparent; color:#c4cec1; cursor:pointer; }.ve-preview-control-row button:hover { background:#232b21; color:#fff; }.ve-preview-control-row svg { width:19px; height:19px; }.ve-preview-control-row .ve-preview-play { width:44px; height:44px; background:var(--ve-lime); color:#111511; }.ve-preview-control-row .ve-preview-play svg { width:21px; height:21px; }.ve-preview-play .play-icon,.ve-preview-play.paused .pause-icon { display:none; }.ve-preview-play.paused .play-icon { display:block; }.ve-preview-control-row>strong { display:flex; gap:8px; color:#d9e0d6; font:500 11px Consolas,monospace; }.ve-preview-control-row>strong i { color:#657063; font-style:normal; }
.ve-toast { position:fixed; z-index:200; left:50%; bottom:26px; max-width:min(440px,calc(100vw - 30px)); padding:10px 14px; border:1px solid #4b574b; border-radius:8px; background:#252d24; color:#edf2e9; font-size:10px; box-shadow:0 10px 40px #000; opacity:0; transform:translate(-50%,12px); pointer-events:none; transition:.18s ease; }.ve-toast.show { opacity:1; transform:translate(-50%,0); }.ve-toast.error { border-color:#8c4b3e; background:#3b211c; }
@media (max-width:1150px) { .ve-main { grid-template-columns:65px 260px minmax(340px,1fr); }.ve-inspector { position:fixed; z-index:30; top:58px; right:0; bottom:clamp(220px,35vh,330px); width:320px; transform:translateX(100%); transition:.2s; box-shadow:-20px 0 50px rgba(0,0,0,.4); }.ve-inspector.open { transform:none; }.ve-inspector .ve-drawer-close { display:block; }.ve-app.timeline-collapsed .ve-inspector { bottom:82px; } }
@media (max-width:800px) {
  .ve-body { overflow:hidden; }
  .ve-app { grid-template-rows:54px minmax(0,1fr) clamp(190px,34dvh,290px); width:100%; min-width:0; height:100dvh; min-height:0; }
  .ve-topbar { z-index:40; grid-template-columns:minmax(0,1fr) auto; padding:0 9px; }
  .ve-history-actions,.ve-save-state,.ve-quiet-button,.ve-divider,.ve-brand span { display:none; }
  .ve-brand-group { gap:6px; }.ve-project-name { max-width:128px; font-size:11px; }.ve-preview-button { width:40px; padding:0; justify-content:center; }.ve-preview-button span,.ve-export-button span { display:none; }.ve-export-button { width:40px; padding:0; justify-content:center; }
  .ve-main { position:relative; display:block; }
  .ve-tool-rail { position:absolute; z-index:24; right:8px; bottom:8px; left:8px; display:grid; grid-template-columns:repeat(6,1fr); gap:3px; padding:5px; border:1px solid #333d32; border-radius:12px; background:rgba(16,20,16,.94); box-shadow:0 14px 40px rgba(0,0,0,.45); backdrop-filter:blur(12px); }.ve-tool-rail button { width:auto; min-height:48px; padding:5px 2px; font-size:7px; }.ve-tool-rail svg { width:18px; height:18px; }
  .ve-library { position:fixed; z-index:35; top:54px; bottom:0; left:0; width:min(360px,92vw); padding-bottom:18px; border-right:1px solid var(--ve-line); box-shadow:18px 0 60px rgba(0,0,0,.55); transform:translateX(-102%); transition:transform .2s ease; }
  .ve-library.open { transform:none; }
  .ve-library .ve-drawer-close { display:block; }.ve-stage-column { width:100%; height:100%; padding-bottom:66px; grid-template-rows:38px minmax(0,1fr) 48px; }.ve-stage-wrap { padding:10px; }.ve-canvas-meta { display:none; }.ve-canvas-actions button { font-size:8px; }
  .ve-stage { width:94%; max-height:96%; }.ve-player-bar { padding-inline:7px; }.ve-player-right .ve-icon-button:first-child { display:none; }
  .ve-inspector { top:54px; bottom:0; width:min(360px,92vw); }
  .ve-timeline-toolbar { height:38px; padding-inline:5px; }.ve-tool-button { padding:0 6px; }.ve-tool-button span { display:none; }.ve-timeline-zoom input { width:70px; }
  .ve-timeline-shell { grid-template-rows:38px minmax(0,1fr); }.ve-timeline { --ve-label:92px; }.ve-track-labels { padding-top:28px; }.ve-track-label { grid-template-columns:22px minmax(0,1fr); gap:4px; padding:0 4px; }.ve-track-label i { width:21px; height:21px; }.ve-track-label strong { font-size:7px; }.ve-track-label button { display:none; }
  .ve-app.timeline-collapsed { grid-template-rows:54px minmax(0,1fr) 76px; }.ve-app.timeline-collapsed .ve-timeline-shell { grid-template-rows:38px 38px; }.ve-app.timeline-collapsed .ve-inspector { bottom:0; }
  .ve-clip-label { padding-inline:6px; font-size:7px; }
  .ve-preview-shell { grid-template-rows:56px minmax(0,1fr) 112px; }.ve-preview-head { padding:0 13px; }.ve-preview-viewport { padding:10px; }.ve-preview-controls { padding:12px 13px 17px; }.ve-preview-control-row>div { min-width:auto; }.ve-preview-control-row>strong { font-size:9px; }
  .ve-welcome { max-height:calc(100svh - 20px); overflow:auto; background:#171c17; }.ve-welcome form { grid-template-columns:1fr; }.ve-welcome-copy { min-height:230px; padding:28px; }.ve-welcome-copy h1 { font-size:38px; }.ve-welcome-mark { margin-bottom:35px; }.ve-start-options { padding:24px 26px 28px; }.ve-ratio-picker { grid-template-columns:1fr repeat(2,auto); }.ve-ratio-picker button { min-width:48px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }