:root{--accent1:#0b74ff; --accent2:#00b3b3; --muted:#556b7a;}
body{font-family:Arial,Helvetica,sans-serif;color:#06263a;margin:0;padding:0;line-height:1.5;background:#f6f9fb}
.container{max-width:960px;margin:28px auto;padding:18px;background:white;border-radius:8px;box-shadow:0 6px 18px rgba(10,24,40,0.06)}
header{display:flex;align-items:center;gap:12px;border-bottom:4px solid rgba(11,116,255,0.08);padding-bottom:12px}
header .logo{font-weight:700;color:var(--accent1);font-size:22px}
nav{margin-left:auto}
nav a{margin-left:10px;color:var(--accent1);text-decoration:none;font-weight:600}
nav a:hover{color:var(--accent2)}
h1{color:var(--accent1);margin-top:0}
h2{color:var(--accent2);margin-top:18px}
footer{border-top:1px solid #eef3f7;padding:12px;margin-top:28px;color:#44606f;font-size:14px;text-align:center}
.hero img{max-width:100%;height:auto;border-radius:8px}
.toc{margin-top:12px;padding-left:18px}
pre{background:#f7f7f7;padding:12px;border-radius:6px;white-space:pre-wrap}
.credit{font-size:12px;color:#666;margin-top:6px}
a.button{display:inline-block;padding:8px 12px;border-radius:6px;background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white;text-decoration:none}
@media print{nav{display:none} .container{margin:12mm}}