body{margin:0;padding:0;font-family:Poppins,sans-serif;background:linear-gradient(135deg,#f0f2ff,#e6ecff);color:#2b2c34;min-height:100vh}.app-container{max-width:850px;margin:auto;padding:60px 25px;text-align:center}.app-title{font-size:3.2rem;font-weight:700;color:#1b1b33;margin-bottom:10px;animation:fadeIn .6s ease}.app-subtitle{font-size:1.2rem;color:#666;margin-bottom:50px;animation:fadeIn .8s ease}.input-group{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:40px}.input-field{padding:16px 20px;font-size:15px;border:2px solid #d0d4ff;border-radius:14px;width:320px;transition:all .3s ease;background-color:#fff}.input-field::placeholder{color:#888;font-size:14px}.input-field:focus{outline:none;border-color:#667eea;box-shadow:0 0 6px #667eea4d}.generate-button{padding:16px 24px;font-size:16px;font-weight:500;border:none;border-radius:14px;background-image:linear-gradient(135deg,#667eea,#764ba2);color:#fff;cursor:pointer;transition:transform .3s ease}.generate-button:hover{transform:scale(1.05)}.roadmap-container{margin-top:40px;text-align:left;animation:fadeIn 1s ease}.roadmap-card{background:#fff9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:20px;padding:25px;margin-bottom:20px;box-shadow:0 8px 20px #00000014;animation:slideIn .4s ease forwards;border:1px solid rgba(200,200,255,.4);transition:transform .3s ease}.roadmap-card:hover{transform:translateY(-4px)}.roadmap-title{font-size:1.4rem;font-weight:600;margin-bottom:10px;color:#1e1e2f}.roadmap-description{font-size:15px;color:#333;margin-bottom:10px;line-height:1.5}.roadmap-time{font-size:14px;color:#555;font-weight:500;background-color:#eef;padding:4px 10px;border-radius:8px;display:inline-block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}