*{box-sizing:border-box}
body{margin:0;background:#0b1220;color:#eaf0ff;font-family:Arial,sans-serif;line-height:1.7}
header{padding:28px 16px;text-align:center;background:linear-gradient(135deg,#101d38,#5426a8,#087f8c)}
header h1{margin:0;font-size:clamp(25px,5vw,38px)}
header p{margin:8px 0}
main{max-width:950px;margin:25px auto;padding:0 16px}
.card{background:#151f33;border:1px solid #30415f;border-radius:14px;padding:20px;margin:18px 0}
h2{color:#5eead4}
h3{color:#ffcf55}
code{background:#08101d;color:#7ee7ff;padding:3px 6px;border-radius:4px;overflow-wrap:anywhere}
pre{background:#08101d;color:#baf3ff;padding:15px;border-radius:9px;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
a{color:#5eead4}
.nav a{display:inline-block;margin:5px;padding:9px 13px;border-radius:7px;background:#0f766e;color:white;text-decoration:none}
footer{text-align:center;color:#ffcf55;padding:25px 12px}
li{margin:5px 0}
.note{border-left:4px solid #ffcf55;padding:10px 14px;background:#202b40}
</style>