:root{
  --bg:#FFFBEF; --ink:#221B33; --soft:#4A4360; --dim:#7A7290;
  --violet:#6C5CE7; --orange:#FF9F1C; --pink:#FF5D8F; --sun:#FFD93D;
  --disp:"Baloo 2",cursive; --body:"Be Vietnam Pro",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--body); color:var(--ink); background:var(--bg);
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px; margin:0 auto; padding:0 24px}
header{
  background:#fff; border-bottom:3px solid var(--ink);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:66px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--disp); font-weight:800; font-size:21px}
.logo svg{width:34px; height:34px; border-radius:9px; border:2px solid var(--ink)}
.logo b{color:var(--violet); font-weight:800} .logo span span{color:var(--orange)}
.back{font-size:14px; font-weight:700; color:var(--violet); text-decoration:none}
.back:hover{text-decoration:underline}
main{padding:56px 0 80px}
h1{font-family:var(--disp); font-size:clamp(30px,4vw,40px); font-weight:800; letter-spacing:-.01em; line-height:1.15; margin-bottom:8px}
.updated{font-size:14px; color:var(--dim); margin-bottom:40px}
h2{font-family:var(--disp); font-size:22px; font-weight:800; margin:38px 0 12px; padding-top:6px}
p, ul{margin-bottom:14px; color:var(--soft); font-size:15.5px}
ul{padding-left:22px}
li{margin-bottom:7px}
a{color:var(--violet)}
strong{font-weight:700; color:var(--ink)}
.note{
  background:#fff; border:3px solid var(--ink); border-radius:16px;
  box-shadow:0 5px 0 var(--ink);
  padding:16px 18px; font-size:14.5px; color:var(--soft); margin:24px 0;
}
footer{border-top:3px solid var(--ink); padding:26px 0 32px; background:#fff}
.foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13.5px; color:var(--dim)}
.foot a{color:var(--soft); text-decoration:none; margin-left:18px; font-weight:600}
.foot a:hover{color:var(--violet)}