.animation-generator{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;max-width:1200px;margin:0 auto;padding:24px;background-color:#f8f9fa;color:#343a40;min-height:100vh}.animation-generator *{box-sizing:border-box}.animation-generator h1,.animation-generator h2,.animation-generator h3,.animation-generator h4{margin-top:0;font-weight:600}.animation-generator input,.animation-generator select{padding:8px 12px;border:1px solid #e1e4e8;border-radius:4px;font-size:14px;transition:border-color .2s}.animation-generator input:focus,.animation-generator select:focus{outline:none;border-color:#4a6bff}.animation-generator button{padding:8px 16px;background-color:#4a6bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:6px;transition:background-color .2s}.animation-generator button:hover{background-color:#3a53c5}.animation-generator button:focus{outline:none;box-shadow:0 0 0 2px rgba(74,107,255,.3)}.animation-generator button svg{margin-right:4px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #e1e4e8}header h1{font-size:24px;margin:0}header .top-actions{display:flex;gap:12px}header .top-actions .code-button.active,header .top-actions .preview-button.active{background-color:#28a745}.main-container{display:flex;gap:24px;margin-bottom:24px}@media(max-width:768px){.main-container{flex-direction:column}}.controls-panel{flex:1;max-width:500px}@media(max-width:768px){.controls-panel{max-width:100%}}.controls-panel .panel{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);margin-bottom:16px;overflow:hidden}.controls-panel .panel .panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px;background-color:#f1f3f5;cursor:pointer;transition:background-color .2s}.controls-panel .panel .panel-header:hover{background-color:#e9ecef}.controls-panel .panel .panel-header h3{margin:0;font-size:16px}.controls-panel .panel .panel-content{padding:16px;border-top:1px solid #e1e4e8}.form-group{margin-bottom:16px}.form-group:last-child{margin-bottom:0}.form-group label{display:block;margin-bottom:8px;font-weight:500;font-size:14px}.form-group input,.form-group select{width:100%}.keyframes-list{margin-bottom:16px}.keyframes-list .keyframe-item{background-color:#f5f7fa;border-radius:6px;padding:12px;margin-bottom:12px;border-left:3px solid #4a6bff}.keyframes-list .keyframe-item:last-child{margin-bottom:0}.keyframes-list .keyframe-item .keyframe-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.keyframes-list .keyframe-item .keyframe-header .position-control{display:flex;align-items:center;gap:8px}.keyframes-list .keyframe-item .keyframe-header .position-control label{margin-bottom:0}.keyframes-list .keyframe-item .keyframe-header .position-control input{width:60px}.keyframes-list .keyframe-item .keyframe-header .remove-keyframe{background-color:rgba(0,0,0,0);color:#dc3545;padding:4px}.keyframes-list .keyframe-item .keyframe-header .remove-keyframe:hover{background-color:rgba(220,53,69,.1)}.keyframes-list .keyframe-item .keyframe-properties .property-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.keyframes-list .keyframe-item .keyframe-properties .property-row .property-name{width:120px;font-weight:500}.keyframes-list .keyframe-item .keyframe-properties .property-row input{flex:1}.keyframes-list .keyframe-item .keyframe-properties .property-row .remove-property{background-color:rgba(0,0,0,0);color:#6c757d;padding:4px}.keyframes-list .keyframe-item .keyframe-properties .property-row .remove-property:hover{color:#dc3545}.keyframes-list .keyframe-item .keyframe-properties .add-property{margin-top:12px}.keyframes-list .keyframe-item .keyframe-properties .add-property select{width:100%}.add-keyframe{width:100%;background-color:#f1f3f5;color:#343a40}.add-keyframe:hover{background-color:#e9ecef}.preview-panel{flex:1;display:flex;flex-direction:column;gap:16px}.preview-panel .preview-container{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);padding:24px;height:300px;display:flex;justify-content:center;align-items:center;position:relative}.preview-panel .preview-container .preview-element{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:relative}.preview-panel .preview-container .preview-element .demo-box{width:100px;height:100px;background-color:#4a6bff;border-radius:8px}.preview-panel .code-preview{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);overflow:hidden}.preview-panel .code-preview .code-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background-color:#f1f3f5;border-bottom:1px solid #e1e4e8}.preview-panel .code-preview .code-header h3{margin:0;font-size:16px}.preview-panel .code-preview pre{margin:0;padding:16px;background-color:#2d3748;color:#f8f9fa;font-family:Fira Code,Courier New,monospace;font-size:14px;line-height:1.5;overflow-x:auto;border-radius:0 0 8px 8px}.bottom-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}.bottom-actions button{background-color:#6c757d}.bottom-actions button:hover{background-color:rgb(84.3605150215,91.3905579399,97.6394849785)}.notification{position:fixed;bottom:24px;right:24px;background-color:#28a745;color:#fff;padding:12px 16px;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);animation:fadeInOut 3s ease-in-out;z-index:1000}@keyframes fadeInOut{0%{opacity:0;transform:translateY(20px)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@media(max-width:992px){.animation-generator{padding:16px}}@media(max-width:576px){header{flex-direction:column;align-items:flex-start;gap:12px}.top-actions{width:100%;justify-content:space-between}.bottom-actions{flex-direction:column}.bottom-actions button{width:100%}}