:root{--bg-primary: #f8f9fa;--bg-secondary: #ffffff;--bg-tertiary: #f1f3f5;--text-primary: #212529;--text-secondary: #868e96;--border-color: #dee2e6;--accent-color: #4c6ef5;--accent-hover: #364fc7;--danger-color: #fa5252;--danger-hover: #c92a2a;--success-color: #40c057;--shadow-sm: 0 1px 3px rgba(0,0,0,.05);--shadow-md: 0 4px 6px -1px rgba(0,0,0,.1);--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1);--overlay-bg: rgba(255, 255, 255, .85);--checker-light: #eee;--checker-dark: #ddd;--animation-fast: .2s;--animation-normal: .3s;--animation-slow: .5s;--easing-smooth: cubic-bezier(.4, 0, .2, 1);--easing-bounce: cubic-bezier(.68, -.55, .265, 1.55)}[data-theme=dark]{--bg-primary: #101113;--bg-secondary: #1a1b1e;--bg-tertiary: #25262b;--text-primary: #e9ecef;--text-secondary: #909296;--border-color: #2c2e33;--accent-color: #5c7cfa;--accent-hover: #4263eb;--danger-color: #ff6b6b;--danger-hover: #fa5252;--success-color: #51cf66;--shadow-sm: 0 1px 3px rgba(0,0,0,.3);--shadow-md: 0 4px 6px -1px rgba(0,0,0,.4);--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.5);--overlay-bg: rgba(0, 0, 0, .85);--checker-light: #222;--checker-dark: #333;--animation-fast: .2s;--animation-normal: .3s;--animation-slow: .5s;--easing-smooth: cubic-bezier(.4, 0, .2, 1);--easing-bounce: cubic-bezier(.68, -.55, .265, 1.55)}body{background-color:var(--bg-primary);color:var(--text-primary);transition:background-color var(--animation-normal) var(--easing-smooth),color var(--animation-normal) var(--easing-smooth);margin:0;min-height:100vh}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes ripple{0%{transform:scale(0);opacity:1}to{transform:scale(4);opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes glow{0%,to{box-shadow:0 0 5px var(--accent-color),0 0 10px var(--accent-color)}50%{box-shadow:0 0 20px var(--accent-color),0 0 30px var(--accent-color)}}body.modal-open{overflow:hidden}.container{width:100%;max-width:1000px;margin:0 auto;padding:2rem;font-family:Inter,system-ui,-apple-system,sans-serif;box-sizing:border-box;animation:fadeIn var(--animation-slow) var(--easing-smooth)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;animation:fadeInUp var(--animation-normal) var(--easing-smooth)}.header-titles{display:flex;flex-direction:column;gap:.4rem}.header-actions{display:flex;align-items:center;gap:1rem}.header-icon-link{color:var(--text-primary);opacity:.7;transition:all var(--animation-fast) var(--easing-smooth);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--bg-secondary);border:1px solid var(--border-color);position:relative;overflow:hidden}.header-icon-link:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--accent-color);opacity:0;transition:opacity var(--animation-fast) var(--easing-smooth);border-radius:50%;transform:scale(0)}.header-icon-link:hover:before{opacity:.1;transform:scale(1)}.header-icon-link:hover{opacity:1;color:var(--accent-color);background:var(--bg-tertiary);transform:translateY(-2px);border-color:var(--accent-color);box-shadow:0 4px 12px #4c6ef533}.header-icon-link:active{transform:translateY(0)}.header-subtitle{margin:0;font-size:.95rem;color:var(--text-secondary);line-height:1.4;max-width:600px}h1{margin:0;font-size:2rem;background:linear-gradient(135deg,var(--accent-color),#be4bdb);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 200%;animation:fadeIn var(--animation-normal) var(--easing-smooth),shimmer 3s ease-in-out infinite}.theme-toggle{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--animation-fast) var(--easing-smooth);padding:0;line-height:0;position:relative;overflow:hidden}.theme-toggle:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--accent-color);opacity:0;transition:opacity var(--animation-fast) var(--easing-smooth);border-radius:50%;transform:scale(0)}.theme-toggle:hover:before{opacity:.1;transform:scale(1)}.theme-toggle:hover{background:var(--bg-tertiary);transform:rotate(15deg) scale(1.05);border-color:var(--accent-color);box-shadow:0 4px 12px #4c6ef533}.theme-toggle:active{transform:rotate(0) scale(.95)}.theme-toggle svg{stroke:var(--text-primary);display:block;transition:transform var(--animation-normal) var(--easing-bounce)}.dropzone{width:100%;min-height:200px;box-sizing:border-box;background-color:var(--bg-secondary);border:2px dashed var(--border-color);border-radius:16px;padding:4rem 2rem;text-align:center;cursor:pointer;transition:all var(--animation-normal) var(--easing-smooth);color:var(--text-secondary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;position:relative;overflow:hidden;animation:fadeInUp var(--animation-normal) var(--easing-smooth) .1s backwards}.dropzone:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,var(--accent-color) 0%,transparent 70%);opacity:0;transition:opacity var(--animation-normal) var(--easing-smooth);pointer-events:none}.dropzone:hover,.dropzone.active{border-color:var(--accent-color);background-color:var(--bg-tertiary);color:var(--accent-color);transform:scale(1.01);box-shadow:0 8px 24px #4c6ef526}.dropzone:hover:before,.dropzone.active:before{opacity:.03}.dropzone-icon{opacity:.6;transition:all var(--animation-normal) var(--easing-smooth);animation:float 3s ease-in-out infinite}.dropzone:hover .dropzone-icon{opacity:1;transform:scale(1.1);animation:none}.file-input{display:none}.controls-bar{background:var(--bg-secondary);padding:1rem 1.5rem;border-radius:12px;display:flex;gap:1.5rem;align-items:center;justify-content:center;margin:2rem 0;box-shadow:var(--shadow-sm);border:1px solid var(--border-color);flex-wrap:wrap;animation:fadeInUp var(--animation-normal) var(--easing-smooth) .15s backwards;transition:all var(--animation-normal) var(--easing-smooth)}.controls-bar:hover{box-shadow:var(--shadow-md)}.control-group{display:flex;align-items:center;gap:.8rem}.control-group label{font-weight:500;color:var(--text-secondary);font-size:.9rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.6rem 1.2rem;border-radius:8px;font-weight:600;font-size:.9rem;border:none;cursor:pointer;transition:all var(--animation-fast) var(--easing-smooth);line-height:1;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:active:before{width:300px;height:300px}.btn svg{display:block;transition:transform var(--animation-normal) var(--easing-smooth)}.btn:hover svg{transform:scale(1.1)}.btn-primary{background:var(--accent-color);color:#fff;box-shadow:0 2px 8px #4c6ef54d;transition:all var(--animation-fast) var(--easing-smooth)}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 4px 12px #4c6ef566}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-danger{background:#fa52521a;color:var(--danger-color)}.btn-danger:hover{background:#fa525233;transform:translateY(-1px);box-shadow:0 2px 8px #fa525233}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary)}.btn-secondary:hover{background:var(--border-color);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.btn-icon-small{width:28px;height:28px;border-radius:6px;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.btn-icon-small:hover{background:var(--border-color);transform:scale(1.05)}.frame-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.5rem;margin-top:2rem;justify-content:center}.frame-item{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:.75rem;position:relative;transition:all var(--animation-normal) var(--easing-smooth);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;animation:fadeInScale var(--animation-normal) var(--easing-smooth) both;transform-origin:center}.frame-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent-color)}.frame-item.dragging{opacity:.4;border-color:var(--accent-color);border-style:dashed;transform:scale(.95) rotate(2deg);box-shadow:var(--shadow-lg)}.frame-item.base-frame{border:2px solid var(--accent-color);box-shadow:0 0 0 4px #4c6ef51a;animation:fadeInScale var(--animation-normal) var(--easing-smooth) both,glow 2s ease-in-out infinite}.base-badge{position:absolute;top:-10px;left:50%;transform:translate(-50%);background:var(--accent-color);color:#fff;font-size:.7rem;padding:2px 8px;border-radius:12px;font-weight:700;box-shadow:var(--shadow-sm);z-index:5;animation:bounceIn var(--animation-normal) var(--easing-bounce)}.frame-preview-container{aspect-ratio:1;background:var(--bg-tertiary);border-radius:8px;overflow:hidden;margin-bottom:.75rem;position:relative;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(45deg,var(--checker-light) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-light) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker-light) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-light) 75%);background-size:16px 16px;background-color:var(--bg-secondary)}.frame-preview{max-width:100%;max-height:100%;object-fit:contain}.edit-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;cursor:pointer;color:#fff}.frame-preview-container:hover .edit-overlay{opacity:1}.frame-meta{display:flex;justify-content:space-between;align-items:center}.frame-details{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-secondary);margin-top:.5rem;opacity:.8;font-family:monospace;padding-top:.4rem;border-top:1px dashed var(--border-color)}.frame-index{font-size:.8rem;color:var(--text-secondary);font-weight:600}.frame-delay-input{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);padding:.3rem .5rem;border-radius:6px;width:50px;text-align:center;font-size:.85rem}.frame-delay-input:focus{outline:2px solid var(--accent-color);border-color:transparent}.remove-frame-btn{position:absolute;top:-8px;right:-8px;background:var(--bg-secondary);color:var(--danger-color);border:1px solid var(--border-color);border-radius:50%;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:all .2s;z-index:10;padding:0;line-height:0}.remove-frame-btn:hover{background:var(--danger-color);color:#fff;transform:scale(1.1)}.remove-frame-btn svg{display:block}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--overlay-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn var(--animation-fast) var(--easing-smooth)}.modal-content{background:var(--bg-secondary);width:95vw;max-width:1000px;height:92vh;border-radius:16px;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);border:1px solid var(--border-color);padding:1rem;animation:fadeInScale var(--animation-normal) var(--easing-smooth);transform-origin:center}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.modal-header h3{margin:0;color:var(--text-primary)}.close-modal-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;line-height:0;transition:all var(--animation-fast) var(--easing-smooth)}.close-modal-btn:hover{background:var(--bg-tertiary);color:var(--text-primary);transform:rotate(90deg) scale(1.1)}.close-modal-btn:active{transform:rotate(180deg) scale(.9)}.close-modal-btn svg{display:block}.canvas-wrapper{flex:1;background:#111;border-radius:8px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}.modal-footer{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border-color);display:flex;flex-direction:column;gap:1rem;flex-shrink:0}.control-row{display:flex;align-items:center;gap:2rem;justify-content:space-between;flex-wrap:wrap}.slider-group{display:flex;align-items:center;gap:.8rem;color:var(--text-secondary);flex:1;min-width:250px}.slider-group label{font-size:.9rem;font-weight:500;min-width:40px}.slider-group input[type=range]{flex:1;height:4px;background:var(--bg-tertiary);border-radius:2px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.slider-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:var(--accent-color);border-radius:50%;cursor:pointer;border:2px solid var(--bg-secondary);box-shadow:var(--shadow-sm)}.value-badge{background:var(--bg-tertiary);padding:.2rem .5rem;border-radius:4px;font-size:.85rem;font-weight:600;min-width:48px;text-align:center;border:1px solid var(--border-color)}.button-group{display:flex;justify-content:flex-end;gap:1rem}.result-section{background:var(--bg-secondary);border-radius:16px;padding:3rem;margin-top:3rem;border:1px solid var(--border-color);text-align:center;box-shadow:var(--shadow-sm);animation:fadeInUp var(--animation-normal) var(--easing-smooth);position:relative;overflow:hidden}.result-section:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent-color),#be4bdb,var(--accent-color));background-size:200% 100%;animation:shimmer 2s linear infinite}.result-section h2{animation:fadeInScale var(--animation-normal) var(--easing-smooth)}.result-preview{max-width:100%;max-height:400px;box-shadow:var(--shadow-md);border-radius:8px;background-image:linear-gradient(45deg,var(--checker-light) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-light) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker-light) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-light) 75%);background-size:20px 20px;background-color:var(--bg-primary);animation:fadeIn var(--animation-normal) var(--easing-smooth) .2s backwards;transition:transform var(--animation-normal) var(--easing-smooth)}.result-preview:hover{transform:scale(1.02);box-shadow:var(--shadow-lg)}@keyframes spin{to{transform:rotate(360deg)}}.loading-spinner{display:inline-block;width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}:root{font-family:Inter,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}body{margin:0;padding:0;min-width:320px;min-height:100vh;width:100%}#root{width:100%;min-height:100vh;display:flex;flex-direction:column}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}button{background-color:#f9f9f9}}