@coppsary/motionly 1.0.1 → 1.1.0

package/motionly-skills/skills/templates/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Templates"
+  short_description: "Plan production-ready motion stories"
+  default_prompt: "Use $templates to plan a polished Motionly animation from this brief."

package/motionly-skills/skills/timeline/SKILL.md

@@ -0,0 +1,57 @@
+---
+name: timeline
+description: Organize, sequence, trim, and retime Motionly timelines. Use for tracks, clips, start/duration, trimIn/trimOut, overlaps, layer order, narration synchronization, audio placement, keyframe timing, clip transitions, and timeline troubleshooting.
+---
+
+# Timeline
+
+Treat visual tracks as simple persisted layers. Horizontal movement changes time; vertical movement selects a layer. Overlaps are allowed and never ripple neighboring clips automatically. Audio stays on the bottom audio track.
+
+## Build A Timing Map
+
+For each shot record purpose, focal subject, entrance, readable hold, exit, and transition. Derive exact media and audio duration from the files when available.
+
+```text
+0.0–2.8  Promise: title enters, holds, exits
+2.6–6.4  Product proof: video clip + one callout
+6.2–8.0  Brand close: logo resolve + CTA
+```
+
+Small overlaps are deliberate transition handles; unexplained overlaps are bugs.
+
+## Tracks And Clips
+
+```motion
+track product {
+  label "Product"
+  role main
+  content video
+  order 0
+}
+
+track callouts {
+  label "Callouts"
+  role overlay
+  content mixed
+  order 1
+}
+
+clip demo {
+  track product
+  start 2.6s
+  duration 3.8s
+  trimIn 1.2s
+  trimOut 0s
+}
+```
+
+## Retime Safely
+
+- Move a whole layer when its keyframes should move with it.
+- Trim visibility without silently rescaling animation keyframes.
+- Change `duration` when pacing changes; verify percentage keyframes after the edit.
+- Keep narration-aligned entrances on their spoken phrase.
+- Preserve audio `start` through save/reload and export.
+- Import the same video under two aliases if simultaneous clips need different source times.
+
+After changes, scrub cut boundaries, transitions, clip starts/ends, and the final frame. Confirm track assignments and timing survive parse/serialize/parse.

package/motionly-skills/skills/timeline/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Timeline"
+  short_description: "Organize clips timing and sequencing"
+  default_prompt: "Use $timeline to organize this Motionly timeline and sequence."

package/motionly-skills/skills/transitions/SKILL.md

@@ -0,0 +1,45 @@
+---
+name: transitions
+description: Choose and author Motionly scene and clip transitions. Use for scene changes, crossfades, wipes, iris reveals, dynamic slides, speed zooms, exits, continuity, and fixing abrupt cuts or stacked transition effects.
+---
+
+# Transitions
+
+Use a transition to express a relationship between shots: continuity, replacement, reveal, escalation, or closure. A normal cut is valid when motion inside the shots already carries the change.
+
+## Selection Map
+
+- `shapeWipe`: decisive replacement or brand-color scene change.
+- `irisWipe`: focus into/out of a circular subject.
+- `maskReveal`: media enters through a controlled edge.
+- `dynamicSlide`: supporting panel continues directional flow.
+- `speedZoom`: short escalation or product-to-detail cut, once.
+- Clip `crossfade`: two touching media clips on the same track.
+
+## Clip Crossfade
+
+```motion
+clip outgoing {
+  track hero
+  start 0s
+  duration 3s
+  transitionOut crossfade
+  transitionOutDuration 450ms
+}
+
+clip incoming {
+  track hero
+  start 3s
+  duration 3s
+  transitionIn crossfade
+  transitionInDuration 450ms
+}
+```
+
+Pair both sides with the same duration. Do not use a crossfade to hide mismatched composition if a clean cut or purposeful wipe communicates better.
+
+## Timing
+
+Start exits slightly before the transition covers them. Keep most transitions between `450–900ms`. Inspect frames around every boundary for flashes, stale layers, blank gaps, and unreadable overlapping copy.
+
+Prefer one strong transition per real scene change. Stacking a wipe, spin, zoom, and blur weakens the visual grammar.

package/motionly-skills/skills/transitions/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Transitions"
+  short_description: "Design meaningful scene transitions"
+  default_prompt: "Use $transitions to choose a meaningful Motionly transition."

package/motionly-skills/skills/typography/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: typography
+description: Design and animate readable Motionly typography. Use for titles, captions, kinetic type, narration-synced copy, word/character reveals, typewriter effects, numeric callouts, hierarchy, line breaks, font sizing, tracking, and text timing.
+---
+
+# Typography
+
+Preserve exact supplied copy. Split text for layout or timing without paraphrasing unless the user permits edits.
+
+## Choose The Reveal
+
+- Key promise: `keynoteText` or `wordReveal` with restrained word stagger.
+- Short energetic phrase: `charReveal`, `60–80ms` stagger.
+- Editorial headline: `splitReveal` or `maskReveal` by line.
+- Technical label: `fadeUp` or `softReveal`.
+- Typed interface moment: `typewriter`, used once.
+- Metric: `countUp` with a stable label and enough hold to read the result.
+
+```motion
+text title {
+  value "Build momentum, not busywork."
+  center
+  y -80
+  size 92
+  weight 760
+  tracking -1
+  color #f8fafc
+  textAnimation "keynoteText(split words stagger 90ms duration 800ms delay 600ms ease power3.out exitAt 4.6s exitDuration 420ms)"
+}
+```
+
+## Readability
+
+- Keep short headline holds at least one second after the full reveal.
+- Give narration-matched text time to remain visible through the spoken phrase.
+- Make exits faster than entrances and clear old copy before conflicting copy arrives.
+- Reduce size or split lines before allowing clipping or media overlap.
+- Use weight, scale, contrast, and timing for hierarchy before adding decorative motion.
+
+## Kinetic Type Pattern
+
+Reveal the decisive noun or verb last, with stronger scale or color, while the rest settles quietly. Do not animate every word differently; the audience should read a sentence, not decode an effect demo.

package/motionly-skills/skills/typography/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Typography"
+  short_description: "Animate readable expressive typography"
+  default_prompt: "Use $typography to choreograph readable animated type."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coppsary/motionly",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "license": "Apache-2.0",
   "type": "module",
   "bin": {
@@ -10,6 +10,7 @@
     "dist",
     "bin",
     "templates",
+    "motionly-skills",
     "README.md",
     "LICENSE"
   ],
@@ -36,10 +37,14 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@lottiefiles/dotlottie-web": "^0.78.0",
     "@vercel/analytics": "2.0.1",
+    "canvg": "^4.0.3",
+    "gifuct-js": "^2.1.2",
     "gsap": "^3.15.0",
     "lucide-svelte": "^1.0.1",
     "motion": "^12.42.2",
+    "mp4box": "^2.4.1",
     "svelte": "^5.56.4",
     "svelvet": "^11.0.5"
   },

package/templates/motionly-skill/SKILL.md

@@ -7,12 +7,36 @@ description: Create, edit, validate, and preview editable Motionly .motion anima
 
 Motionly is a visual motion-graphics editor. Its editable source is `project.motion`; normal users refine it in the editor rather than hand-writing it. Keep generated source readable and load it through Motionly's parser and renderer.
 
+## Deep reference library
+
+This skill ships a full reference library beside this file at `references/`. This
+SKILL.md is only the quick contract — **before any non-trivial `.motion` work,
+open `references/llms.txt` and load the focused skills it lists**, then follow
+`references/AGENTS.md` for routing by intent:
+
+- `references/skills/motion-dsl/SKILL.md` — canvas, imports, elements, tracks, clips, audio, animations, keyframes, validation (load this first for any authoring or repair)
+- `references/skills/svg/SKILL.md` — logos, icons, diagrams, vector artwork, drawSVG, fill/stroke, local zoom/pan
+- `references/skills/animation/SKILL.md` and `references/skills/easing/SKILL.md` — choreography, presets, keyframes, timing
+- `references/skills/camera/SKILL.md` — global camera vs. local artwork focus
+- `references/skills/composition/SKILL.md` — hierarchy, spacing, color, brand, scene review
+- `references/skills/typography/SKILL.md` — titles, captions, kinetic type, narration timing
+- `references/skills/transitions/SKILL.md` — scene changes, wipes, crossfades, continuity
+- `references/skills/timeline/SKILL.md` — tracks, clips, trim, retime, overlap, audio placement
+- `references/skills/assets/SKILL.md` — PNG/JPEG, SVG, GIF, MP4, WebM, MOV, Lottie, codecs
+- `references/skills/rendering/SKILL.md` — preview, scrub, export, inspection, limitations
+- `references/skills/templates/SKILL.md` — product launch, logo reveal, diagram, social-stat storyboards
+
+Load only the topics the current task needs. The library is authoritative when it
+is more detailed than the summary below.
+
 ## Project and asset workflow
 
 - Read `AGENTS.md`, `project.motion`, and relevant files in `assets/` before editing.
 - Reference media by filename under `assets/`: `import "./assets/logo.svg" as logo`.
 - Keep filenames stable. A browser upload with the same filename resolves the same import. If its size or dimensions differ significantly, ask before replacing it.
 - Preserve aspect ratio by setting only `width` or `height`.
+- Treat MP4, WebM, MOV/M4V, GIF, animated SVG, and Lottie as animated media. Preserve their motion and report actual browser/renderer limitations instead of flattening them.
+- Prefer native SVG or overlay artwork for logos, icons, diagrams, badges, illustrations, and UI graphics unless the user asks to preserve an imported animation.
 - Use one focal subject per shot and purposeful scene changes. Avoid constant camera drift and the same fade on every layer.
 
 ## Supported source
@@ -56,7 +80,7 @@ text title {
 - Render an imported asset with its alias directly. Do not invent `asset`, `video`, `scene`, `group`, `rect`, or `layer` block types.
 - Built-in visual blocks are `text`, `overlay`, and `effect`.
 - Valid layers: `background`, `hero`, `supporting`, `content`, `details`, `text`, `effects`.
-- Common properties: `x`, `y`, `width`, `height`, `scale`, `rotation`, `opacity`, `blur`, `size`, `weight`, `color`, `fill`, `center`, `cover`, `layer`, `duration`, `delay`, `easing`.
+- Common properties: `x`, `y`, `width`, `height`, `scale`, `rotation`, `originX`, `originY`, `skewX`, `skewY`, `opacity`, `blur`, `size`, `weight`, `color`, `fill`, `stroke`, `strokeWidth`, `center`, `cover`, `layer`, `duration`, `delay`, `easing`.
 - Use `size`, not `fontSize`. Explicit animations use `easing`; preset options use `ease`.
 
 Explicit animation:
@@ -85,6 +109,13 @@ Keyframes are percentage blocks inside `keyframes` inside `animate`. Persistent
 
 Prefer `power3.out`. Useful text presets: `keynoteText`, `wordReveal`, `charReveal`, `splitReveal`, `blurReveal`, `fadeUp`, `slideIn`, `scaleText`, `typewriter`, `maskReveal`, `gradientReveal`. Useful object/transition presets: `softReveal`, `maskReveal`, `dynamicSlide`, `shapeWipe`, `irisWipe`, `drawSVG`, `sceneExit`, `scaleReveal`. Use `drawSVG` only for simple stroked SVG logos. Camera presets include `slowPush`, `pan`, `pull`, and `speedZoom`.
 
+## SVG and professional motion
+
+- For local zooms, pans, push-ins, and pull-backs, animate the SVG object's own `x`, `y`, `scale`, `rotation`, `originX`, and `originY`; do not move the global camera.
+- Stagger related vector/text parts, hold completed compositions long enough to read, and make exits faster than entrances.
+- Use one focal subject per shot, clear hierarchy, meaningful transitions, and deliberate scene progression. Avoid repeated fade-only scenes, clutter, stale layers, and constant camera drift.
+- Path morphing and deterministic animated-SVG seeking are not currently available; use editable transforms/masks or state the limitation.
+
 ## Validate and preview
 
 From the project folder:

package/templates/project/AGENTS.md

@@ -4,6 +4,26 @@ Keep Motionly simple and visual.
 
 Read the installed `motionly` skill before creating or substantially editing `project.motion`.
 
+## Agent Skill
+
+Installing the skill placed it at `.<agent>/skills/motionly/SKILL.md` (Codex uses
+`.agents/`, plus `.claude/`, `.gemini/`, `.opencode/`, or `.kiro/`). That file is the
+quick contract; a full reference library sits beside it under `references/` (`llms.txt`
+index plus focused skills: `motion-dsl`, `svg`, `animation`, `easing`, `camera`, `composition`,
+`typography`, `transitions`, `timeline`, `assets`, `rendering`, `templates`).
+
+Before writing or repairing `.motion` beyond a trivial edit:
+
+1. Read this file and `project.motion`.
+2. Open the skill `SKILL.md`, then `references/llms.txt`, and load
+   `references/skills/motion-dsl/SKILL.md` plus only the other reference skills the
+   task needs.
+3. Treat the reference library and Motionly's parser/renderer as authoritative over
+   the short summary below.
+
+If the skill was not installed, run `npx motionly skills add` to add it (with its
+reference library) for your agent.
+
 ## Product Rule
 
 Motionly is a motion graphics editor around `.motion`. The user edits visually; `.motion` is the saved source format underneath.
@@ -76,4 +96,6 @@ Build scenes around one focal subject. Use scene color changes and purposeful ob
 
 For simple stroked SVG logos, `animation drawSVG(...)` animates their paths and resolves into the original artwork. Use it sparingly on a hero logo; use normal image reveals for detailed SVGs, mockups, and photos.
 
+Treat MP4, WebM, MOV/M4V, GIF, animated SVG, and Lottie as animated assets. Never flatten or silently ignore their animation. Prefer native editable SVG for logos, icons, diagrams, illustrations, badges, line art, and UI graphics unless an existing animation must be preserved. Animate local SVG focus with the object's own `x`, `y`, `scale`, `rotation`, `originX`, and `originY` instead of the global camera.
+
 Use the small transition set when a shot actually changes: `shapeWipe`, `irisWipe`, `maskReveal`, `dynamicSlide`, and camera `speedZoom`. Prefer one strong transition per scene over stacking effects.

package/dist/assets/main-C8oSjoH0.css

@@ -1 +0,0 @@
-html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#0b0c0e}.svelte-qg4u95{box-sizing:border-box}.onboarding.svelte-qg4u95{width:100%;height:100dvh;overflow:auto;display:grid;place-items:center;padding:72px 24px 32px;color:#e4e6ea;background:linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),#0b0c0e;background-size:32px 32px}.brand.svelte-qg4u95{position:fixed;top:20px;left:24px;display:flex;align-items:center;gap:9px;color:#f2f3f5;font-size:14px;font-weight:650}.brand.svelte-qg4u95 img:where(.svelte-qg4u95){width:28px;height:28px;border-radius:7px}.step-card.svelte-qg4u95{width:min(640px,100%);min-height:520px;display:flex;flex-direction:column;padding:22px 26px 26px;border:1px solid #292c31;border-radius:14px;background:#0f1012f5;box-shadow:0 24px 70px #0000006b}.progress.svelte-qg4u95{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid #22252a;color:#686e77;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.dots.svelte-qg4u95{display:flex;gap:6px}.dots.svelte-qg4u95 i:where(.svelte-qg4u95){width:6px;height:6px;border-radius:999px;background:#33373d}.dots.svelte-qg4u95 i.active:where(.svelte-qg4u95){width:18px;background:#7cf7c5}.dots.svelte-qg4u95 i.complete:where(.svelte-qg4u95){background:#477565}.step-content.svelte-qg4u95{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:26px 16px 4px;animation:svelte-qg4u95-enter .2s ease-out}@keyframes svelte-qg4u95-enter{0%{opacity:0;transform:translateY(5px)}}h1.svelte-qg4u95{margin:0;color:#f3f4f6;font-size:clamp(24px,4vw,34px);line-height:1.12;letter-spacing:-.025em}p.svelte-qg4u95{margin:0;color:#9ca1aa;font-size:14px;line-height:1.65}code.svelte-qg4u95{color:#b8e9d7;font:12px ui-monospace,SFMono-Regular,Menlo,monospace}.title-row.svelte-qg4u95{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.beta.svelte-qg4u95{padding:4px 8px;border:1px solid #426e5e;border-radius:999px;background:#17251f;color:#8ff0ca;font-size:10px;font-weight:700;text-transform:uppercase}.notice.svelte-qg4u95{padding:10px 12px;border-left:2px solid #6bc9a8;background:#151a18;color:#aeb5b0;font-size:12px}.field.svelte-qg4u95{display:flex;flex-direction:column;gap:7px}.field.svelte-qg4u95 label:where(.svelte-qg4u95){color:#c5c9cf;font-size:11px;font-weight:600}.field.svelte-qg4u95 label:where(.svelte-qg4u95) span:where(.svelte-qg4u95),.field.svelte-qg4u95 small:where(.svelte-qg4u95){color:#686e77;font-weight:400;font-size:10px}input.svelte-qg4u95,select.svelte-qg4u95{width:100%;height:38px;padding:0 11px;border:1px solid #2d3137;border-radius:7px;outline:none;background:#17191c;color:#e4e6ea;font:inherit;font-size:12px}input.svelte-qg4u95:focus,select.svelte-qg4u95:focus{border-color:#477565}.key-field.svelte-qg4u95{position:relative}.key-field.svelte-qg4u95 input:where(.svelte-qg4u95){padding-right:42px}.key-field.svelte-qg4u95 button:where(.svelte-qg4u95){position:absolute;top:4px;right:4px;width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:#8e939b;cursor:pointer}.provider-chip.svelte-qg4u95{width:auto;max-width:220px;border-color:#355e4f;border-radius:999px;color:#9af8d1}.custom-toggle.svelte-qg4u95{display:flex;align-items:center;gap:8px;color:#b6bac1;font-size:12px}.custom-toggle.svelte-qg4u95 input:where(.svelte-qg4u95){width:14px;height:14px;accent-color:#7cf7c5}.privacy.svelte-qg4u95,.skip-note.svelte-qg4u95{color:#6e747d;font-size:11px}.warning.svelte-qg4u95,.error.svelte-qg4u95{padding:9px 10px;border-radius:7px;font-size:11px;line-height:1.45}.warning.svelte-qg4u95{border:1px solid #55452b;background:#241f17;color:#d9bd85}.error.svelte-qg4u95{border:1px solid #5c3030;background:#251919;color:#eea2a2}.actions.svelte-qg4u95{display:flex;align-items:center;margin-top:auto;padding-top:16px}.actions.end.svelte-qg4u95{justify-content:flex-end}.actions.split.svelte-qg4u95{justify-content:space-between}button.svelte-qg4u95,.community-link.svelte-qg4u95{font:inherit}button.primary.svelte-qg4u95,.community-link.svelte-qg4u95{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 15px;border:1px solid #4d8c75;border-radius:7px;background:#1a3b30;color:#a4f8d5;font-size:12px;font-weight:650;cursor:pointer;text-decoration:none}button.primary.svelte-qg4u95:hover,.community-link.svelte-qg4u95:hover{background:#214a3d}.text-button.svelte-qg4u95,.skip.svelte-qg4u95{border:0;background:transparent;color:#8e939b;font-size:12px;cursor:pointer}.skip.svelte-qg4u95{align-self:center;margin-top:4px;text-decoration:underline;text-underline-offset:3px}.skip-note.svelte-qg4u95{align-self:center;text-align:center}.preset.svelte-qg4u95{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:center;padding:12px;border:1px solid #292d32;border-radius:10px;background:#131518}.preset.svelte-qg4u95 img:where(.svelte-qg4u95){width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:#070809}.preset.svelte-qg4u95 div:where(.svelte-qg4u95){display:flex;flex-direction:column;gap:6px}.preset.svelte-qg4u95 strong:where(.svelte-qg4u95){font-size:13px}.preset.svelte-qg4u95 span:where(.svelte-qg4u95){color:#858b94;font-size:11px;line-height:1.45}.loop.svelte-qg4u95{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:12px;color:#727982;font-size:10px;text-align:center}.loop.svelte-qg4u95 span:where(.svelte-qg4u95){color:#aeb3ba}.hero-icon.svelte-qg4u95{width:30px;height:30px}.community-links.svelte-qg4u95{display:flex;align-items:center;gap:10px;flex-wrap:wrap;align-self:flex-start}.community-link.svelte-qg4u95 img:where(.svelte-qg4u95){width:17px;height:17px}.product-hunt-badge.svelte-qg4u95{display:inline-flex;flex:0 0 auto;overflow:hidden;border-radius:7px;line-height:0}.product-hunt-badge.svelte-qg4u95 img:where(.svelte-qg4u95){display:block;width:250px;height:54px}.final-logo.svelte-qg4u95{width:56px;height:56px;align-self:center;border-radius:13px}.final-logo.svelte-qg4u95+h1:where(.svelte-qg4u95),.final-logo.svelte-qg4u95+h1:where(.svelte-qg4u95)+p:where(.svelte-qg4u95){text-align:center}button.final.svelte-qg4u95{align-self:center;margin-top:14px}@media(max-width:600px){.onboarding.svelte-qg4u95{padding:64px 12px 12px}.brand.svelte-qg4u95{left:16px;top:16px}.step-card.svelte-qg4u95{min-height:calc(100dvh - 76px);padding:18px 14px}.step-content.svelte-qg4u95{padding:22px 4px 2px}.preset.svelte-qg4u95{grid-template-columns:1fr}}.ai-chat-panel.svelte-lobal1{height:100%;min-height:0;display:flex;flex-direction:column;background:#111214;color:#e4e6ea}.chat-header.svelte-lobal1{min-height:57px;padding:0 14px 0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1c1d20;background:#0d0e10}.chat-title.svelte-lobal1,.header-actions.svelte-lobal1{display:flex;align-items:center;gap:8px}.chat-title.svelte-lobal1{font-size:13px;font-weight:600}.chat-title.svelte-lobal1 svg{color:#7cf7c5}button.svelte-lobal1{font:inherit}.icon-button.svelte-lobal1{width:28px;height:28px;padding:0;display:grid;place-items:center;border:1px solid #2a2d33;border-radius:6px;color:#8e939b;background:#17191c;cursor:pointer}.icon-button.svelte-lobal1:hover,.icon-button.active.svelte-lobal1{color:#7cf7c5;border-color:#355e4f}.settings-view.svelte-lobal1{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#34383e transparent;padding:20px 16px;display:flex;flex-direction:column;gap:16px}h3.svelte-lobal1{margin:0 0 6px;font-size:14px}.settings-view.svelte-lobal1>div:where(.svelte-lobal1)>p:where(.svelte-lobal1){margin:0;color:#8e939b;font-size:12px;line-height:1.5}.settings-view.svelte-lobal1>div:where(.svelte-lobal1)>p:where(.svelte-lobal1) code:where(.svelte-lobal1){color:#a9b0b9;font-size:11px}.field.svelte-lobal1{display:flex;flex-direction:column;gap:7px}.field.svelte-lobal1 label:where(.svelte-lobal1){color:#b6bac1;font-size:11px;font-weight:600}.field.svelte-lobal1 label:where(.svelte-lobal1) span:where(.svelte-lobal1){color:#6b7280;font-weight:400}.field.svelte-lobal1 small:where(.svelte-lobal1){color:#6b7280;font-size:10px;line-height:1.35}input.svelte-lobal1,select.svelte-lobal1,textarea.svelte-lobal1{box-sizing:border-box;width:100%;border:1px solid #2a2d33;border-radius:7px;outline:none;background:#17191c;color:#e4e6ea}input.svelte-lobal1{height:36px;padding:0 10px;font-size:12px}input.svelte-lobal1:focus,select.svelte-lobal1:focus,textarea.svelte-lobal1:focus{border-color:#437263}.key-input.svelte-lobal1{position:relative}.key-input.svelte-lobal1 input:where(.svelte-lobal1){padding-right:38px}.key-input.svelte-lobal1 button:where(.svelte-lobal1){position:absolute;top:4px;right:4px;width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:#8e939b;cursor:pointer}.provider-chip.svelte-lobal1{width:auto;height:28px;padding:0 26px 0 9px;border-color:#355e4f;border-radius:999px;color:#9af8d1;font-size:11px}.custom-toggle.svelte-lobal1{display:flex;align-items:center;gap:8px;color:#b6bac1;font-size:12px}.custom-toggle.svelte-lobal1 input:where(.svelte-lobal1){width:14px;height:14px;accent-color:#7cf7c5}.privacy-note.svelte-lobal1{margin:0;color:#777d86;font-size:11px;line-height:1.45}.provider-warning.svelte-lobal1{margin:0;padding:9px;border:1px solid #55452b;border-radius:6px;background:#241f17;color:#d9bd85;font-size:11px;line-height:1.45}.provider-note.svelte-lobal1{margin:0;padding:9px;border:1px solid #29483d;border-radius:6px;background:#17231f;color:#9bcbb9;font-size:11px;line-height:1.45}.guide-note.svelte-lobal1{margin:0;color:#777d86;font-size:11px;line-height:1.45}.guide-note.svelte-lobal1 a:where(.svelte-lobal1){color:#7cf7c5;text-decoration:none}.guide-note.svelte-lobal1 a:where(.svelte-lobal1):hover{text-decoration:underline}.guide-note.svelte-lobal1 code:where(.svelte-lobal1){color:#a9b0b9;font-size:10px}.copy-prompt-button.svelte-lobal1{align-self:flex-start;padding:7px 10px;border:1px solid #355e4f;border-radius:6px;background:#17231f;color:#9af8d1;cursor:pointer;font-size:11px;font-weight:600}.copy-prompt-button.svelte-lobal1:hover{border-color:#4d8c75;background:#1a3028}.empty-state.svelte-lobal1 .copy-prompt-button:where(.svelte-lobal1){align-self:center}.error-message.svelte-lobal1{margin:0;color:#f09b9b;font-size:11px;line-height:1.4}.settings-actions.svelte-lobal1{margin-top:auto;display:flex;justify-content:flex-end;gap:8px}.primary-button.svelte-lobal1,.secondary-button.svelte-lobal1,.load-button.svelte-lobal1,.repair-button.svelte-lobal1{padding:7px 10px;border-radius:6px;cursor:pointer;font-size:11px;font-weight:600}.primary-button.svelte-lobal1,.load-button.svelte-lobal1{border:1px solid #4d8c75;background:#1a3b30;color:#9af8d1}.secondary-button.svelte-lobal1{border:1px solid #2a2d33;background:#17191c;color:#a5aab2}.repair-button.svelte-lobal1{margin-left:6px;border:1px solid #59472c;background:#251f17;color:#d9bd85}.secondary-button.danger.svelte-lobal1{margin-right:auto;color:#dc9494}.message-list.svelte-lobal1{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;padding:16px;display:flex;flex-direction:column;gap:12px}.message-list.svelte-lobal1::-webkit-scrollbar{display:none;width:0;height:0}.settings-view.svelte-lobal1::-webkit-scrollbar,.message-list.svelte-lobal1::-webkit-scrollbar,textarea.svelte-lobal1::-webkit-scrollbar{width:6px;height:6px}.settings-view.svelte-lobal1::-webkit-scrollbar-track,.message-list.svelte-lobal1::-webkit-scrollbar-track,textarea.svelte-lobal1::-webkit-scrollbar-track{background:transparent}.settings-view.svelte-lobal1::-webkit-scrollbar-thumb,.message-list.svelte-lobal1::-webkit-scrollbar-thumb,textarea.svelte-lobal1::-webkit-scrollbar-thumb{border-radius:999px;background:#34383e}.settings-view.svelte-lobal1::-webkit-scrollbar-thumb:hover,.message-list.svelte-lobal1::-webkit-scrollbar-thumb:hover,textarea.svelte-lobal1::-webkit-scrollbar-thumb:hover{background:#484d55}.empty-state.svelte-lobal1{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#6f747c;font-size:11px;line-height:1.5;text-align:center}.empty-state.svelte-lobal1 strong:where(.svelte-lobal1){color:#8e939b;font-size:12px;font-weight:500}.empty-state.svelte-lobal1 span:where(.svelte-lobal1){max-width:230px}.empty-state.svelte-lobal1 a:where(.svelte-lobal1){color:#7cf7c5;text-decoration:none}.empty-state.svelte-lobal1 a:where(.svelte-lobal1):hover{text-decoration:underline}.empty-state.svelte-lobal1 code:where(.svelte-lobal1){color:#a9b0b9;font-size:10px}.message.svelte-lobal1{align-self:stretch;padding:11px;border:1px solid #24262a;border-radius:9px;background:#151619}.message.user.svelte-lobal1{align-self:flex-end;max-width:86%;background:#19221f;border-color:#293d36}.message-role.svelte-lobal1{margin-bottom:6px;color:#7cf7c5;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.message.user.svelte-lobal1 .message-role:where(.svelte-lobal1){color:#9ca3af}.message.svelte-lobal1 p:where(.svelte-lobal1){margin:0;color:#c8cbd0;font-size:12px;line-height:1.5;white-space:pre-wrap}pre.svelte-lobal1{margin:9px 0;padding:10px;overflow:visible;border:1px solid #25282d;border-radius:6px;background:#0d0e10;color:#b9e8d7;font:10px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.thinking.svelte-lobal1{color:#777d86;font-size:11px}.composer-wrap.svelte-lobal1{padding:10px 12px 12px;border-top:1px solid #1c1d20;background:#0d0e10}.composer-wrap.svelte-lobal1 .error-message:where(.svelte-lobal1){margin-bottom:8px}.composer.svelte-lobal1{display:flex;align-items:flex-end;gap:7px;padding:7px;border:1px solid #2a2d33;border-radius:10px;background:#17191c}textarea.svelte-lobal1{min-height:38px;max-height:120px;padding:4px;resize:none;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#34383e transparent;border:0;background:transparent;font-size:12px;line-height:1.4}.composer.svelte-lobal1 button:where(.svelte-lobal1){flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:#9af8d1;cursor:pointer;transition:color .15s ease,background .15s ease,transform .15s ease}.composer.svelte-lobal1 button:where(.svelte-lobal1):hover:not(:disabled){background:#7cf7c51a;color:#c4ffe7;transform:translateY(-1px)}.composer.svelte-lobal1 button:where(.svelte-lobal1):focus-visible{outline:2px solid #437263;outline-offset:1px}.composer.svelte-lobal1 button:where(.svelte-lobal1):disabled{border:0;background:transparent;color:#4c5158;cursor:default}.ai-config.svelte-1tw9x39{display:flex;flex-direction:column;flex:1;min-height:0}.config-nav.svelte-1tw9x39{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid #1d1f22;flex-wrap:wrap}.config-nav.svelte-1tw9x39 button:where(.svelte-1tw9x39){display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border:0;border-bottom:2px solid transparent;background:transparent;color:#8e939b;font-size:11px;font-weight:600;cursor:pointer}.config-nav.svelte-1tw9x39 button.active:where(.svelte-1tw9x39){color:#f1f2f4;border-bottom-color:#7cf7c5}.config-nav.svelte-1tw9x39 button:where(.svelte-1tw9x39):hover{color:#dce1e6}.config-body.svelte-1tw9x39{flex:1;min-height:0;overflow-y:auto;padding:14px}.config-section.svelte-1tw9x39{display:flex;flex-direction:column;gap:12px}.config-title.svelte-1tw9x39{margin:0;font-size:13px;font-weight:700;color:#f1f2f4}.config-desc.svelte-1tw9x39{margin:0;font-size:11px;line-height:1.5;color:#8e939b}.config-link.svelte-1tw9x39{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;padding:0;border:0;background:transparent;color:#7cf7c5;font-size:11px;cursor:pointer}.config-link.svelte-1tw9x39:hover{text-decoration:underline}.skill-row.svelte-1tw9x39{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-bottom:1px solid #1a1c1f}.skill-main.svelte-1tw9x39{display:flex;align-items:center;justify-content:space-between;gap:10px}.skill-toggle.svelte-1tw9x39{display:inline-flex;align-items:center;gap:8px;cursor:pointer}.skill-name.svelte-1tw9x39{font-size:12px;font-weight:600;color:#f1f2f4}.skill-desc.svelte-1tw9x39{margin:0;font-size:11px;line-height:1.5;color:#8e939b}.skill-detail.svelte-1tw9x39{display:flex;flex-direction:column;gap:6px;font-size:11px;color:#b8bec6}.skill-detail.svelte-1tw9x39 code:where(.svelte-1tw9x39){color:#7cf7c5;word-break:break-all}.skill-detail.svelte-1tw9x39 pre:where(.svelte-1tw9x39){margin:0;padding:10px;border:1px solid #2c3138;border-radius:6px;background:#0d0e10;color:#b8bec6;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}.context-card.svelte-1tw9x39{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid #2c3138;border-radius:8px;background:#0d0e10}.context-heading.svelte-1tw9x39{font-size:12px;font-weight:700;color:#f1f2f4;margin-bottom:2px}.context-line.svelte-1tw9x39{font-size:12px;color:#b8bec6}.context-line.ok.svelte-1tw9x39{color:#b8ffe4}.context-line.missing.svelte-1tw9x39{color:#f0b26d}.panel-content.svelte-167vias{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:14px;scrollbar-width:thin;scrollbar-color:#34373d #111214}.config-section.svelte-167vias{display:flex;flex-direction:column;gap:12px}.config-title.svelte-167vias{margin:0;font-size:13px;font-weight:700;color:#f1f2f4}.config-title-row.svelte-167vias{display:flex;align-items:center;justify-content:space-between}.config-desc.svelte-167vias{margin:0;font-size:11px;line-height:1.5;color:#8e939b}.config-textarea.svelte-167vias{width:100%;box-sizing:border-box;resize:vertical;padding:10px;border:1px solid #2c3138;border-radius:6px;background:#0d0e10;color:#e7eaee;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5}.field.svelte-167vias{display:flex;flex-direction:column;gap:6px}.field-label.svelte-167vias{color:#8e939b;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.config-input.svelte-167vias{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #2c3138;border-radius:6px;background:#0d0e10;color:#e7eaee;font-size:12px}.config-input.svelte-167vias:focus{outline:none;border-color:#4a5563}.inline-add.svelte-167vias{display:flex;gap:6px;align-items:center}.inline-add.svelte-167vias .config-input:where(.svelte-167vias){flex:1}.color-input.svelte-167vias{width:34px;height:34px;padding:0;border:1px solid #2c3138;border-radius:6px;background:#0d0e10;cursor:pointer}.chip-row.svelte-167vias{display:flex;flex-wrap:wrap;gap:6px}.chip.svelte-167vias{display:inline-flex;align-items:center;gap:5px;padding:4px 6px 4px 9px;border:1px solid #2c3138;border-radius:20px;background:#16181c;color:#dce1e6;font-size:11px}.chip.svelte-167vias button:where(.svelte-167vias){display:inline-flex;padding:0;border:0;background:transparent;color:#8e939b;cursor:pointer}.chip.svelte-167vias button:where(.svelte-167vias):hover{color:#ff9da5}.color-chip.svelte-167vias .swatch:where(.svelte-167vias){width:12px;height:12px;border-radius:3px;border:1px solid rgba(255,255,255,.15)}.avoid-chip.svelte-167vias{border-color:#5a3a3d;background:#241a1b}.config-btn.svelte-167vias{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border:1px solid #2c3138;border-radius:6px;background:#16181c;color:#dce1e6;font-size:12px;font-weight:600;cursor:pointer}.config-btn.svelte-167vias:hover{background:#202329}.config-link.svelte-167vias{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;padding:0;border:0;background:transparent;color:#7cf7c5;font-size:11px;cursor:pointer}.config-link.svelte-167vias:hover{text-decoration:underline}.config-link.danger.svelte-167vias{color:#ff9da5}.brand-preview.svelte-167vias{display:flex;flex-direction:column;gap:6px}.brand-preview.svelte-167vias pre:where(.svelte-167vias){margin:0;padding:10px;border:1px solid #2c3138;border-radius:6px;background:#0d0e10;color:#b8bec6;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}.motion-editor.svelte-1mvnu54{width:100%;height:100%;display:flex;flex-direction:column;background:#09090a;color:#f1f2f4;position:relative;min-height:0;overflow:hidden}.motion-editor.fullscreen.svelte-1mvnu54{position:fixed;inset:0;z-index:200}.workbench.svelte-1mvnu54{flex:1;min-height:0;display:grid;grid-template-columns:52px 260px 50px minmax(0,1fr) 300px}.workbench.chat-open.svelte-1mvnu54{grid-template-columns:52px 260px 324px minmax(0,1fr) 300px}.chat-drawer.svelte-1mvnu54{box-sizing:border-box;display:flex;min-width:0;min-height:0;padding:8px;overflow:hidden;background:linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),#0b0c0e;background-size:32px 32px}.chat-drawer.svelte-1mvnu54 .ai-chat-panel{flex:1;height:auto;border:1px solid #2a2d33;border-radius:10px;overflow:hidden;box-shadow:0 14px 34px #00000047}.chat-drawer.collapsed.svelte-1mvnu54{display:flex;justify-content:center;padding-top:14px}.assistant-expand.svelte-1mvnu54{width:28px;height:28px;display:grid;place-items:center;padding:0;border:1px solid #355e4f;border-radius:6px;background:#17231f;color:#7cf7c5;cursor:pointer}.nav-rail.svelte-1mvnu54{display:flex;flex-direction:column;gap:4px;padding:12px 6px;background:#0a0b0c;border-right:1px solid #1c1d20}.nav-item.svelte-1mvnu54{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;border-radius:8px;background:transparent;color:#6b7280;cursor:pointer;transition:all .15s ease}.nav-item.svelte-1mvnu54:hover{background:#17191c;color:#9ca3af}.nav-item.active.svelte-1mvnu54{background:#1a2f28;color:#7cf7c5;box-shadow:inset 2px 0 #7cf7c5}.content-panel.svelte-1mvnu54{display:flex;flex-direction:column;background:#111214;border-right:1px solid #24262a;min-height:0;overflow:hidden}.panel-header.svelte-1mvnu54{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #1c1d20;background:#0d0e10}.panel-heading-title.svelte-1mvnu54{color:#e4e6ea;font-size:13px;font-weight:600;margin:0}.panel-header-actions.svelte-1mvnu54{display:flex;align-items:center;gap:6px}.header-icon-btn.svelte-1mvnu54{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid #2a2d33;border-radius:6px;background:#17191c;color:#a8adb5;cursor:pointer;transition:all .15s ease}.header-icon-btn.svelte-1mvnu54:hover{background:#202328;color:#d8dce2}.panel-content.svelte-1mvnu54{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:12px;scrollbar-width:thin;scrollbar-color:#34373d #111214}.empty-state.svelte-1mvnu54{color:#6b7280;font-size:12px;text-align:center;padding:24px 16px}.asset-error.svelte-1mvnu54{margin:0 0 12px;color:#f09b9b;font-size:11px;line-height:1.4}.media-dropzone.svelte-1mvnu54{min-height:100%;box-sizing:border-box;padding:18px 12px;border:1px dashed #4b5060;border-radius:8px;color:#b9b8e8;text-align:center;transition:background .2s ease,border-color .2s ease,transform .2s ease}.media-drop-prompt.svelte-1mvnu54{display:flex;flex-direction:column;align-items:center;gap:7px;margin-bottom:16px}.media-dropzone.drag-active.svelte-1mvnu54{border-color:#79e4bb;background:#4d8c7529;animation:svelte-1mvnu54-upload-pulse .8s ease-in-out infinite alternate}@keyframes svelte-1mvnu54-upload-pulse{to{transform:scale(1.015);box-shadow:0 0 18px #79e4bb33}}.media-dropzone.svelte-1mvnu54:has(.import-media-button:where(.svelte-1mvnu54):hover){border-color:#4d8c75}.media-drop-prompt.svelte-1mvnu54 span:where(.svelte-1mvnu54),.media-drop-prompt.svelte-1mvnu54 small:where(.svelte-1mvnu54){font-size:11px}.media-drop-prompt.svelte-1mvnu54 small:where(.svelte-1mvnu54){color:#777b88}.import-media-button.svelte-1mvnu54{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:9px 12px;border:1px solid #4d8c75;border-radius:6px;background:#1a3b30;color:#9af8d1;font-size:12px;font-weight:600;cursor:pointer}.import-media-button.svelte-1mvnu54:hover{background:#1a3028}@media(prefers-reduced-motion:reduce){.media-dropzone.drag-active.svelte-1mvnu54{animation:none}}.panel-description.svelte-1mvnu54{color:#8e939b;font-size:12px;line-height:1.6;padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid #1c1d20}.asset-folder.svelte-1mvnu54{margin-bottom:20px}.folder-header.svelte-1mvnu54{display:flex;align-items:center;gap:8px;padding:8px 0;margin-bottom:10px;color:#8e939b;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.folder-title.svelte-1mvnu54{flex:1}.folder-count.svelte-1mvnu54{color:#6b7280;font-size:10px;font-weight:600;background:#1a1c20;padding:2px 6px;border-radius:10px}.folder-content.svelte-1mvnu54{display:flex;flex-direction:column;gap:4px}.asset-item.svelte-1mvnu54{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #2a2d33;border-radius:6px;background:#0d0e10;transition:all .15s ease}.asset-item.svelte-1mvnu54:hover{background:#17191c;border-color:#363d4b}.asset-item-icon.svelte-1mvnu54{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#17191c;border:1px solid #2a2d33;border-radius:6px;color:#7cf7c5}.asset-item-info.svelte-1mvnu54{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.asset-item-name.svelte-1mvnu54{color:#e4e6ea;font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.asset-item-path.svelte-1mvnu54{color:#6b7280;font-size:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.asset-grid.svelte-1mvnu54{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}.asset-card.svelte-1mvnu54{display:flex;flex-direction:column;border:1px solid transparent;border-radius:6px;background:#0d0e10;cursor:pointer;transition:all .15s ease;overflow:hidden;padding:0}.asset-card.svelte-1mvnu54:hover{background:#17191c;border-color:#2a2d33}.asset-thumbnail.svelte-1mvnu54{width:100%;aspect-ratio:16 / 9;display:flex;align-items:center;justify-content:center;background:#17191c;color:#6b7280;overflow:hidden}.asset-thumbnail.svelte-1mvnu54 img:where(.svelte-1mvnu54),.asset-thumbnail.svelte-1mvnu54 video:where(.svelte-1mvnu54){width:100%;height:100%;object-fit:cover}.asset-info.svelte-1mvnu54{padding:8px}.asset-name.svelte-1mvnu54{color:#d8dce2;font-size:11px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.audio-item.svelte-1mvnu54{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #2a2d33;border-radius:6px;background:#0d0e10;color:#d8dce2;font-size:13px}.panel-tabs.svelte-1mvnu54{display:flex;gap:2px}.panel-tab.svelte-1mvnu54{padding:6px 12px;border:none;border-bottom:2px solid transparent;background:transparent;color:#6b7280;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s ease}.panel-tab.svelte-1mvnu54:hover{color:#9ca3af}.panel-tab.active.svelte-1mvnu54{color:#7cf7c5;border-bottom-color:#7cf7c5}.preset-grid.svelte-1mvnu54{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}.preset-card.svelte-1mvnu54{display:flex;flex-direction:column;border:1px solid #2a2d33;border-radius:8px;background:#0d0e10;cursor:pointer;transition:all .15s ease;overflow:hidden;padding:0}.preset-card.svelte-1mvnu54:hover{background:#17191c;border-color:#33584d;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.preset-thumbnail.svelte-1mvnu54{width:100%;aspect-ratio:16 / 9;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}.preset-thumbnail.svelte-1mvnu54 img:where(.svelte-1mvnu54){width:100%;height:100%;object-fit:cover}.preset-info.svelte-1mvnu54{padding:10px}.preset-name.svelte-1mvnu54{color:#e4e6ea;font-size:12px;font-weight:600;text-align:center}.effects-categories.svelte-1mvnu54{display:flex;flex-direction:column;gap:16px}.effects-category.svelte-1mvnu54{display:flex;flex-direction:column;gap:8px}.category-title.svelte-1mvnu54{color:#8e939b;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.category-hint.svelte-1mvnu54{margin:-2px 0 2px;color:#686e77;font-size:10px;line-height:1.35}.effects-list.svelte-1mvnu54{display:flex;flex-direction:column;gap:2px}.effect-item.svelte-1mvnu54{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid transparent;border-radius:4px;background:transparent;color:#d8dce2;font-size:12px;text-align:left;cursor:pointer;transition:all .15s ease}.effect-item.svelte-1mvnu54:hover{background:#1a1c20;border-color:#2a2d33}.effect-item.svelte-1mvnu54:disabled{cursor:not-allowed;opacity:.4}.effect-item.svelte-1mvnu54 span:where(.svelte-1mvnu54){font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.transition-effect-item.svelte-1mvnu54{border-color:#315449;background:linear-gradient(135deg,#7cf7c51f,#7cf7c508);cursor:grab}.transition-effect-item.svelte-1mvnu54:active{cursor:grabbing}.transition-effect-item.svelte-1mvnu54 span:where(.svelte-1mvnu54){display:flex;flex-direction:column;gap:2px}.transition-effect-item.svelte-1mvnu54 strong:where(.svelte-1mvnu54){color:#e9fff6;font-size:11px}.transition-effect-item.svelte-1mvnu54 small:where(.svelte-1mvnu54){color:#79827f;font-size:9px}.dialog-overlay.svelte-1mvnu54{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px)}.dialog.svelte-1mvnu54{width:90%;max-width:440px;background:#17191c;border:1px solid #2a2d33;border-radius:12px;box-shadow:0 20px 60px #0009;overflow:hidden}.dialog-header.svelte-1mvnu54{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #24262a}.dialog-header.svelte-1mvnu54 h3:where(.svelte-1mvnu54){margin:0;color:#e4e6ea;font-size:16px;font-weight:600}.dialog-close.svelte-1mvnu54{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;border-radius:6px;background:transparent;color:#9ca3af;cursor:pointer;transition:all .15s ease}.dialog-close.svelte-1mvnu54:hover{background:#24262a;color:#e4e6ea}.dialog-body.svelte-1mvnu54{padding:20px}.dialog-body.svelte-1mvnu54 p:where(.svelte-1mvnu54){margin:0;color:#d8dce2;font-size:14px;line-height:1.6}.dialog-footer.svelte-1mvnu54{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 20px;border-top:1px solid #24262a;background:#111214}.dialog-btn.svelte-1mvnu54{padding:8px 16px;border:1px solid #2a2d33;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease}.dialog-btn.secondary.svelte-1mvnu54{background:transparent;color:#d8dce2}.dialog-btn.secondary.svelte-1mvnu54:hover{background:#24262a}.dialog-btn.danger.svelte-1mvnu54{background:#ef4444;color:#fff;border-color:#ef4444}.dialog-btn.danger.svelte-1mvnu54:hover{background:#dc2626}.properties-panel.svelte-1mvnu54{min-height:0;overflow:auto;background:#111214;border-color:#24262a;padding:14px;scrollbar-width:thin;scrollbar-color:#34373d #111214;border-left:1px solid #24262a}.panel-title.svelte-1mvnu54,.section-title.svelte-1mvnu54{color:#8e939b;font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase;margin-bottom:12px}.section-title.svelte-1mvnu54{margin-top:22px}.layer-list.svelte-1mvnu54{display:flex;flex-direction:column;gap:3px}.layer-row.svelte-1mvnu54{width:100%;min-height:48px;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:9px;margin:0;padding:6px 8px;border:1px solid transparent;border-radius:4px;background:transparent;color:#e4e6ea;cursor:pointer;text-align:left}.layer-row.svelte-1mvnu54:hover{background:#1a1c20}.layer-row.selected.svelte-1mvnu54{background:#18201e;border-color:#33584d;box-shadow:inset 2px 0 #7cf7c5}.layer-icon.svelte-1mvnu54{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #2d3137;border-radius:4px;background:#17191c;color:#a8adb5;overflow:hidden}.layer-icon.svelte-1mvnu54 img:where(.svelte-1mvnu54),.track-thumb.svelte-1mvnu54 img:where(.svelte-1mvnu54){width:100%;height:100%;display:block;object-fit:contain}.selected.svelte-1mvnu54 .layer-icon:where(.svelte-1mvnu54),.selection-summary.svelte-1mvnu54 .layer-icon:where(.svelte-1mvnu54){color:#7cf7c5;border-color:#33584d}.layer-copy.svelte-1mvnu54,.selection-summary.svelte-1mvnu54>span:where(.svelte-1mvnu54):last-child{display:flex;min-width:0;flex-direction:column;gap:3px}.layer-copy.svelte-1mvnu54 strong:where(.svelte-1mvnu54),.selection-summary.svelte-1mvnu54 strong:where(.svelte-1mvnu54){overflow:hidden;color:#eef0f2;font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.layer-copy.svelte-1mvnu54 small:where(.svelte-1mvnu54),.selection-summary.svelte-1mvnu54 small:where(.svelte-1mvnu54){overflow:hidden;color:#777d86;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.selection-summary.svelte-1mvnu54{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:10px;margin:0 0 18px;padding:8px;border-bottom:1px solid #24262a}.preview-container.svelte-1mvnu54{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),#0b0c0e;background-size:32px 32px;overflow:hidden}.stage-meta.svelte-1mvnu54{height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:#858a92;font-size:12px;border-bottom:1px solid #22252a;background:#0d0e10eb}.stage-actions.svelte-1mvnu54{display:flex;align-items:center;gap:10px}.meta-btn.svelte-1mvnu54,.icon-btn.svelte-1mvnu54{border:1px solid #2c3035;border-radius:6px;background:#17191c;color:#d8dce2;cursor:pointer}.meta-btn.svelte-1mvnu54{height:28px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;font-size:12px}.meta-btn.svelte-1mvnu54:disabled{cursor:not-allowed;opacity:.45}.icon-btn.svelte-1mvnu54{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center}.meta-btn.svelte-1mvnu54:hover,.icon-btn.svelte-1mvnu54:hover{background:#202328}.stage.svelte-1mvnu54{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:36px;overflow:hidden;position:relative}.property-align-toolbar.svelte-1mvnu54{margin:0 14px 14px;padding:10px;border:1px solid #292d33;border-radius:6px;background:#111317}.property-align-label.svelte-1mvnu54{display:block;margin-bottom:8px;color:#7f8791;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.property-align-actions.svelte-1mvnu54{display:grid;grid-template-columns:repeat(3,1fr) 1px repeat(3,1fr);overflow:hidden;border:1px solid #30353c;border-radius:5px}.property-align-actions.svelte-1mvnu54 button:where(.svelte-1mvnu54){min-width:0;height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-right:1px solid #30353c;background:#181b20;color:#cbd0d7;cursor:pointer}.property-align-actions.svelte-1mvnu54 button:where(.svelte-1mvnu54):last-child{border-right:0}.property-align-actions.svelte-1mvnu54 button:where(.svelte-1mvnu54):hover{background:#282d34;color:#7cf7c5}.align-divider.svelte-1mvnu54{width:1px;height:30px;justify-self:center;background:#30353c}.canvas-shell.svelte-1mvnu54{position:relative;flex:0 0 auto;height:auto}.preview-canvas.svelte-1mvnu54{display:block;width:100%;height:auto;max-width:none;max-height:none;border-radius:4px;background:#000;box-shadow:0 24px 80px #00000094,0 0 0 1px #ffffff14;cursor:grab;touch-action:none}.preview-canvas.dragging.svelte-1mvnu54{cursor:grabbing}.snap-guide.svelte-1mvnu54{position:absolute;z-index:5;display:block;background:#ff405f;box-shadow:0 0 0 1px #ff405f2e;pointer-events:none}.snap-guide-v.svelte-1mvnu54{top:0;bottom:0;width:1px;transform:translate(-.5px)}.snap-guide-h.svelte-1mvnu54{right:0;left:0;height:1px;transform:translateY(-.5px)}.asset-preview-overlay.svelte-1mvnu54{position:absolute;inset:36px;display:flex;align-items:center;justify-content:center;background:#000000f2;border:0;padding:0;backdrop-filter:blur(8px);z-index:100;cursor:default;border-radius:4px}.asset-preview-overlay.svelte-1mvnu54 img:where(.svelte-1mvnu54),.asset-preview-overlay.svelte-1mvnu54 video:where(.svelte-1mvnu54){max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}.asset-preview-close.svelte-1mvnu54{position:absolute;top:12px;right:12px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #3a3f46;border-radius:6px;background:#111317e6;color:#fff;cursor:pointer}.asset-preview-close.svelte-1mvnu54:hover{background:#292e35}.property-group.svelte-1mvnu54{margin-bottom:16px}.property-label.svelte-1mvnu54{display:block;color:#8e939b;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.property-label-row.svelte-1mvnu54{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.property-label-row.svelte-1mvnu54 .property-label:where(.svelte-1mvnu54){margin-bottom:0}.property-action.svelte-1mvnu54{padding:0;border:0;background:transparent;color:#7cf7c5;font-size:10px;cursor:pointer}.property-action.svelte-1mvnu54:hover{color:#b8ffe4;text-decoration:underline}.clip-original-size.svelte-1mvnu54{width:100%;margin-bottom:14px}.transition-pair-copy.svelte-1mvnu54{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;margin:0 0 16px;padding:10px;border:1px solid #2a2d33;border-radius:5px;background:#121417}.transition-pair-copy.svelte-1mvnu54>span:where(.svelte-1mvnu54):not(.transition-pair-arrow){display:flex;min-width:0;flex-direction:column;gap:3px}.transition-pair-copy.svelte-1mvnu54 small:where(.svelte-1mvnu54){color:#727983;font-size:9px;text-transform:uppercase}.transition-pair-copy.svelte-1mvnu54 strong:where(.svelte-1mvnu54){overflow:hidden;color:#e8ebef;font-size:11px;text-overflow:ellipsis}.transition-pair-arrow.svelte-1mvnu54{color:#7cf7c5}.transition-remove.svelte-1mvnu54{width:100%;color:#ff9d9d}.property-row.svelte-1mvnu54{display:grid;grid-template-columns:1fr 1fr;gap:8px}.number-input-wrapper.svelte-1mvnu54{position:relative;display:flex;align-items:center}.number-input.svelte-1mvnu54{width:100%;height:32px;box-sizing:border-box;border:1px solid #2a2d33;border-radius:6px;background:#17191c;color:#e4e6ea;font:inherit;font-size:12px;font-variant-numeric:tabular-nums;padding:0 26px 0 10px;outline:none;transition:all .12s ease}.number-input.svelte-1mvnu54:hover{border-color:#363d4b;background:#1a1c20}.number-input.svelte-1mvnu54:focus{border-color:#7cf7c5;background:#1a1c20;box-shadow:0 0 0 2px #7cf7c51f}.input-suffix.svelte-1mvnu54{position:absolute;right:10px;color:#6b7280;font-size:11px;font-weight:500;pointer-events:none}.slider-control.svelte-1mvnu54{display:flex;align-items:center;gap:10px}.custom-slider.svelte-1mvnu54{flex:1;height:3px;-webkit-appearance:none;appearance:none;background:transparent;outline:none;padding:0;margin:0}.custom-slider.svelte-1mvnu54::-webkit-slider-track{width:100%;height:3px;background:linear-gradient(to right,#7cf7c5 0%,#7cf7c5 var(--slider-progress, 50%),#2a2d33 var(--slider-progress, 50%),#2a2d33 100%);border-radius:2px}.custom-slider.svelte-1mvnu54::-moz-range-track{width:100%;height:3px;background:#2a2d33;border-radius:2px}.custom-slider.svelte-1mvnu54::-moz-range-progress{height:3px;background:#7cf7c5;border-radius:2px}.custom-slider.svelte-1mvnu54::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:#e4e6ea;border:2px solid #7cf7c5;border-radius:50%;cursor:pointer;box-shadow:0 1px 3px #0006;transition:all .12s ease}.custom-slider.svelte-1mvnu54::-moz-range-thumb{width:12px;height:12px;background:#e4e6ea;border:2px solid #7cf7c5;border-radius:50%;cursor:pointer;box-shadow:0 1px 3px #0006;transition:all .12s ease}.custom-slider.svelte-1mvnu54:hover::-webkit-slider-thumb{transform:scale(1.15);box-shadow:0 2px 6px #7cf7c54d,0 0 0 4px #7cf7c51a}.custom-slider.svelte-1mvnu54:hover::-moz-range-thumb{transform:scale(1.15);box-shadow:0 2px 6px #7cf7c54d,0 0 0 4px #7cf7c51a}.custom-slider.svelte-1mvnu54:active::-webkit-slider-thumb{transform:scale(1.05)}.custom-slider.svelte-1mvnu54:active::-moz-range-thumb{transform:scale(1.05)}.slider-value-input.svelte-1mvnu54{width:52px;height:28px;box-sizing:border-box;border:1px solid #2a2d33;border-radius:5px;background:#17191c;color:#e4e6ea;font-size:11px;font-variant-numeric:tabular-nums;text-align:center;padding:0 6px;outline:none;transition:all .12s ease}.slider-value-input.svelte-1mvnu54:hover{border-color:#363d4b}.slider-value-input.svelte-1mvnu54:focus{border-color:#7cf7c5;box-shadow:0 0 0 2px #7cf7c51f}.text-input.svelte-1mvnu54{width:100%;min-height:72px;box-sizing:border-box;border:1px solid #2a2d33;border-radius:6px;background:#17191c;color:#e4e6ea;font:inherit;font-size:12px;line-height:1.5;padding:8px 10px;outline:none;resize:vertical;transition:all .12s ease}.text-input.svelte-1mvnu54:hover{border-color:#363d4b}.text-input.svelte-1mvnu54:focus{border-color:#7cf7c5;background:#1a1c20;box-shadow:0 0 0 2px #7cf7c51f}.color-input.svelte-1mvnu54{width:100%;height:36px;box-sizing:border-box;border:1px solid #2a2d33;border-radius:6px;background:#17191c;padding:4px;cursor:pointer;transition:all .12s ease}.color-input.svelte-1mvnu54:hover{border-color:#363d4b}.color-input.svelte-1mvnu54:focus{border-color:#7cf7c5;box-shadow:0 0 0 2px #7cf7c51f}.preset-cards.svelte-1mvnu54{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.preset-option.svelte-1mvnu54{height:32px;display:flex;align-items:center;justify-content:center;border:1px solid #2a2d33;border-radius:5px;background:#17191c;color:#d8dce2;font-size:11px;font-weight:500;cursor:pointer;transition:all .12s ease}.preset-option.svelte-1mvnu54:hover{background:#1a1c20;border-color:#363d4b}.preset-option.active.svelte-1mvnu54{background:#1a2f28;border-color:#33584d;color:#7cf7c5;box-shadow:inset 0 0 0 1px #7cf7c533}.easing-options.svelte-1mvnu54{display:flex;flex-direction:column;gap:4px}.easing-option.svelte-1mvnu54{height:30px;display:flex;align-items:center;justify-content:flex-start;border:1px solid transparent;border-radius:5px;background:transparent;color:#d8dce2;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;padding:0 10px;text-align:left;cursor:pointer;transition:all .12s ease}.easing-option.svelte-1mvnu54:hover{background:#1a1c20;border-color:#2a2d33}.easing-option.active.svelte-1mvnu54{background:#1a2f28;border-color:#33584d;color:#7cf7c5}.empty.svelte-1mvnu54{color:#858a92;font-size:13px}.timeline-panel.svelte-1mvnu54{flex:0 0 var(--timeline-height);min-height:0;display:flex;flex-direction:column;background:#0d0e10;border-top:1px solid #24262a}.timeline-resizer.svelte-1mvnu54{flex:0 0 7px;width:100%;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-bottom:1px solid #24262a;background:#0d0e10;cursor:ns-resize}.timeline-resizer.svelte-1mvnu54 span:where(.svelte-1mvnu54){width:34px;height:2px;border-radius:1px;background:#3b4047}.timeline-resizer.svelte-1mvnu54:hover span:where(.svelte-1mvnu54),.timeline-resizer.svelte-1mvnu54:focus-visible span:where(.svelte-1mvnu54){background:#7cf7c5}.timeline-toolbar.svelte-1mvnu54{flex:0 0 46px;display:grid;grid-template-columns:minmax(280px,1fr) auto minmax(280px,1fr);align-items:center;gap:14px;padding:0 12px;border-bottom:1px solid #24262a;background:#111214}.playback-controls.svelte-1mvnu54,.timeline-actions.svelte-1mvnu54,.timeline-context.svelte-1mvnu54{display:flex;align-items:center;gap:8px}.timeline-actions.svelte-1mvnu54{min-width:0;justify-content:flex-end}.timeline-context.svelte-1mvnu54{min-width:0;color:#858a92;font-size:11px}.timeline-context.svelte-1mvnu54 span:where(.svelte-1mvnu54){max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.control-btn.svelte-1mvnu54{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid #2c3035;border-radius:5px;background:#17191c;color:#fff;cursor:pointer}.control-btn.svelte-1mvnu54:hover{background:#202328;border-color:#3a3f46}.play-btn.svelte-1mvnu54{border:none;background:#e6e8ec;color:#09090a}.timecode.svelte-1mvnu54{min-width:50px;color:#f1f2f4;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:600}.framecode.svelte-1mvnu54{color:#777d86;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}.timeline-command.svelte-1mvnu54,.audio-chip.svelte-1mvnu54{height:28px;display:inline-flex;align-items:center;gap:6px;border:1px solid #2c3035;border-radius:5px;background:#17191c;color:#d8dce2;padding:0 9px;font-size:11px}.timeline-command.svelte-1mvnu54{cursor:pointer}.timeline-command.svelte-1mvnu54:hover{background:#202328}.audio-chip.svelte-1mvnu54{max-width:170px;overflow:hidden;color:#cdb5e5;text-overflow:ellipsis;white-space:nowrap}.file-input.svelte-1mvnu54,.timeline-panel.svelte-1mvnu54 audio:where(.svelte-1mvnu54){display:none}.timeline-scroll.svelte-1mvnu54{flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch;overflow:auto;scrollbar-width:thin;scrollbar-color:#34373d #0d0e10}.ruler-row.svelte-1mvnu54,.timeline-row.svelte-1mvnu54{width:100%;min-width:var(--timeline-content-width, 820px);display:grid;grid-template-columns:220px minmax(600px,1fr)}.ruler-row.svelte-1mvnu54{position:sticky;order:-10000;top:0;z-index:4;height:30px;background:#111214}.timeline-row.svelte-1mvnu54{min-height:42px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#d8dce2;text-align:left}.timeline-row.svelte-1mvnu54:hover,.timeline-row.selected.svelte-1mvnu54{background:#151719}.timeline-row.selected.svelte-1mvnu54 .track-label:where(.svelte-1mvnu54){color:#f1f2f4;box-shadow:inset 2px 0 #7cf7c5}.track-label.svelte-1mvnu54{min-width:0;display:flex;align-items:center;gap:8px;padding:0 11px;border-right:1px solid #24262a;border-bottom:1px solid #1d1f22;color:#a8adb5;border-top:0;border-left:0;background:transparent;font:inherit;font-size:11px;text-align:left;cursor:default}.track-label.svelte-1mvnu54 strong:where(.svelte-1mvnu54){min-width:0;overflow:hidden;font-size:11px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.track-thumb.svelte-1mvnu54{flex:0 0 28px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #2c3138;border-radius:3px;background:#111419;color:#858c95}.track-copy.svelte-1mvnu54{min-width:0;display:flex;flex-direction:column;gap:2px}.track-copy.svelte-1mvnu54 small:where(.svelte-1mvnu54){max-width:82px;overflow:hidden;color:#676d75;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.track-controls.svelte-1mvnu54{margin-left:auto;display:flex;align-items:center;gap:2px}.track-control.svelte-1mvnu54{width:24px;height:24px;padding:0;display:grid;place-items:center;border:0;border-radius:4px;background:transparent;color:#737a83;cursor:pointer}.track-control.svelte-1mvnu54:hover{color:#dce1e6;background:#202329}.track-control.active.svelte-1mvnu54{color:#f0b26d}.track-label.track-hidden.svelte-1mvnu54 .track-copy:where(.svelte-1mvnu54){opacity:.55}.track-time.svelte-1mvnu54{margin-left:auto;color:#676d75;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;white-space:nowrap}.ruler-label.svelte-1mvnu54{color:#777d86;font-size:10px;font-weight:700;text-transform:uppercase}.ruler.svelte-1mvnu54,.track-lane.svelte-1mvnu54{position:relative;border-bottom:1px solid #1d1f22;background-image:repeating-linear-gradient(90deg,transparent 0,transparent 59px,rgba(255,255,255,.035) 60px)}.ruler-tick.svelte-1mvnu54{position:absolute;top:8px;color:#676d75;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;transform:translate(-50%);pointer-events:none}.playhead-marker.svelte-1mvnu54{position:absolute;z-index:2;top:0;bottom:-1px;width:2px;background:#f1f2f4;transform:translate(-50%);pointer-events:none}.playhead-marker.svelte-1mvnu54:before{content:"";position:absolute;top:0;left:50%;width:0;height:0;border-top:7px solid #f1f2f4;border-right:6px solid transparent;border-left:6px solid transparent;transform:translate(-50%)}.drop-indicator.svelte-1mvnu54{position:absolute;z-index:3;top:0;bottom:-1px;width:3px;background:#7cf7c5;transform:translate(-50%);pointer-events:none;box-shadow:0 0 8px #7cf7c599}.drop-indicator.svelte-1mvnu54:before{content:"";position:absolute;top:0;left:50%;width:0;height:0;border-top:8px solid #7cf7c5;border-right:7px solid transparent;border-left:7px solid transparent;transform:translate(-50%)}.timeline-scroll.drop-target.svelte-1mvnu54{background:#7cf7c50d}.clip-row.svelte-1mvnu54 .track-label:where(.svelte-1mvnu54){background:#0d0e10}.timeline-clip.svelte-1mvnu54{border:2px solid #7cf7c5;background:#7cf7c51a}.clip-trim-label.svelte-1mvnu54{position:absolute;z-index:1;right:22px;bottom:2px;left:4px;overflow:hidden;color:#ffffffd1;font-size:8px;line-height:10px;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.timeline-clip.selected-clip.svelte-1mvnu54{border-color:#f1f2f4;box-shadow:0 0 0 1px #7cf7c5}.transition-cut.svelte-1mvnu54{position:absolute;z-index:6;top:10px;width:16px;height:16px;padding:0;border:1px solid #515860;border-radius:4px;background:#15181c;color:#9ba1a9;font-size:12px;line-height:14px;cursor:pointer;transform:translate(-50%);transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}.transition-cut.has-transition.svelte-1mvnu54{border-color:#7cf7c5;background:#1c4a3d;color:#ecfff7;box-shadow:0 0 0 2px #0d0e10d9}.transition-cut.drop-ready.svelte-1mvnu54{width:22px;height:22px;top:7px;border-color:#7cf7c5;background:#243d35;color:#fff;box-shadow:0 0 12px #7cf7c5a6}.transition-cut.selected-transition.svelte-1mvnu54{border-color:#fff;box-shadow:0 0 0 2px #7cf7c5,0 0 12px #7cf7c58c}.clip-delete.svelte-1mvnu54{position:absolute;top:2px;right:2px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border:none;border-radius:3px;background:#ef4444e6;color:#fff;opacity:0;cursor:pointer;transition:opacity .15s ease;z-index:2}.timeline-clip.svelte-1mvnu54:hover .clip-delete:where(.svelte-1mvnu54){opacity:1}.clip-delete.svelte-1mvnu54:hover{background:#dc2626}.timeline-scrubber.svelte-1mvnu54{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.track-lane.svelte-1mvnu54{min-height:41px}.clip.svelte-1mvnu54{position:absolute;top:7px;height:27px;min-width:5px;border:1px solid #536070;border-radius:3px;background:#34404e;box-sizing:border-box;overflow:visible}.clip-media.svelte-1mvnu54,.clip-color.svelte-1mvnu54,.clip-text.svelte-1mvnu54{position:absolute;inset:1px;overflow:hidden;border-radius:2px;pointer-events:none}.clip-media.svelte-1mvnu54{background-color:#11151a;background-repeat:repeat-x;background-position:left center;background-size:auto 100%;opacity:.8}.video-clip-media.svelte-1mvnu54{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#15241f,#17202b);color:#7cf7c5}.clip-color.svelte-1mvnu54{opacity:.8}.clip-text.svelte-1mvnu54{padding:5px 8px;color:#f4f7f9e6;font-size:10px;line-height:15px;text-overflow:ellipsis;white-space:nowrap}.clip-select.svelte-1mvnu54{position:absolute;inset:0;width:100%;padding:0;border:0;border-radius:2px;background:transparent;cursor:grab;touch-action:none}.clip-select.svelte-1mvnu54:active{cursor:grabbing}.clip-ghost.svelte-1mvnu54{position:absolute;z-index:3;top:6px;height:27px;border:1px dashed #7cf7c5;border-radius:3px;background:#7cf7c524;pointer-events:none}.clip-ghost.invalid.svelte-1mvnu54{border-color:#ff6b74;background:#ff6b7424}.trim-handle.svelte-1mvnu54{position:absolute;z-index:2;top:-2px;bottom:-2px;width:min(8px,30%);padding:0;border:0;border-radius:2px;background:#c7d0d9;opacity:0;pointer-events:none;cursor:ew-resize}.trim-start.svelte-1mvnu54{left:-1px}.trim-end.svelte-1mvnu54{right:-1px}.timeline-row.svelte-1mvnu54:hover .trim-handle:where(.svelte-1mvnu54),.timeline-row.selected.svelte-1mvnu54 .trim-handle:where(.svelte-1mvnu54),.trim-handle.svelte-1mvnu54:focus-visible{opacity:1;pointer-events:auto}.element-clip.selected-clip.svelte-1mvnu54{border-color:#69cda9;background:#31594d}.audio-clip.svelte-1mvnu54{border-color:#725d86;background:#4e405d}.mask-select.svelte-1mvnu54{min-height:34px;width:100%}.toggle-row.svelte-1mvnu54{display:flex;align-items:center;gap:8px;margin:-2px 0 10px;color:#b6bbc2;font-size:11px;cursor:pointer}.toggle-row.svelte-1mvnu54 input:where(.svelte-1mvnu54){accent-color:#7cf7c5}.keyframe-marker.svelte-1mvnu54{position:absolute;z-index:5;top:50%;width:10px;height:10px;padding:0;border:1px solid #111318;border-radius:1px;background:#f4b860;box-shadow:0 0 0 1px #f4b86038;transform:translate(-50%,-50%) rotate(45deg);cursor:ew-resize;touch-action:none}.keyframe-marker.svelte-1mvnu54:hover,.keyframe-marker.selected-keyframe.svelte-1mvnu54{background:#fff1c9;box-shadow:0 0 0 2px #f4b860}.drag-keyframe.svelte-1mvnu54{pointer-events:none}.keyframe-add.svelte-1mvnu54{position:absolute;z-index:5;top:50%;width:15px;height:15px;padding:0;display:grid;place-items:center;border:1px solid #2f6d59;border-radius:50%;background:#17362d;color:#b8ffe4;font-size:12px;line-height:1;transform:translate(-50%,-50%);cursor:pointer;opacity:0}.timeline-row.svelte-1mvnu54:hover .keyframe-add:where(.svelte-1mvnu54),.timeline-row.selected.svelte-1mvnu54 .keyframe-add:where(.svelte-1mvnu54){opacity:1}.keyframe-add.svelte-1mvnu54:hover{background:#1d4538}.keyframe-controls.svelte-1mvnu54{display:flex;align-items:center;gap:8px}.keyframe-controls.svelte-1mvnu54 .timeline-command:where(.svelte-1mvnu54){flex:1}.keyframe-controls.svelte-1mvnu54 .number-input-wrapper:where(.svelte-1mvnu54){width:84px}.easing-input.svelte-1mvnu54{margin-top:8px;min-height:32px}.playhead.svelte-1mvnu54{position:absolute;z-index:2;top:0;bottom:0;width:1px;background:#f1f2f4;box-shadow:0 0 0 1px #00000073;pointer-events:none}.danger-btn.svelte-1mvnu54:hover{border-color:#714044;background:#2b1719;color:#ff9da5}.source-toggle.svelte-1mvnu54{position:absolute;right:316px;bottom:calc(var(--timeline-height) + 10px);border:1px solid #2c3035;border-radius:6px;background:#111214;color:#d8dce2;padding:8px 10px;font-size:12px;cursor:pointer}.code-overlay.svelte-1mvnu54{position:absolute;top:0;left:0;right:0;bottom:var(--timeline-height);background:#050506e0;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;animation:svelte-1mvnu54-fadeIn .2s ease-out}@keyframes svelte-1mvnu54-fadeIn{0%{opacity:0}to{opacity:1}}.code-panel.svelte-1mvnu54{width:90%;max-width:1200px;height:80%;background:#111214;border:1px solid #2c3035;border-radius:8px;display:flex;flex-direction:column;box-shadow:0 16px 64px #000c;animation:svelte-1mvnu54-slideUp .2s ease-out}@keyframes svelte-1mvnu54-slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.code-header.svelte-1mvnu54{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #24262a}.code-header.svelte-1mvnu54 h3:where(.svelte-1mvnu54){margin:0;font-size:18px;font-weight:600;color:#f1f2f4}.close-btn.svelte-1mvnu54{width:36px;height:36px;background:transparent;border:1px solid #2c3035;border-radius:6px;color:#8e939b;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.close-btn.svelte-1mvnu54:hover{background:#202328;color:#fff;border-color:#3a3f46}.code-textarea.svelte-1mvnu54{flex:1;padding:24px;background:#111214;border:none;color:#e6e8ec;font-family:Fira Code,Courier New,monospace;font-size:15px;line-height:1.6;resize:none;outline:none;tab-size:2}.code-textarea.svelte-1mvnu54::placeholder{color:#6d737c}.error-banner.svelte-1mvnu54{margin:12px;padding:12px 14px;background:#ff6b6b14;border:1px solid rgba(255,107,107,.28);border-radius:6px;color:#ff6b6b;font-size:12px;font-family:monospace}@media(max-width:900px){.workbench.svelte-1mvnu54,.workbench.chat-open.svelte-1mvnu54{grid-template-columns:1fr}.nav-rail.svelte-1mvnu54,.content-panel.svelte-1mvnu54,.chat-drawer.svelte-1mvnu54,.chat-drawer.collapsed.svelte-1mvnu54,.properties-panel.svelte-1mvnu54{display:none}.source-toggle.svelte-1mvnu54{right:16px}.timeline-toolbar.svelte-1mvnu54{grid-template-columns:1fr auto}.timeline-context.svelte-1mvnu54{display:none}.timeline-actions.svelte-1mvnu54 .audio-chip:where(.svelte-1mvnu54),.framecode.svelte-1mvnu54{display:none}}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#09090a}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.app.svelte-18ujb4i{width:100%;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:#09090a}.app.svelte-18ujb4i .motion-editor{flex:1 1 auto;min-height:0}.top-bar.svelte-18ujb4i{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 18px;background:#101113;border-bottom:1px solid #24262a;box-shadow:0 1px #ffffff08 inset}.brand.svelte-18ujb4i{display:flex;align-items:center;gap:10px;min-width:0}.logo-shell.svelte-18ujb4i{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#15171a;border:1px solid #2a2d32;box-shadow:0 10px 24px #00000047}.brand.svelte-18ujb4i .logo:where(.svelte-18ujb4i){width:24px;height:24px;display:block;border-radius:7px}.brand.svelte-18ujb4i h1:where(.svelte-18ujb4i){margin:0;font-size:15px;font-weight:650;color:#f2f3f5;letter-spacing:0}.product-hunt-badge.svelte-18ujb4i{flex:0 0 auto;display:flex;margin-left:4px;border-radius:4px;overflow:hidden}.product-hunt-badge.svelte-18ujb4i img:where(.svelte-18ujb4i){width:125px;height:27px;display:block}.file-info.svelte-18ujb4i{display:flex;align-items:center;gap:8px;min-width:0;color:#8e939b;font-size:13px}.file-info.svelte-18ujb4i span:where(.svelte-18ujb4i){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.actions.svelte-18ujb4i{display:flex;gap:8px;flex:0 0 auto}.file-input.svelte-18ujb4i{display:none}.btn.svelte-18ujb4i{display:flex;align-items:center;gap:8px;padding:8px 13px;background:#17191c;border:1px solid #2c3035;border-radius:6px;color:#e4e6ea;font-size:13px;font-weight:500;cursor:pointer;transition:background .16s,border-color .16s,color .16s}.btn.svelte-18ujb4i:hover{background:#202328;border-color:#3a3f46;color:#fff}.btn.svelte-18ujb4i:disabled{cursor:not-allowed;opacity:.55}.export-action.svelte-18ujb4i{min-width:116px;justify-content:center}.btn-primary.svelte-18ujb4i{background:#e6e8ec;border-color:#e6e8ec;color:#09090a;font-weight:600}.btn-primary.svelte-18ujb4i:hover{background:#fff;border-color:#fff;color:#050506}.github-btn.svelte-18ujb4i{min-width:92px;justify-content:center;padding:8px 10px;box-sizing:border-box;text-decoration:none}.docs-btn.svelte-18ujb4i{justify-content:center;padding:8px 10px;box-sizing:border-box;text-decoration:none}.welcome-btn.svelte-18ujb4i{width:36px;justify-content:center;padding:0;text-decoration:none}.github-btn.svelte-18ujb4i img:where(.svelte-18ujb4i){width:18px;height:18px;display:block}.github-btn.svelte-18ujb4i strong:where(.svelte-18ujb4i){padding-left:7px;border-left:1px solid #34383e;color:#fff;font-size:12px}.github-btn.svelte-18ujb4i .star-count:where(.svelte-18ujb4i){width:auto;height:18px;border-left:1px solid #34383e;padding-left:7px}@media(max-width:1120px){.product-hunt-badge.svelte-18ujb4i{display:none}}@media(max-width:760px){.file-info.svelte-18ujb4i{display:none}}@media(max-width:520px){.top-bar.svelte-18ujb4i{gap:8px;padding:8px}.brand.svelte-18ujb4i h1:where(.svelte-18ujb4i),.action-label.svelte-18ujb4i{display:none}.actions.svelte-18ujb4i{gap:5px}.btn.svelte-18ujb4i,.export-action.svelte-18ujb4i{width:36px;min-width:36px;height:36px;justify-content:center;padding:0}.github-btn.svelte-18ujb4i{width:auto;min-width:58px;padding:0 8px}}