:root{--bg:#f7f8fa;--ink:#14181f;--mut:#5b6472;--line:#e3e6eb;--acc:#0b57d0;--card:#fff}
*{box-sizing:border-box}
body{font:17px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;margin:0;color:var(--ink);background:var(--bg)}
header{background:#0f1b2d;padding:14px 16px}
header a{color:#fff;font-weight:700;font-size:1.25rem;text-decoration:none;letter-spacing:.2px}
nav{max-width:900px;margin:0 auto;display:flex;flex-wrap:wrap;gap:6px 14px}
nav a{color:#cfd8e6;font-size:.9rem;font-weight:500}
main,footer{max-width:900px;margin:0 auto;padding:20px 16px}
h1{font-size:2rem;line-height:1.2;margin:.6em 0 .3em}
h2{font-size:1.25rem;margin:1.6em 0 .5em}
a{color:var(--acc)}
ul{padding-left:1.2em}
li{margin:6px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:10px 0;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card a{display:inline-block;margin-top:6px;background:var(--acc);color:#fff;padding:8px 14px;border-radius:8px;text-decoration:none;font-weight:600}
.note{background:#eef3fb;border:1px solid #d6e2f5;border-radius:10px;padding:12px 14px;font-size:.92rem;color:var(--mut)}
footer{color:var(--mut);font-size:.88rem;border-top:1px solid var(--line)}
@media(max-width:600px){h1{font-size:1.6rem}body{font-size:16px}}