:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.preview-point-bar{display:flex;align-items:center;height:24px;margin-top:8px;padding:4px 0}.preview-point-bar__marker{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;margin-left:-10px;margin-right:-10px;background:transparent;border:none;cursor:pointer;z-index:2;flex-shrink:0;transition:transform .15s ease}.preview-point-bar__marker--first{margin-left:0}.preview-point-bar__marker:hover{transform:scale(1.2)}.preview-point-bar__dot{display:block;width:10px;height:10px;border-radius:50%;background:#444;border:2px solid #333;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}.preview-point-bar__marker--active .preview-point-bar__dot{background:#666;border-color:#555}.preview-point-bar__marker--selected .preview-point-bar__dot{background:var(--accent, #007bff);border-color:var(--accent, #007bff);box-shadow:0 0 8px #007bff80}.preview-point-bar__segment{position:relative;height:20px;cursor:pointer;display:flex;align-items:center;flex-shrink:0}.preview-point-bar__segment .preview-point-bar__track{width:100%;height:4px;background:#333;border-radius:2px;transition:background .15s ease}.preview-point-bar__segment--active .preview-point-bar__track{background:var(--accent, #007bff)}.preview-point-bar__segment:hover .preview-point-bar__track{background:#444}.preview-point-bar__segment--active:hover .preview-point-bar__track{background:var(--accent, #007bff)}.preview-point-bar__gap{position:relative;height:20px;cursor:pointer;display:flex;align-items:center;flex-shrink:0}.preview-point-bar__gap .preview-point-bar__track{width:100%;height:4px;background:#333;border-radius:2px;transition:background .15s ease}.preview-point-bar__gap--active .preview-point-bar__track{background:var(--accent, #007bff)}.preview-point-bar__segment--pending .preview-point-bar__track,.preview-point-bar__gap--pending .preview-point-bar__track{background:#555;opacity:.5}.preview-point-bar__marker--pending .preview-point-bar__dot{background:#555;border-color:#444;opacity:.5}.preview-point-bar__marker--pending,.preview-point-bar__segment--pending,.preview-point-bar__gap--pending{pointer-events:none}.effect-card{display:flex;flex-direction:column;width:90px;background:#252525;border:1px solid #333;border-radius:6px;cursor:pointer;overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease,transform .1s ease,opacity .15s ease;-webkit-user-select:none;user-select:none}.effect-card:hover{border-color:#555;transform:translateY(-1px)}.effect-card--selected{border-color:var(--accent, #007bff);box-shadow:0 0 0 1px var(--accent, #007bff)}.effect-card--disabled{opacity:.5}.effect-card--disabled .effect-card__name{text-decoration:line-through;color:#666}.effect-card--layer{cursor:grab}.effect-card--layer:active{cursor:grabbing}.effect-card__action-bar{display:flex;justify-content:space-between;align-items:center;height:20px;padding:2px 4px;background:transparent}.effect-card--library .effect-card__action-bar{pointer-events:none}.effect-card__remove-btn{display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;background:transparent;border:none;border-radius:3px;color:#888;cursor:pointer;transition:color .15s ease,background .15s ease}.effect-card__remove-btn:hover{color:#ff6b6b;background:#ff6b6b26}.effect-card__visibility-btn{display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;background:transparent;border:none;border-radius:3px;color:#888;cursor:pointer;transition:color .15s ease,background .15s ease}.effect-card__visibility-btn:hover{color:#fff;background:#ffffff1a}.effect-card--disabled .effect-card__visibility-btn{color:#666}.effect-card__thumbnail{width:100%;aspect-ratio:1 / 1;background:transparent;overflow:hidden}.effect-card__thumbnail-img{width:100%;height:100%;object-fit:cover;display:block}.effect-card__thumbnail-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#333 25%,#252525 25%,#252525 50%,#333 50%,#333 75%,#252525 75%,#252525);background-size:16px 16px}.effect-card__name{padding:6px 4px;font-size:.7rem;color:#ccc;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:transparent}.layer-drop-zone{display:flex;align-items:center;justify-content:center;width:8px;height:138px;flex-shrink:0;transition:width .2s cubic-bezier(.25,.1,.25,1)}.layer-drop-zone--over{width:100px}:root{--bg-dark: #1a1a1a;--bg-panel: #2a2a2a;--text-main: #ffffff;--accent: #007bff}body,html,#root{margin:0;padding:0;height:100%;color:var(--text-main);background-color:var(--bg-dark);font-family:sans-serif;font-size:13px}.app-container{height:100vh;width:100vw;display:flex;justify-content:center;align-items:center}.import-screen{text-align:center}.btn-import{padding:1rem 2rem;font-size:1.5rem;cursor:pointer;background:var(--accent);color:#fff;border:none;border-radius:4px}.editor-container{display:grid;width:100%;height:100%;grid-template-columns:44px 240px 1fr 300px;grid-template-rows:1fr 200px}.sidebar-categories{grid-row:1 / 2;background:#111;display:flex;flex-direction:column}.sidebar-categories button{padding:.8rem 0;background:transparent;color:#888;border:none;cursor:pointer;writing-mode:vertical-rl;text-orientation:mixed;font-size:12px}.sidebar-categories button.active{color:#fff;background:var(--bg-panel)}.sidebar-library{grid-row:1 / 2;background:var(--bg-panel);border-right:1px solid #444;padding:1rem;overflow-y:auto}.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;padding-top:4px}.panel-header{display:flex;justify-content:space-between;align-items:center;background:#1a1a1a;margin:-1rem -1rem .75rem;padding:6px 12px;border-bottom:1px solid #333}.panel-header-title{font-size:.7rem;color:#666;text-transform:uppercase;letter-spacing:.5px}.library-collapse-btn{background:transparent;border:none;color:#888;font-size:1.2rem;cursor:pointer;padding:4px 8px;line-height:1;border-radius:4px}.library-collapse-btn:hover{color:#fff;background:#ffffff1a}.plugin-item{padding:8px;background:#333;margin-bottom:8px;cursor:pointer;border-radius:4px}.plugin-item:hover{background:#444}.main-area{grid-column:3;grid-row:1;background:#000;overflow:hidden;display:flex;flex-direction:column}.main-area.library-collapsed{grid-column:2 / 4}.preview-area{flex:1;display:flex;justify-content:center;align-items:center;overflow:hidden;padding:20px;background-image:linear-gradient(45deg,#222 25%,transparent 25%),linear-gradient(-45deg,#222 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#222 75%),linear-gradient(-45deg,transparent 75%,#222 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;position:relative}.preview-area canvas{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 0 20px #00000080}.layer-panel{grid-column:1 / -1;grid-row:2;background:#222;border-top:1px solid #444;padding:.5rem;overflow-x:auto;display:flex;flex-direction:column;align-items:center}.layer-list-horizontal{display:flex;gap:8px}.sidebar-controls{grid-column:4;grid-row:1 / 2;background:var(--bg-panel);border-left:1px solid #444;padding:1rem;overflow-y:auto}.sidebar-controls h4{margin:0 0 .5rem;font-size:.85rem}.toolbar-top-left,.toolbar-top-right,.toolbar-bottom-left,.toolbar-bottom-right{position:absolute;display:flex;gap:10px;z-index:10}.toolbar-top-left{top:10px;left:10px}.toolbar-top-right{top:10px;right:10px}.toolbar-bottom-left{bottom:10px;left:10px}.toolbar-bottom-right{bottom:10px;right:10px}.preview-area button{background:#0009;color:#fff;border:1px solid rgba(255,255,255,.3);padding:8px 12px;border-radius:4px;cursor:pointer;font-size:1rem}.preview-area button:hover:not(:disabled){background:#000c;border-color:#fff}.preview-area button:disabled{opacity:.5;cursor:not-allowed}.preview-grid{margin-bottom:1rem}.preview-grid-header{margin-bottom:.5rem;font-size:.95rem;color:#ccc}.preview-grid-items{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.preview-card{display:flex;flex-direction:column;min-width:0;border:1px solid #333;background:#1f1f1f;border-radius:6px;padding:0;color:var(--text-main);text-align:left;cursor:pointer;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease,transform .1s ease}.preview-card:hover{border-color:#555;transform:translateY(-1px)}.preview-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.preview-card-thumb{width:100%}.preview-card-image{width:100%;aspect-ratio:1 / 1;object-fit:cover;display:block;border-radius:0}.preview-card-placeholder{width:100%;aspect-ratio:1 / 1;background:linear-gradient(135deg,#2c2c2c 25%,#1b1b1b 25%,#1b1b1b 50%,#2c2c2c 50%,#2c2c2c 75%,#1b1b1b 75%,#1b1b1b);background-size:16px 16px;border:1px dashed #444;border-radius:0}.preview-card-label{padding:6px 8px;margin:0}.preview-card-title{font-size:.75rem;margin:0 0 2px}.preview-card-description{font-size:.65rem;color:#aaa}@media(max-aspect-ratio:1/1){.editor-container{grid-template-columns:44px 1fr;grid-template-rows:1fr 1fr 200px}.sidebar-categories{grid-column:1;grid-row:1 / 2}.sidebar-library{position:fixed;top:0;left:44px;width:240px;height:calc(50vh - 100px);z-index:100;box-shadow:4px 0 20px #00000080;border-right:1px solid #444}.main-area{grid-column:2;grid-row:1 / 2}.main-area.library-collapsed{grid-column:2}.sidebar-controls{grid-column:1 / -1;grid-row:2 / 3;border-left:none;border-top:1px solid #444;overflow-y:auto}.layer-panel{grid-column:1 / -1;grid-row:3 / 4}}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;height:20px}input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:#555}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #333;margin-top:-4px;box-shadow:0 1px 3px #0000004d}input[type=range]::-webkit-slider-thumb:hover{background:#eee}input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:#555}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #333;box-shadow:0 1px 3px #0000004d}input[type=range]::-moz-range-thumb:hover{background:#eee}input[type=range]:focus{outline:none}input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px #007bff66}input[type=range]:focus::-moz-range-thumb{box-shadow:0 0 0 2px #007bff66}