@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800&display=swap');
:root { --ink:#17133e; --muted:#4c4562; --purple:#6b3cf1; --line:#e7e2f2; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; color:var(--ink); font-family:Heebo, Arial, sans-serif; background:#f7f5fc; line-height:1.7; }
a { color:var(--purple); }
a:focus-visible, button:focus-visible { outline:3px solid #159dff; outline-offset:3px; }
.top { max-width:880px; margin:0 auto; padding:28px 24px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:800; font-size:22px; letter-spacing:-.5px; }
.brand img { width:40px; height:40px; object-fit:contain; }
.top nav { display:flex; gap:16px; font-size:14px; font-weight:600; }
.top nav a { color:var(--ink); text-decoration:none; }
.top nav a:hover { color:var(--purple); }
main { max-width:760px; margin:0 auto; padding:28px 24px 72px; }
article { background:#fff; border:1px solid var(--line); border-radius:20px; padding:36px 32px; }
h1 { font-size:clamp(32px, 5vw, 44px); line-height:1.2; letter-spacing:-1px; margin:0 0 12px; }
.updated { color:var(--muted); font-size:14px; margin:0 0 24px; }
h2 { font-size:22px; margin:28px 0 8px; }
p, li { font-size:16px; color:#2a2642; }
ul { padding-inline-start:1.2em; }
.fill { list-style:none; padding:0; }
.fill li { background:#f6f3fc; border-radius:10px; padding:10px 14px; margin:8px 0; }
@media (max-width:720px) {
  article { padding:24px 18px; }
  .top { flex-wrap:wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}