body{margin:0;padding:0;font-family:'Roboto',sans-serif;background:linear-gradient(135deg,#f5f7fa 0%,#e4e8eb 100%);color:#333;line-height:1.6}.container{max-width:1200px;margin:0 auto;padding:20px}.header{text-align:center;padding:40px 0;background:linear-gradient(45deg,#1A237E,#03A9F4);color:#fff;border-radius:0 0 20px 20px;box-shadow:0 10px 30px rgba(0,0,0,0.1);margin-bottom:40px}.header h1{font-size:2.5rem;margin:0;font-family:'Helvetica Neue',sans-serif}.header p{font-size:1.2rem;opacity:0.9}.article{background:#fff;border-radius:15px;box-shadow:0 5px 25px rgba(0,0,0,0.05);padding:40px;margin-bottom:40px}.article h2{color:#1A237E;font-size:2rem;margin-top:0;font-family:'Helvetica Neue',sans-serif}.article h3{color:#03A9F4;font-size:1.5rem}.article h4{color:#E040FB;font-size:1.2rem}.article p{font-size:1.1rem;margin-bottom:20px}.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin:40px 0}.image-grid img{width:100%;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,0.1);transition:transform 0.3s ease}.image-grid img:hover{transform:translateY(-5px)}.code-block{background:#1A237E;color:#fff;padding:20px;border-radius:10px;overflow-x:auto;margin:30px 0}.code-block pre{margin:0}.footer{text-align:center;padding:20px;background:#1A237E;color:#fff;border-radius:20px 20px 0 0}.notice{background:#E040FB;color:#fff;padding:15px;border-radius:10px;text-align:center;margin:20px 0;font-weight:bold}@media (max-width:768px){.header h1{font-size:2rem}.article{padding:20px}.image-grid{grid-template-columns:1fr}}