.transition-generator{max-width:1200px;margin:0 auto;padding:2rem 1rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color:#333}.transition-generator h1{text-align:center;margin-bottom:2rem;color:#4a6cf7;font-size:2.5rem;font-weight:700}.transition-generator h2{color:#4a6cf7;font-size:1.5rem;margin-bottom:1rem;font-weight:600}.transition-generator button{background-color:#4a6cf7;color:#fff;border:none;border-radius:8px;padding:.75rem 1.25rem;font-size:1rem;cursor:pointer;transition:background-color .3s,transform .2s}.transition-generator button:hover{background-color:rgb(25.1587301587,68.3333333333,244.8412698413);transform:translateY(-2px)}.transition-generator input,.transition-generator select{padding:.75rem;border:1px solid #e1e1e1;border-radius:8px;font-size:1rem;width:100%}.transition-generator input:focus,.transition-generator select:focus{outline:none;border-color:#4a6cf7;box-shadow:0 0 0 2px rgba(74,108,247,.2)}.transition-generator select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a6cf7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:16px;padding-right:2.5rem}.generator-content{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:2rem}@media(min-width:768px){.generator-content{grid-template-columns:1fr 1fr}}.controls-section{background-color:#fff;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1);padding:1.5rem}.controls-section .control-group{display:flex;flex-direction:column;gap:1.25rem}.controls-section .control{display:flex;flex-direction:column;gap:.5rem}.controls-section .control label{font-weight:500;font-size:.9rem}.controls-section .control .value-display{color:#4a6cf7;font-weight:600;margin-left:.5rem}.controls-section .property-values{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.controls-section .property-values .property-value{display:flex;flex-direction:column;gap:.5rem}.controls-section .cubic-bezier input{font-family:monospace}.preview-section{background-color:#fff;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1);padding:1.5rem;display:flex;flex-direction:column}.preview-section .preview-container{flex:1;display:flex;justify-content:center;align-items:center;padding:2rem;background-color:#f8f9fa;border-radius:8px;margin-bottom:1.5rem;min-height:250px}.preview-section .preview-element{width:100px;height:100px;background-color:#3498db;border-radius:0;display:flex;justify-content:center;align-items:center;color:#fff;font-weight:700}.preview-section .preview-button{align-self:center}.code-section{background-color:#fff;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1);padding:1.5rem}.code-section .code-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.code-section .code-header .code-actions{display:flex;gap:.75rem}.code-section .code-header .code-actions button{font-size:.9rem;padding:.5rem 1rem}.code-section .code-display{background-color:#f7f8f9;border-radius:8px;padding:1.5rem;overflow-x:auto;margin:0;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.9rem;line-height:1.5}.code-section .code-display code{white-space:pre-wrap}@media(max-width:480px){.transition-generator h1{font-size:2rem}.transition-generator h2{font-size:1.25rem}.property-values{grid-template-columns:1fr!important}}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:4px;background:#e1e1e1;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#4a6cf7;cursor:pointer;transition:transform .2s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#4a6cf7;cursor:pointer;transition:transform .2s;border:none}input[type=range]::-moz-range-thumb:hover{transform:scale(1.2)}