@font-face{font-family:Figtree;src:url("fonts/Figtree-VariableFont_wght.ttf") format("truetype");font-style:normal;font-weight:300 900;font-display:swap}
@font-face{font-family:Figtree;src:url("fonts/Figtree-Italic-VariableFont_wght.ttf") format("truetype");font-style:italic;font-weight:300 900;font-display:swap}
.paint-control{display:grid;gap:9px;border:1px solid var(--line);border-radius:11px;padding:10px;background:var(--surface)}.paint-body{display:grid;gap:8px}.paint-body[data-enabled="false"]{opacity:.38;pointer-events:none;filter:saturate(.35)}
.effect-combination .effect-summary{position:relative;grid-template-columns:auto minmax(0,1fr);column-gap:6px;text-align:left}.effect-combination .effect-summary i{grid-row:1/3;align-self:center;color:var(--fg3);font-size:15px}.effect-combination .effect-summary[data-active="true"]{border-color:var(--gold);background:var(--graphite);color:var(--mist);box-shadow:inset 0 0 0 1px var(--gold)}.effect-combination .effect-summary[data-active="true"] i{color:var(--gold)}.effect-combination .effect-summary[data-active="true"] small{color:var(--moss-200)}
:root{
  --graphite:#141e19;--petroleum:#1e372d;--moss:#325a41;--gold:#ebcd50;--mist:#f0f0f0;--white:#fff;
  --moss-600:#2a4d37;--moss-400:#4c7558;--moss-200:#a9c2b2;--moss-050:#e6eee9;
  --line:#d8d9d6;--line-dark:#2c3a33;--fg:#141e19;--fg2:#46554d;--fg3:#6e7b74;--surface:#fff;--panel:#fff;--stage:#1e2722;
  --danger:#c85f4b;--radius:10px;--radius-lg:16px;--font:Figtree,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--mist);color:var(--fg);font:14px/1.4 var(--font);overflow:hidden;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:2px}::selection{background:var(--gold);color:var(--graphite)}[hidden]{display:none!important}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-shell{height:100vh;min-height:640px;display:grid;grid-template-rows:auto minmax(0,1fr) auto}.topbar{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:11px 18px;background:var(--surface);border-bottom:1px solid var(--line)}.brand{min-width:0;display:flex;align-items:center;gap:12px}.brand-mark{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--moss-200);border-radius:999px}.brand-mark img{width:25px;height:19px}.brand h1{margin:0;font-size:21px;line-height:1;font-weight:820;letter-spacing:-.025em}.brand p{margin:5px 0 0;color:var(--fg3);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}.top-actions{display:flex;align-items:center;gap:8px}.button,.tool-button,.mini-button,.dialog-close{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:0 13px;background:var(--surface);font-weight:680}.button:hover:not(:disabled),.tool-button:hover:not(:disabled),.mini-button:hover:not(:disabled){border-color:var(--moss-400);background:var(--moss-050)}.button--primary{border-color:var(--moss);background:var(--moss);color:var(--mist)}.button--primary:hover:not(:disabled){background:var(--moss-600);color:#fff}.icon-button{width:38px;padding:0}.button i,.tool-button i{font-size:17px}
.workspace{min-height:0;display:grid;grid-template-columns:282px minmax(430px,1fr) 328px}.panel{min-width:0;min-height:0;background:var(--panel);overflow:auto}.panel--left{border-right:1px solid var(--line)}.panel--right{border-left:1px solid var(--line)}.panel-section{padding:16px}.section-heading{min-height:30px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}.section-heading h2{margin:0;font-size:13px;font-weight:780}.section-heading>span{color:var(--fg3);font-size:11px}.library-head{position:sticky;z-index:4;top:0;background:var(--panel);border-bottom:1px solid var(--line)}.search{width:100%;height:38px;border:1px solid var(--line);border-radius:999px;padding:0 13px;background:var(--mist)}.category-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:10px}.category-tabs button,.inspector-tabs button{min-height:32px;border:0;border-radius:8px;padding:0 5px;background:transparent;color:var(--fg3);font-size:10px;font-weight:750}.category-tabs button[data-active="true"],.inspector-tabs button[data-active="true"]{background:var(--graphite);color:var(--mist)}.effect-library{display:grid;gap:7px;padding:10px 12px 22px}.effect-card{width:100%;min-height:64px;display:grid;grid-template-columns:78px minmax(0,1fr) auto;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:7px;background:var(--surface);text-align:left}.effect-card:hover{border-color:var(--moss-400);box-shadow:0 5px 18px rgba(20,30,25,.07)}.effect-card[data-active="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}.effect-card canvas{width:78px;height:46px;display:block;border-radius:8px;background:var(--graphite)}.effect-copy{min-width:0;display:grid;gap:2px}.effect-copy strong{overflow:hidden;text-overflow:ellipsis;font-size:12px;white-space:nowrap}.effect-copy small{display:-webkit-box;overflow:hidden;color:var(--fg3);font-size:9px;line-height:1.25;-webkit-box-orient:vertical;-webkit-line-clamp:2}.effect-source{align-self:start;border-radius:999px;padding:3px 5px;background:var(--moss-050);color:var(--moss);font-size:7px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.library-empty{padding:32px 12px;color:var(--fg3);font-size:12px;text-align:center}
.editor{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(200px,1fr) auto;background:var(--stage)}.editor-toolbar{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 14px;background:var(--surface);border-bottom:1px solid var(--line)}.media-meta{min-width:0;display:grid;gap:2px}.media-meta strong,.media-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-meta strong{font-size:12px}.media-meta span{color:var(--fg3);font-size:10px}.canvas-tools{display:flex;align-items:center;gap:8px}.compact-field{display:flex;align-items:center;gap:6px;color:var(--fg3);font-size:10px}.compact-field select{height:32px;border:1px solid var(--line);border-radius:8px;padding:0 7px;background:var(--mist);font-weight:650}.tool-button{min-height:32px;border-radius:8px;padding:0 9px}.stage-area{position:relative;min-height:0;display:grid;place-items:center;overflow:hidden;background-color:#18201c;background-image:linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.025) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.025) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.025) 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.dropzone{width:min(480px,80%);display:grid;place-items:center;gap:12px;border:1px dashed var(--moss-400);border-radius:18px;padding:42px 24px;background:rgba(230,238,233,.05);color:var(--mist);text-align:center}.dropzone:hover,.dropzone.is-dragover{border-color:var(--gold);background:rgba(235,205,80,.08)}.dropzone strong{font-size:clamp(18px,2.2vw,28px);line-height:1.18}.dropzone small{color:var(--moss-200);font-size:9px;font-weight:700;letter-spacing:.08em}.drop-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:999px;background:var(--moss);color:var(--mist)}.drop-icon i{font-size:28px}.canvas-shell{position:relative;max-width:calc(100% - 24px);max-height:calc(100% - 24px);line-height:0;box-shadow:0 18px 50px rgba(0,0,0,.34)}#previewCanvas{display:block;max-width:100%;max-height:calc(100vh - 330px);object-fit:contain;touch-action:none}.selection-box{position:absolute;z-index:2;border:1px solid var(--gold);box-shadow:0 0 0 1px rgba(20,30,25,.75);pointer-events:none}.selection-box::before{content:"";position:absolute;right:-4px;bottom:-4px;width:7px;height:7px;border-radius:999px;background:var(--gold)}
.timeline{height:206px;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);background:var(--surface);border-top:1px solid var(--line)}.timeline-head{min-height:48px;display:grid;grid-template-columns:auto minmax(100px,1fr) auto auto;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid var(--line)}.timeline-play{width:34px;height:34px;border:0;border-radius:999px;background:var(--moss);color:var(--mist)}.timeline-head input[type="range"]{width:100%}.timeline-head>span{min-width:105px;color:var(--fg2);font-size:10px;font-variant-numeric:tabular-nums;text-align:right}.duration-field{display:flex;align-items:center;gap:5px;color:var(--fg3);font-size:10px}.duration-field input{width:58px;height:30px;border:1px solid var(--line);border-radius:7px;padding:0 6px;background:var(--mist)}.timeline-ruler{display:grid;grid-template-columns:116px 1fr;align-items:center;min-height:24px;padding:0 12px;color:var(--fg3);font-size:9px}.timeline-ruler>div{display:flex;justify-content:space-between}.timeline-layers{min-height:0;overflow:auto;padding:0 12px 10px}.timeline-row{display:grid;grid-template-columns:110px minmax(100px,1fr);align-items:center;gap:6px;min-height:33px}.timeline-row-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:650}.clip-track{position:relative;height:22px;border-radius:6px;background:var(--moss-050);overflow:hidden}.clip-bar{position:absolute;top:2px;bottom:2px;min-width:10px;border-radius:5px;background:var(--moss);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);cursor:grab}.clip-bar[data-selected="true"]{background:var(--gold)}.clip-handle{position:absolute;top:0;bottom:0;width:8px;background:rgba(20,30,25,.3);cursor:ew-resize}.clip-handle--start{left:0}.clip-handle--end{right:0}.playhead{position:absolute;z-index:3;top:0;bottom:0;width:1px;background:var(--danger);pointer-events:none}
.panel-section--layers{border-bottom:1px solid var(--line)}.mini-button{min-height:30px;padding:0 9px;font-size:10px}.empty-panel{display:grid;place-items:center;gap:8px;min-height:100px;border:1px dashed var(--line);border-radius:12px;padding:18px;color:var(--fg3);text-align:center}.empty-panel i{font-size:22px}.empty-panel p{max-width:25ch;margin:0;font-size:11px}.layer-list{display:grid;gap:7px}.layer-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;border:1px solid var(--line);border-radius:11px;padding:7px;background:var(--surface)}.layer-row[data-selected="true"]{border-color:var(--moss);background:var(--graphite);color:var(--mist)}.layer-grip{color:var(--fg3);font-size:17px}.layer-copy{min-width:0;display:grid;gap:2px;border:0;padding:0;background:transparent;text-align:left}.layer-copy strong,.layer-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-copy strong{font-size:11px}.layer-copy small{color:var(--fg3);font-size:9px}.layer-row[data-selected="true"] .layer-copy small{color:var(--moss-200)}.layer-actions{display:flex}.layer-action{width:27px;height:27px;border:0;border-radius:7px;background:transparent;color:inherit}.layer-action:hover{background:var(--moss-050);color:var(--fg)}.inspector-tabs{position:sticky;z-index:3;top:0;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:-16px -16px 14px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line)}.inspector{display:grid;gap:14px}.control-group{display:grid;gap:9px;padding-bottom:14px;border-bottom:1px solid var(--line)}.control-group:last-child{border:0}.control-group h3{margin:0;font-size:11px}.field{display:grid;gap:5px;color:var(--fg2);font-size:10px;font-weight:650}.field.inline{grid-template-columns:1fr auto;align-items:center}.field textarea,.field input[type="text"],.field input[type="number"],.field select{width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--mist)}.field textarea{min-height:78px;resize:vertical}.field input[type="range"]{width:100%;margin:0}.range-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.range-head output{color:var(--fg3);font-size:9px;font-variant-numeric:tabular-nums}.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.field-row--3{grid-template-columns:repeat(3,minmax(0,1fr))}.color-field{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:7px}.color-field input[type="color"]{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;padding:2px;background:var(--surface)}.color-field input[type="text"]{padding:7px}.palette{display:flex;gap:5px}.palette button{width:25px;height:25px;border:2px solid var(--surface);border-radius:999px;box-shadow:0 0 0 1px var(--line)}.font-actions,.effect-slot-head{display:flex;align-items:center;justify-content:space-between;gap:7px}.font-actions{justify-content:flex-start;flex-wrap:wrap}.subtle-button{min-height:30px;border:1px solid var(--line);border-radius:999px;padding:0 9px;background:transparent;font-size:9px;font-weight:700}.subtle-button:hover{border-color:var(--moss-400);background:var(--moss-050)}.font-status{min-height:13px;color:var(--fg3);font-size:9px}.effect-summary{display:grid;gap:4px;border:1px solid var(--line);border-radius:10px;padding:9px;background:var(--mist)}.effect-summary strong{font-size:11px}.effect-summary small{color:var(--fg3);font-size:9px}.effect-clear{border:0;background:transparent;color:var(--danger);font-size:9px;font-weight:700}.param-list{display:grid;gap:9px}.toggle-field{display:flex;align-items:center;justify-content:space-between;gap:8px}.toggle-field input{width:36px;height:19px;accent-color:var(--moss)}
.privacy-footer{min-height:30px;display:flex;align-items:center;justify-content:center;gap:6px;padding:5px 12px;background:var(--surface);border-top:1px solid var(--line);color:var(--fg3);font-size:10px}.privacy-footer i{color:var(--moss)}.notice{position:fixed;z-index:30;right:18px;bottom:45px;max-width:min(380px,calc(100vw - 36px));border-radius:10px;padding:11px 14px;background:var(--graphite);color:var(--mist);box-shadow:0 12px 30px rgba(0,0,0,.25);font-size:11px;opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s}.notice.is-visible{opacity:1;transform:none}.notice[data-tone="error"]{background:#7a3328}.modal{width:min(480px,calc(100vw - 28px));border:0;border-radius:18px;padding:0;background:var(--surface);color:var(--fg);box-shadow:0 24px 90px rgba(0,0,0,.4)}.modal::backdrop{background:rgba(20,30,25,.72)}.modal-card{display:grid;gap:16px;padding:22px}.modal-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.modal-card h2{margin:0;font-size:23px}.modal-card p{margin:5px 0 0;color:var(--fg3);font-size:11px}.modal-card>label{display:grid;gap:6px;color:var(--fg2);font-size:11px;font-weight:650}.modal-card select{height:38px;border:1px solid var(--line);border-radius:8px;padding:0 9px;background:var(--mist)}.dialog-close{width:34px;min-height:34px;padding:0}.modal-note{padding:10px;border-radius:9px;background:var(--moss-050)}.export-submit{width:100%}.progress-wrap{display:grid;gap:6px}.progress-wrap progress{width:100%;accent-color:var(--moss)}
body[data-theme="dark"]{--fg:#f0f0f0;--fg2:#c6d0ca;--fg3:#9aaba1;--surface:#1e372d;--panel:#17231d;--line:#30473b;--stage:#0d1511;--moss-050:#243d32}body[data-theme="dark"] .brand-mark img{filter:brightness(0) invert(91%) sepia(56%) saturate(528%) hue-rotate(347deg) brightness(100%)}body[data-theme="dark"] .category-tabs button[data-active="true"],body[data-theme="dark"] .inspector-tabs button[data-active="true"]{background:var(--gold);color:var(--graphite)}body[data-theme="dark"] .effect-card,body[data-theme="dark"] .layer-row{background:#1c2c24}body[data-theme="dark"] .field input,body[data-theme="dark"] .field textarea,body[data-theme="dark"] .field select,body[data-theme="dark"] .compact-field select,body[data-theme="dark"] .modal-card select{background:#141e19;color:var(--mist)}
@media(max-width:1180px){.workspace{grid-template-columns:250px minmax(380px,1fr) 292px}.button span{display:none}.topbar{gap:12px}.category-tabs{grid-template-columns:repeat(2,1fr)}.effect-card{grid-template-columns:62px minmax(0,1fr)}.effect-card canvas{width:62px}.effect-source{display:none}}
@media(max-width:820px){body{overflow:auto}.app-shell{height:auto;min-height:100vh;display:block}.topbar{position:sticky;z-index:20;top:0}.brand p{display:none}.workspace{display:flex;flex-direction:column}.panel{overflow:visible}.editor{order:1;min-height:0;display:block}.panel--right{display:contents}.panel-section--layers{order:2}.panel--left{order:3;border:0;border-top:1px solid var(--line)}.panel-section--controls{order:4}.editor-toolbar{position:sticky;z-index:14;top:63px}.stage-area{position:sticky;z-index:13;top:117px;height:42svh;min-height:280px}.canvas-shell{height:calc(42svh - 20px);display:grid;place-items:center}.canvas-shell[hidden]{display:none}#previewCanvas{max-height:100%;max-width:100%}.timeline{height:190px}.panel-section--layers{position:sticky;z-index:12;top:calc(117px + 42svh);max-height:180px;overflow:auto;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 8px 18px rgba(20,30,25,.12)}.panel-section--controls{padding-bottom:34px;background:var(--panel)}.effect-library{grid-template-columns:repeat(2,minmax(0,1fr))}.library-head{top:63px}.privacy-footer{min-height:42px}.top-actions{margin-left:auto}}
@media(max-width:560px){.topbar{min-height:62px;padding:9px 10px}.brand-mark{width:34px;height:34px}.brand h1{max-width:145px;font-size:16px}.workspace{min-width:0}.editor-toolbar{top:62px;padding:6px 9px}.stage-area{top:111px;height:38svh;min-height:250px}.canvas-shell{height:calc(38svh - 18px)}.panel-section--layers{top:calc(111px + 38svh)}.effect-library{grid-template-columns:1fr}.timeline-head{grid-template-columns:auto 1fr auto}.timeline-head .duration-field{grid-column:1/-1;justify-self:end}.timeline{height:205px}.effect-card{grid-template-columns:78px minmax(0,1fr)}.effect-card canvas{width:78px}.field-row--3{grid-template-columns:1fr}.top-actions{gap:4px}.button{min-height:34px;padding:0 10px}.icon-button{width:34px}.category-tabs{grid-template-columns:repeat(4,1fr)}}
.range-value,.keyframe-tools{display:flex;align-items:center;gap:5px}.keyframe-button{width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;padding:0;background:var(--surface);color:var(--fg3)}.keyframe-button[data-active="true"]{border-color:var(--gold);background:var(--gold);color:var(--graphite)}.keyframe-easing{width:auto!important;min-height:22px!important;border-radius:6px!important;padding:1px 4px!important;font-size:8px}.keyframe-help{display:flex;align-items:center;gap:5px;margin:0;color:var(--fg3);font-size:9px}.keyframe-help i{color:var(--gold)}.timeline-keyframe{position:absolute;z-index:4;top:50%;width:10px;height:10px;border:1px solid var(--graphite);padding:0;background:var(--gold);transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 0 1px rgba(255,255,255,.5)}.timeline-keyframe:hover{width:12px;height:12px}.clip-track:has(.timeline-keyframe){overflow:visible}
.effect-image-drop{display:grid;gap:7px;border:1px dashed var(--moss-400);border-radius:11px;padding:8px;background:var(--moss-050);transition:.18s}.effect-image-drop.is-dragover{border-color:var(--gold);background:rgba(235,205,80,.18)}.effect-image-drop>[data-effect-image-upload]{display:grid;place-items:center;gap:3px;min-height:82px;border:0;border-radius:8px;padding:10px;background:var(--surface);color:var(--fg);text-align:center}.effect-image-drop>[data-effect-image-upload] i{color:var(--moss);font-size:22px}.effect-image-drop>[data-effect-image-upload] strong{font-size:10px}.effect-image-drop>[data-effect-image-upload] small,.effect-image-drop>span{color:var(--fg3);font-size:8px}.effect-image-drop>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.effect-image-clear{justify-self:start;border:0;padding:0;background:transparent;color:var(--danger);font-size:9px;font-weight:700}