:root{--bg:#FFF7E4;--ink:#2B2A4A;--muted:#5C5873;--accent:#FFAD03;--card:#fff}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
.wrap{max-width:760px;margin:0 auto;padding:48px 20px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:40px;flex-wrap:wrap}
.logo{font-weight:800;font-size:22px;color:var(--ink);text-decoration:none;letter-spacing:-.3px}
.logo span{color:var(--accent)}
nav a{color:var(--muted);text-decoration:none;margin-left:18px;font-size:15px}
nav a:hover{color:var(--ink)}
h1{font-size:34px;line-height:1.2;margin-bottom:16px;letter-spacing:-.5px}
h2{font-size:20px;margin:28px 0 8px}
p,li{margin-bottom:10px}
ul{padding-left:22px}
.card{background:var(--card);border:3px solid var(--ink);border-radius:20px;padding:28px;box-shadow:8px 8px 0 var(--accent)}
footer{margin-top:48px;font-size:14px;color:var(--muted)}
footer a{color:var(--muted)}
a{color:var(--ink)}
h1{overflow-wrap:break-word;hyphens:auto}
@media (max-width:600px){
.wrap{padding:28px 16px}
h1{font-size:26px}
.card{padding:20px;box-shadow:5px 5px 0 var(--accent);margin-right:5px}
nav a{margin-left:12px}
}