body{background:#0d1b2a;color:#e0e1dd;font-family:'Roboto',sans-serif;margin:0;padding:0;line-height:1.6}.container{max-width:1200px;margin:80px auto;padding:0 20px}.header{text-align:center;margin-bottom:60px;position:relative}.header h1{font-size:2.8rem;margin-bottom:20px;background:linear-gradient(90deg,#00aaff,#00ffcc);-webkit-background-clip:text;background-clip:text;color:transparent}.header p{font-size:1.2rem;max-width:800px;margin:0 auto}.note{background:rgba(0,170,255,0.1);padding:15px;border-left:4px solid #00aaff;margin:40px 0;border-radius:0 8px 8px 0}article{background:rgba(255,255,255,0.05);padding:40px;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,0.3);margin-bottom:60px}h2{font-size:1.8rem;color:#00aaff;margin-top:40px;border-bottom:1px solid rgba(0,170,255,0.3);padding-bottom:10px}h3{font-size:1.4rem;color:#00ffcc;margin-top:30px}p{font-size:1.1rem;margin:20px 0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(500px,1fr));gap:30px;margin:40px 0}.card{background:rgba(255,255,255,0.1);border-radius:12px;padding:30px;transition:all 0.3s ease;position:relative;overflow:hidden}.card:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(0,170,255,0.2)}.card::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(0,170,255,0.1),transparent);opacity:0;transition:opacity 0.3s ease}.card:hover::before{opacity:1}.img-container{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin:40px 0}.img-container img{width:320px;height:320px;object-fit:cover;border-radius:12px;box-shadow:0 5px 15px rgba(0,0,0,0.3);transition:all 0.3s ease}.img-container img:hover{transform:scale(1.05);box-shadow:0 10px 25px rgba(0,170,255,0.4)}pre{background:rgba(0,0,0,0.3);padding:20px;border-radius:10px;overflow-x:auto;margin:25px 0;border-left:4px solid #00aaff}code{font-family:'Courier New',monospace;color:#00ffcc}.navbar{position:fixed;top:0;width:100%;background:rgba(13,27,42,0.95);backdrop-filter:blur(10px);display:flex;justify-content:center;padding:15px 0;z-index:1000;box-shadow:0 5px 20px rgba(0,0,0,0.2)}.navbar a{color:#e0e1dd;text-decoration:none;margin:0 20px;font-size:1.1rem;position:relative;padding:5px 0}.navbar a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:#00aaff;transition:width 0.3s ease}.navbar a:hover::after{width:100%}.footer{text-align:center;padding:30px 0;margin-top:60px;border-top:1px solid rgba(255,255,255,0.1)}.highlight{color:#00aaff;font-weight:bold}.button{display:inline-block;background:linear-gradient(45deg,#00aaff,#00ffcc);border:none;padding:12px 25px;color:#fff;border-radius:30px;cursor:pointer;transition:all 0.3s ease;font-size:1rem;margin:20px 0;box-shadow:0 5px 15px rgba(0,170,255,0.3)}.button:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,170,255,0.5)}@keyframes float{0%{transform:translateY(0px)}50%{transform:translateY(-10px)}100%{transform:translateY(0px)}}.floating{animation:float 3s ease-in-out infinite}@media (max-width:768px){.grid{grid-template-columns:1fr}.header h1{font-size:2rem}.header p{font-size:1rem}article{padding:20px}.card{padding:20px}}