:root { --paper:#faf6ef; --card:#ffffff; --ink:#191413; --soft:#6b625c; --line:#e7ded2;
  --cyan:#30c0f0; --violet:#6018f0; --magenta:#f078d8;
  --grad:linear-gradient(100deg,var(--cyan),var(--violet) 55%,var(--magenta)); }
* { margin:0; box-sizing:border-box; }
html,body { overflow-x:clip; max-width:100%; }
body { background:var(--paper); color:var(--ink); font-family:'Poppins',sans-serif; font-size:16px; line-height:1.75; }
.wrap { max-width:820px; margin-inline:auto; padding-left:max(24px,5vw); padding-right:max(24px,5vw); }
a { color:var(--violet); }
nav { display:flex; align-items:center; justify-content:space-between; padding:24px 0; }
nav .wordmark { font-family:'Bricolage Grotesque','Poppins',sans-serif; font-weight:800; font-size:22px;
  letter-spacing:-0.5px; color:var(--ink); text-decoration:none; }
nav .wordmark b { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
nav a.home { color:var(--soft); text-decoration:none; font-weight:700; font-size:14px; }
h1 { font-family:'Bricolage Grotesque','Poppins',sans-serif; font-size:clamp(2rem,5vw,2.8rem); font-weight:800;
  letter-spacing:-1px; margin:18px 0 6px; }
.updated { color:var(--soft); font-size:13.5px; margin-bottom:30px; }
h2 { font-family:'Bricolage Grotesque','Poppins',sans-serif; font-size:1.35rem; margin:34px 0 10px; }
h3 { font-size:1.08rem; margin:22px 0 6px; }
p, li { color:#3e3832; font-size:15.5px; }
ul, ol { padding-left:24px; margin:12px 0; }
li { margin:6px 0; }
b { color:var(--ink); }
.box { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 24px; margin:20px 0; }
.box.hi { border-color:rgba(96,24,240,.35); box-shadow:0 3px 18px rgba(96,24,240,.07); }
footer { border-top:1px solid var(--line); margin-top:50px; padding:30px 0 60px; color:var(--soft); font-size:13px; }
footer a { color:var(--soft); }