:root{--navy:#0f1d2e;--ink:#0a1422;--muted:#5b6573;--paper:#f4f2ee;--white:#fffdf9;--line:#d9d1c3;--accent:#c39a6b;--accent-dark:#7a5c3a}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Barlow",system-ui,sans-serif;font-size:17px;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:var(--navy)}
.wrap{max-width:820px;margin:0 auto;padding:0 20px}
header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0}
.nav{display:flex;justify-content:space-between;align-items:center;height:70px;max-width:1160px;margin:0 auto;padding:0 20px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-mark{width:40px;height:40px;border-radius:10px;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:"Barlow Condensed";font-weight:700;font-size:1.2rem;position:relative}
.logo-mark::after{content:"";position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;background:var(--accent);border-radius:3px}
.logo b{font-family:"Barlow Condensed";font-size:1.2rem;text-transform:uppercase;color:var(--navy)}
.back{font-weight:600;text-decoration:none;color:var(--accent-dark)}
main{padding:64px 0 96px}
h1{font-family:"Barlow Condensed";font-weight:700;text-transform:uppercase;font-size:clamp(2.4rem,6vw,3.4rem);line-height:1;color:var(--navy);margin-bottom:12px}
h2{font-family:"Barlow Condensed";font-weight:700;text-transform:uppercase;font-size:1.45rem;color:var(--navy);margin:40px 0 10px;padding-top:24px;border-top:1px solid var(--line)}
h3{font-size:1.05rem;color:var(--navy);margin:20px 0 6px}
p,ul{margin-bottom:12px}
ul{padding-left:20px}
.intro{color:var(--muted)}
.todo{background:#fff1b8;border-radius:4px;padding:0 4px;font-weight:600}
footer{background:var(--ink);color:#aeb8c6;padding:28px 0;font-size:.9rem}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between}
footer a{color:#aeb8c6;text-decoration:none}
footer a:hover{color:#fff}