body, html { margin: 0; padding: 0; overflow-x: hidden; font-family: 'Roboto', sans-serif; color: #fff; background: #0a0a2a; }
.container { max-width: 1440px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; align-items: center; }
header { text-align: center; margin-bottom: 40px; position: relative; z-index: 10; }
header h1 { font-size: 36px; color: #d4d4f5; text-shadow: 0 0 10px #6c6cff; }
.starry-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(10,10,42,1) 0%, rgba(0,0,0,1) 100%); z-index: -1; overflow: hidden; }
.star { position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; animation: twinkle 3s infinite alternate; }
@keyframes twinkle { from { opacity: 0.3; transform: scale(1); } to { opacity: 1; transform: scale(1.2); } }
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; justify-items: center; width: 100%; margin-bottom: 40px; }
.card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 20px; text-align: center; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; position: relative; overflow: hidden; }
.card:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.card img { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; margin-bottom: 15px; }
.card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,255,255,0.05), transparent); transform: scale(0); transition: transform 0.3s ease-in-out; z-index: -1; }
.card:hover::before { transform: scale(1); }
.article-section { background: rgba(0,0,0,0.5); border-radius: 10px; padding: 30px; margin-bottom: 40px; max-width: 1200px; width: 100%; position: relative; }
.article-section h2 { font-size: 28px; margin-bottom: 20px; color: #d4d4f5; text-shadow: 0 0 5px #6c6cff; }
.article-section p { line-height: 1.6; margin-bottom: 15px; }
.article-section pre { background: #0a0a2a; padding: 15px; border-radius: 5px; overflow-x: auto; margin: 20px 0; }
.article-section pre code { color: #6c6cff; }
@media (max-width: 768px) { header h1 { font-size: 28px; } .grid-container { grid-template-columns: 1fr; } .card { padding: 15px; } }
.pulsating-circle { position: absolute; width: 200px; height: 200px; background: rgba(108,108,255,0.3); border-radius: 50%; animation: pulse 5s infinite; z-index: -1; }
@keyframes pulse { 0% { transform: scale(0.5); opacity: 0.5; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.5); opacity: 0.5; } }
.glow-effect { filter: drop-shadow(0 0 10px #6c6cff); }