:root{
  --ground:#FBFAFE; --surface:#FFFFFF; --surface-2:#F5F3FB;
  --ink:#14121F; --muted:#5C5872; --faint:#918DA4; --hairline:#E8E5F1;
  --accent:#6C5CE7; --accent-wash:#EEEBFD; --maxw:820px;
  --brand-grad: linear-gradient(118deg, #6C5CE7 0%, #00D2D3 100%);
}
*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
header.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--hairline)}
header.top .wrap{display:flex; align-items:center; justify-content:space-between; height:64px; max-width:1160px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand .mark{width:27px; height:27px; flex:none}
.brand .wordmark{font-family:"Michroma",sans-serif; font-weight:400; font-size:18px; letter-spacing:.015em;
  background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1}
.brand .say{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--faint); letter-spacing:.02em; align-self:center}
@media(max-width:520px){ .brand .say{display:none} }
.back{font-size:14.5px; font-weight:600; text-decoration:none; color:var(--muted)}
.back:hover{color:var(--ink)}
main{padding:56px 0 90px}
h1{font-family:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; font-weight:700;
  font-size:clamp(30px,4vw,42px); letter-spacing:-.02em; line-height:1.08; margin:0}
.updated{margin-top:14px; font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--faint)}
.intro{margin-top:22px; font-size:18px; color:var(--muted)}
.toc{margin:34px 0 8px; padding:22px 24px; background:var(--surface); border:1px solid var(--hairline); border-radius:14px}
.toc h2{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); margin:0 0 12px; font-weight:500}
.toc ol{margin:0; padding-left:20px; columns:2; column-gap:28px; font-size:14.5px}
.toc li{margin-bottom:6px; break-inside:avoid}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
h2.sec{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:22px; letter-spacing:-.015em;
  margin:44px 0 0; scroll-margin-top:84px}
h3{font-size:16.5px; margin:26px 0 0; letter-spacing:-.005em}
p{margin:14px 0 0}
ul{margin:14px 0 0; padding-left:20px}
li{margin-bottom:9px}
strong{font-weight:600}
.callout{margin-top:20px; padding:18px 20px; background:var(--accent-wash); border-radius:12px; font-size:15.5px}
.callout p{margin:0}
.callout strong{color:var(--accent)}
footer.foot{border-top:1px solid var(--hairline); background:var(--surface-2); padding:30px 0; font-size:14px; color:var(--muted)}
footer.foot .wrap{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; max-width:1160px}
footer.foot a{color:var(--muted); text-decoration:none}
footer.foot a:hover{color:var(--ink)}
@media(max-width:620px){ .toc ol{columns:1} main{padding:38px 0 64px} }