*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.6;color:#333;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:2rem}#app{max-width:1200px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;overflow:hidden}header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:3rem 2rem;text-align:center}header h1{font-size:2.5rem;margin-bottom:.5rem;font-weight:700}header p{font-size:1.1rem;opacity:.95}main{padding:3rem 2rem}.projects h2{font-size:1.8rem;margin-bottom:2rem;color:#333;font-weight:600}.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.project-card{display:block;padding:2rem;background:#f8f9fa;border:2px solid #e9ecef;border-radius:8px;text-decoration:none;color:inherit;transition:all .3s ease}.project-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #667eea26;border-color:#667eea}.project-card h3{font-size:1.3rem;margin-bottom:.5rem;color:#667eea;font-weight:600}.project-card p{font-size:.95rem;color:#666;line-height:1.5}footer{background:#f8f9fa;padding:1.5rem 2rem;text-align:center;color:#666;font-size:.9rem;border-top:1px solid #e9ecef}@media (max-width: 768px){body{padding:1rem}header{padding:2rem 1.5rem}header h1{font-size:2rem}main{padding:2rem 1.5rem}.project-grid{grid-template-columns:1fr}}