#vp-editor { position:fixed; inset:0; z-index:12000; box-sizing:border-box; background:#000; color:#fff; font:400 14px/1.3 var(--font-sans,system-ui); display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top,0px) + 12px) max(24px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 12px) max(24px,env(safe-area-inset-left,0px)); overflow:hidden; }
#vp-editor * { box-sizing:border-box; }
#vp-editor button { color:inherit; font:inherit; cursor:pointer; }
#vp-editor button:disabled { opacity:.35; cursor:default; }
#vp-editor button:focus-visible,#vp-editor input:focus-visible { outline:2px solid #e4b3f5; outline-offset:2px; }
#vp-editor .vp-header { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-shrink:0; }
#vp-editor .vp-title { font-size:16px; font-weight:600; margin:0; }
#vp-editor .vp-round { flex:none; width:44px; height:44px; min-width:0; padding:10px; border:1px solid #ffffff33; border-radius:50%; background:#ffffff19; display:inline-flex; align-items:center; justify-content:center; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
#vp-editor .vp-round svg,#vp-editor .vp-tool svg { width:22px; height:22px; display:block; flex:none; }
#vp-editor .vp-accent { background:#009cff; border-color:#4acfff; }
#vp-editor .vp-preview { flex:1 1 0; min-height:100px; position:relative; margin:12px 0 8px; display:flex; align-items:center; justify-content:center; overflow:hidden; container-type:size; }
#vp-editor .vp-preview canvas,#vp-editor .vp-preview video { width:100%; height:100%; object-fit:contain; }
#vp-editor .vp-preview video { position:absolute; inset:0; }
#vp-editor .vp-clock { color:#aaa; font-size:11px; flex:none; margin-bottom:4px; }
#vp-editor .vp-transport { display:flex; gap:2px; align-items:center; flex-shrink:0; }
#vp-editor .vp-space { flex:1; }
#vp-editor .vp-timeline { flex:0 1 165px; min-height:100px; overflow:auto; margin:16px 0; position:relative; scrollbar-width:thin; }
#vp-editor .vp-lanes { min-width:100%; position:relative; padding-bottom:18px; }
#vp-editor .vp-ruler { height:42px; position:sticky; top:0; z-index:6; border:1px solid #ffffff29; border-radius:12px; background:#101010; cursor:crosshair; }
#vp-editor .vp-tick { position:absolute; top:10px; transform:translateX(-50%); color:#aaa; font-size:10px; white-space:nowrap; }
#vp-editor .vp-tick::after { content:''; width:1px; height:8px; background:#aaa; display:block; margin:6px auto 0; }
#vp-editor .vp-clips { display:block; margin:14px 0; }
#vp-editor .vp-clip-wrap { position:relative; flex:none; min-width:12px; height:60px; margin-bottom:8px; }
#vp-editor .vp-clip { position:relative; width:100%; height:100%; padding:0; min-width:0; border:2px solid #ffffff44; border-radius:8px; background:#37303f; color:#fff; overflow:hidden; }
#vp-editor .vp-trim-handle { position:absolute; top:0; bottom:0; width:18px; min-width:0; padding:0; border:0; border-radius:6px; background:#e7b7f8; color:#25172b; cursor:ew-resize; touch-action:none; z-index:3; }
#vp-editor .vp-trim-handle::after { content:''; display:block; width:2px; height:22px; margin:auto; background:currentColor; border-radius:2px; }
#vp-editor .vp-trim-start { left:0; }
#vp-editor .vp-trim-end { right:0; }
#vp-editor .vp-clip[aria-pressed=true],#vp-editor .vp-layer[aria-pressed=true] { border-color:#e7b7f8; box-shadow:inset 0 0 0 1px #e7b7f8; }
#vp-editor .vp-clip img { width:100%; height:100%; object-fit:cover; opacity:.7; }
#vp-editor .vp-clip span { position:absolute; top:2px; left:3px; background:#0007; font-size:10px; white-space:nowrap; }
#vp-editor .vp-clip,#vp-editor .vp-layer { touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab; }
#vp-editor .vp-clip img { pointer-events:none; -webkit-user-drag:none; }
#vp-editor .vp-dragging { opacity:.75; z-index:5; }
#vp-editor .vp-dragging .vp-clip,#vp-editor .vp-layer.vp-dragging { cursor:grabbing; border-color:#fff; }
#vp-editor .vp-add-clip { border-radius:8px; width:36px; height:44px; margin:0 0 8px; background:#443449; }
#vp-editor .vp-layer { display:block; position:relative; height:34px; margin:7px 0; padding:4px 6px; border-radius:8px; border:2px solid #b99bcb; background:#493850; text-align:left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#vp-editor .vp-layer-wrap { position:relative; height:36px; min-width:12px; margin:8px 0; }
#vp-editor .vp-layer-wrap .vp-layer { width:100%; height:100%; margin:0; }
#vp-editor .vp-playhead { position:absolute; top:0; bottom:0; width:2px; background:white; pointer-events:none; z-index:2; }
#vp-editor .vp-tool-header { display:flex; align-items:center; justify-content:space-between; padding:10px 0; flex:none; }
#vp-editor .vp-tool-header:empty { display:none; }
#vp-editor .vp-dock { display:flex; flex:none; overflow-x:auto; gap:2px; border:1px solid #ffffff22; border-radius:36px; background:#ffffff0f; padding:5px; margin:6px 0; scrollbar-width:none; }
#vp-editor .vp-tool { flex:0 0 72px; width:72px; min-width:72px; min-height:68px; padding:4px 0; border:1px solid transparent; border-radius:28px; background:none; display:flex; flex-direction:column; align-items:center; gap:2px; }
#vp-editor .vp-tool-face { width:40px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:25px; }
#vp-editor .vp-tool-label { min-height:26px; font-size:11px; line-height:13px; text-align:center; }
#vp-editor .vp-tool[aria-pressed=true] { border-color:#ffffff77; background:#ffffff2b; }
#vp-editor .vp-panel { flex:0 1 auto; min-height:0; max-height:min(250px,38%); overflow-y:auto; overscroll-behavior:contain; padding:0 0 6px; scrollbar-width:thin; }
#vp-editor .vp-panel:empty { display:none; }
#vp-editor .vp-fields { display:flex; flex-direction:column; gap:8px; padding:0 0 6px; }
#vp-editor .vp-fields:empty { display:none; }
#vp-editor .vp-slider { display:flex; flex-direction:row; align-items:center; gap:8px; color:#ccc; font-size:12px; width:100%; }
#vp-editor .vp-field-title { flex:0 0 82px; }
#vp-editor .vp-readout { color:#aaa; font-size:11px; width:42px; flex:none; text-align:right; font-variant-numeric:tabular-nums; }
#vp-editor input[type=range] { appearance:none; -webkit-appearance:none; flex:1; min-width:0; height:40px; margin:0; padding:0; background:transparent; border:0; }
#vp-editor input[type=range]::-webkit-slider-runnable-track { background:#777; height:3px; border-radius:2px; }
#vp-editor input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; background:#fff; border:0; width:24px; height:24px; border-radius:50%; margin-top:-10.5px; }
#vp-editor input[type=range]::-moz-range-track { background:#777; height:3px; border-radius:2px; }
#vp-editor input[type=range]::-moz-range-thumb { background:#fff; border:0; width:24px; height:24px; border-radius:50%; }
#vp-editor .vp-number { display:flex; flex-direction:column; gap:6px; color:#ccc; font-size:12px; }
#vp-editor input:not([type=range]),#vp-editor select { width:100%; min-width:0; min-height:44px; padding:8px 12px; border-radius:16px; background:#ffffff12; border:1px solid #ffffff30; color:#fff; font:inherit; }
#vp-editor .vp-dim { font-size:11px; color:#aaa; padding:0; margin:6px 0; }
#vp-editor .vp-preview-expand { position:absolute; bottom:8px; right:8px; }
#vp-editor.vp-tuning .vp-timeline,#vp-editor.vp-tuning .vp-transport button[aria-label^="Zoom"] { display:none; }
#vp-editor [hidden] { display:none !important; }
#vp-editor option { color:#fff; background:#222; }
#vp-editor .vp-status { font-size:12px; color:#dba8ef; flex:none; text-align:center; margin:6px 0; }
#vp-editor .vp-status:empty { display:none; }
#vp-editor .vp-error { color:#ff8585; }
#vp-editor.vp-fullscreen .vp-timeline,#vp-editor.vp-fullscreen:not(.vp-tuning) .vp-panel,#vp-editor.vp-fullscreen:not(.vp-tuning) .vp-tool-header { display:none; }
#vp-editor.vp-fullscreen .vp-transport button[aria-label^="Zoom"],#vp-editor.vp-fullscreen .vp-transport button[aria-label^="Undo"],#vp-editor.vp-fullscreen .vp-transport button[aria-label^="Redo"] { display:none; }
@media (min-width:760px) { #vp-editor { padding-left:max(24px,calc((100vw - 780px)/2)); padding-right:max(24px,calc((100vw - 780px)/2)); } #vp-editor .vp-timeline { flex-basis:190px; } }
@media (max-width:389px) { #vp-editor .vp-transport .vp-round { width:calc((100vw - 60px)/7); height:calc((100vw - 60px)/7); max-width:44px; max-height:44px; padding:6px; } }
@media (max-height:650px) { #vp-editor .vp-timeline { flex-basis:108px; min-height:95px; margin:8px 0; } #vp-editor .vp-ruler { height:30px; } #vp-editor .vp-tick { top:5px; } #vp-editor .vp-tick::after { height:5px; margin-top:3px; } #vp-editor .vp-clips { margin:8px 0; } #vp-editor .vp-clip-wrap { height:40px; } #vp-editor .vp-panel { max-height:190px; } }
@media (max-height:460px) and (min-width:600px) {
 #vp-editor { display:grid; grid-template-columns:minmax(180px,1fr) minmax(250px,1fr); grid-template-rows:44px minmax(0,1fr) 16px 44px; column-gap:20px; padding:8px 16px; }
 #vp-editor > .vp-header { grid-column:1; grid-row:1; }
 #vp-editor .vp-preview { grid-column:1; grid-row:2; margin:6px 0; min-height:70px; }
 #vp-editor .vp-clock { grid-column:1; grid-row:3; }
 #vp-editor .vp-transport { grid-column:1; grid-row:4; }
 #vp-editor .vp-tool-header { grid-column:2; grid-row:1; padding:0; }
 #vp-editor .vp-timeline { grid-column:2; grid-row:2; margin:8px 0; min-height:0; }
 #vp-editor .vp-panel { grid-column:2; grid-row:3 / 5; max-height:none; padding:0; }
 #vp-editor.vp-editing .vp-panel { grid-row:2 / 5; }
 #vp-editor.vp-editing:not(.vp-tuning) .vp-timeline { display:none; }
 #vp-editor .vp-status { position:absolute; bottom:0; left:0; right:0; background:#000d; }
}

#vp-editor .vp-gesture { position:absolute; pointer-events:none; width:min(100cqw,calc(100cqh * var(--vp-aspect))); height:min(100cqh,calc(100cqw / var(--vp-aspect))); left:50%; top:50%; transform:translate(-50%,-50%); }
#vp-editor .vp-gesture-box { position:absolute; border:1px dashed #fff; pointer-events:auto; cursor:move; touch-action:none; }
#vp-editor .vp-crop-box { border-style:solid; box-shadow:0 0 0 1200px #0007; }
#vp-editor .vp-crop-box::before,#vp-editor .vp-crop-box::after { content:''; position:absolute; inset:33.333% 0; border-top:1px solid #ffffff55; border-bottom:1px solid #ffffff55; pointer-events:none; }
#vp-editor .vp-crop-box::after { inset:0 33.333%; border:0; border-left:1px solid #ffffff55; border-right:1px solid #ffffff55; }
#vp-editor .vp-corner { position:absolute; width:44px; height:44px; max-width:45%; max-height:45%; padding:0; border:0; border-radius:0; background:transparent; cursor:nwse-resize; touch-action:none; }
#vp-editor .vp-corner::after { content:''; position:absolute; width:14px; height:14px; border:solid #fff; border-width:0; }
#vp-editor .vp-top-left { top:0;left:0; } #vp-editor .vp-top-left::after { top:0;left:0;border-top-width:3px;border-left-width:3px; }
#vp-editor .vp-top-right { top:0;right:0;cursor:nesw-resize; } #vp-editor .vp-top-right::after { top:0;right:0;border-top-width:3px;border-right-width:3px; }
#vp-editor .vp-bottom-left { bottom:0;left:0;cursor:nesw-resize; } #vp-editor .vp-bottom-left::after { bottom:0;left:0;border-bottom-width:3px;border-left-width:3px; }
#vp-editor .vp-bottom-right { bottom:0;right:0; } #vp-editor .vp-bottom-right::after { bottom:0;right:0;border-bottom-width:3px;border-right-width:3px; }

#vp-editor .vp-effect-thumbnail { width:50px;height:50px;border-radius:16px;overflow:hidden; }
#vp-editor .vp-effect-thumbnail img { width:100%;height:100%;object-fit:cover; }
#vp-editor .vp-preview:has(.vp-gesture:not([hidden])) .vp-preview-expand { right:50%; transform:translateX(50%); }

#vp-editor .vp-rotate-layer { position:absolute; left:50%; top:0; transform:translateX(-50%); }

#vp-editor textarea { width:100%;min-height:72px;max-height:100px;resize:vertical;font:inherit;color:#fff;background:#ffffff12;border:1px solid #ffffff30;border-radius:16px;padding:12px; }