:root{
  --bg:#FAFBFF;--fg:#0A0E1A;--fg-dim:#3B4257;--fg-muted:#6B7389;
  --accent:#4D6FFF;--accent2:#8B6CF6;
  --surface:rgba(255,255,255,.75);--border:rgba(10,14,26,.08);
  --border-hover:rgba(77,111,255,.2);
  --ease:cubic-bezier(.22,1,.36,1)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:400 16px/1.7 Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}
a{color:var(--accent);text-decoration:none;transition:opacity .2s ease}
a:hover{opacity:.75}

.topbar{
  position:sticky;top:0;z-index:900;
  display:flex;align-items:center;gap:16px;
  padding:14px 5%;
  background:rgba(250,251,255,.88);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2)
}
.topbar img{height:44px;width:44px;object-fit:cover;object-position:50% 55%;border-radius:10px}
.topbar .brand{
  font:700 17px/1 Plus Jakarta Sans,Inter,system-ui,sans-serif;letter-spacing:-.01em;
  color:var(--fg)
}
.topbar nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.topbar nav a{
  padding:8px 14px;border-radius:10px;font:500 13.5px/1 Inter;color:var(--fg-dim);
  transition:all .25s var(--ease)
}
.topbar nav a:hover{color:var(--fg);background:var(--surface);opacity:1}

.accent-bar{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:1000;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  opacity:.7
}

main.page{max-width:780px;margin:0 auto;padding:72px 24px 96px}
.eyebrow{
  font:500 12px/1 IBM Plex Mono,ui-monospace,monospace;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  margin:0 0 14px
}
h1{
  font:800 46px/1.1 Plus Jakarta Sans,Inter,system-ui,sans-serif;
  letter-spacing:-.025em;margin:0 0 20px;color:var(--fg)
}
h2{
  font:700 22px/1.3 Plus Jakarta Sans,Inter,system-ui,sans-serif;
  letter-spacing:-.015em;margin:40px 0 12px;color:var(--fg)
}
h3{
  font:700 16px/1.3 Inter,system-ui,sans-serif;
  margin:24px 0 8px;color:var(--fg)
}
p,li{color:var(--fg-dim);font-size:15.5px;line-height:1.75}
strong{color:var(--fg);font-weight:600}
ul{padding-left:20px;margin:12px 0}
li{margin-bottom:6px}
.lead{font-size:17.5px;color:var(--fg-dim);margin-top:0}
.updated{
  display:inline-block;margin-top:8px;
  padding:6px 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);
  font:500 12px/1 Inter;color:var(--fg-muted);
  letter-spacing:.01em
}
.callout{
  margin:28px 0;padding:20px 22px;
  border-radius:14px;border:1px solid var(--border);
  background:linear-gradient(135deg,rgba(77,111,255,.04),rgba(139,108,246,.04));
  font-size:14.5px;color:var(--fg-dim)
}
footer.simple{
  text-align:center;padding:40px 24px 60px;
  color:var(--fg-muted);font-size:12.5px;
  border-top:1px solid var(--border);margin-top:40px
}
footer.simple nav{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin-top:14px}
footer.simple a{color:var(--fg-muted);font-size:12px}
@media(max-width:640px){
  main.page{padding:48px 20px 72px}
  h1{font-size:34px}
  .topbar{padding:12px 4%}
  .topbar .brand{display:none}
}