*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;color:#333;line-height:1.6}.container{max-width:1200px;margin:0 auto;padding:20px}.header{text-align:center;margin-bottom:40px;padding:40px 0}.logo{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:20px}.logo i{font-size:3rem;color:#fff;text-shadow:0 4px 8px rgba(0,0,0,.3)}.logo h1{font-size:3rem;font-weight:700;color:#fff;text-shadow:0 4px 8px rgba(0,0,0,.3)}.tagline{font-size:1.2rem;color:#ffffffe6;font-weight:300}.main-content{background:rgba(255,255,255,.95);border-radius:20px;padding:40px;box-shadow:0 20px 40px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.input-section{margin-bottom:40px}.prompt-container{margin-bottom:30px}.prompt-container label{display:block;font-size:1.1rem;font-weight:600;margin-bottom:15px;color:#333}.input-wrapper{display:flex;gap:20px;align-items:flex-start}#prompt-input{flex:1;padding:20px;border:2px solid #e1e5e9;border-radius:15px;font-size:1rem;font-family:inherit;resize:vertical;transition:all .3s ease;background:#fff}#prompt-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.generate-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;padding:20px 30px;border-radius:15px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:10px;white-space:nowrap;box-shadow:0 8px 25px #667eea4d}.generate-btn:hover{transform:translateY(-2px);box-shadow:0 12px 35px #667eea66}.generate-btn:active{transform:translateY(0)}.options-section{display:flex;gap:30px;flex-wrap:wrap}.option-group{display:flex;flex-direction:column;gap:8px}.option-group label{font-weight:600;color:#555;font-size:.9rem}.option-group select{padding:12px 16px;border:2px solid #e1e5e9;border-radius:10px;font-size:1rem;background:#fff;cursor:pointer;transition:border-color .3s ease}.option-group select:focus{outline:none;border-color:#667eea}.result-section{margin-bottom:40px;text-align:center}.result-section h3{font-size:1.5rem;margin-bottom:20px;color:#333}.video-container{margin-bottom:25px}#generated-video{width:100%;max-width:600px;border-radius:15px;box-shadow:0 10px 30px #0003}.video-actions{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.action-btn{background:#f8f9fa;color:#333;border:2px solid #e1e5e9;padding:12px 24px;border-radius:10px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:8px}.action-btn:hover{background:#667eea;color:#fff;border-color:#667eea;transform:translateY(-2px)}.loading-section{text-align:center;margin-bottom:40px}.loading-spinner{margin-bottom:20px}.spinner{width:60px;height:60px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-section h3{font-size:1.5rem;margin-bottom:10px;color:#333}.loading-section p{color:#666;margin-bottom:20px}.progress-bar{width:100%;max-width:400px;height:8px;background:#e1e5e9;border-radius:4px;overflow:hidden;margin:0 auto}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);width:0%;animation:progress 3s ease-in-out infinite}@keyframes progress{0%{width:0%}50%{width:70%}to{width:100%}}.examples-section{margin-bottom:20px}.examples-section h3{font-size:1.5rem;margin-bottom:25px;color:#333;text-align:center}.example-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.example-card{background:#f8f9fa;border:2px solid #e1e5e9;border-radius:15px;padding:25px;text-align:center;cursor:pointer;transition:all .3s ease}.example-card:hover{border-color:#667eea;transform:translateY(-5px);box-shadow:0 10px 25px #667eea33}.example-card i{font-size:2.5rem;color:#667eea;margin-bottom:15px}.example-card p{font-weight:500;color:#333}.footer{text-align:center;margin-top:40px;color:#fffc;font-size:.9rem}@media (max-width: 768px){.container{padding:15px}.main-content{padding:25px}.logo h1,.logo i{font-size:2.5rem}.input-wrapper{flex-direction:column;gap:15px}.generate-btn{width:100%;justify-content:center}.options-section{flex-direction:column;gap:20px}.video-actions{flex-direction:column;align-items:center}.action-btn{width:100%;max-width:200px;justify-content:center}.example-grid{grid-template-columns:1fr}}@media (max-width: 480px){.header{padding:20px 0}.logo h1,.logo i{font-size:2rem}.tagline{font-size:1rem}.main-content{padding:20px}}