:root{
  --bg:#faf9fc; --surface:#ffffff; --surface-2:#f4f2fb;
  --text:#1b1930; --muted:#6b6884; --faint:#928fab;
  --border:#e8e4f2; --border-strong:#d8d2ea;
  --accent:#6322ee; --accent-2:#8b5cf6; --accent-soft:#efeaff;
  --good:#16794a; --warn:#a15c00; --crit:#c02636;
  --code-bg:#f4f2fb; --code-text:#4a2ea8;
  --shadow:0 1px 2px rgba(27,25,48,.05), 0 8px 24px rgba(27,25,48,.05);
  --maxw:52rem;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#100d1e; --surface:#191527; --surface-2:#211b34;
    --text:#ece9f7; --muted:#a5a1c0; --faint:#7f7ba0;
    --border:#2a2440; --border-strong:#372f52;
    --accent:#a78bfa; --accent-2:#8b5cf6; --accent-soft:#241c3d;
    --good:#5ed39b; --warn:#f0b458; --crit:#f5808f;
    --code-bg:#1e1832; --code-text:#c8b6ff;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#100d1e; --surface:#191527; --surface-2:#211b34;
  --text:#ece9f7; --muted:#a5a1c0; --faint:#7f7ba0;
  --border:#2a2440; --border-strong:#372f52;
  --accent:#a78bfa; --accent-2:#8b5cf6; --accent-soft:#241c3d;
  --good:#5ed39b; --warn:#f0b458; --crit:#f5808f;
  --code-bg:#1e1832; --code-text:#c8b6ff;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.3);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-padding-top:4rem}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
code,kbd{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.86em}

/* ---- Layout shell ---- */
.app{display:grid; grid-template-columns:17rem minmax(0,1fr); min-height:100vh}
header.top{
  grid-column:1 / -1; position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem 1rem; background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:.55rem; font-family:"Sora",sans-serif; font-weight:700; letter-spacing:-.02em; font-size:1.05rem; color:var(--text)}
.brand:hover{text-decoration:none}
.brand .mark{width:1.7rem; height:1.7rem; border-radius:.5rem; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:grid; place-items:center; flex:none}
.brand .mark svg{width:1rem; height:1rem; fill:#fff}
.brand small{font-family:"Figtree"; font-weight:600; color:var(--muted); font-size:.7rem; padding:.1rem .4rem; border:1px solid var(--border-strong); border-radius:999px; letter-spacing:.04em; text-transform:uppercase}
.top .spacer{flex:1}
.search{position:relative; flex:1; max-width:22rem}
.search input{
  width:100%; padding:.5rem .7rem .5rem 2rem; border-radius:.55rem; border:1px solid var(--border-strong);
  background:var(--surface-2); color:var(--text); font-family:inherit; font-size:.9rem;
}
.search input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.search > svg{position:absolute; left:.6rem; top:50%; transform:translateY(-50%); width:.95rem; height:.95rem; stroke:var(--faint); fill:none}
/* search results dropdown */
.results{position:absolute; top:calc(100% + .35rem); left:0; right:0; background:var(--surface); border:1px solid var(--border-strong); border-radius:.6rem; box-shadow:var(--shadow); overflow:hidden; z-index:40}
.results a{display:block; padding:.5rem .7rem; color:var(--text); border-bottom:1px solid var(--border)}
.results a:last-child{border-bottom:none}
.results a:hover,.results a.sel{background:var(--surface-2); text-decoration:none}
.results .rt{font-weight:600; font-size:.9rem}
.results .rc{font-size:.72rem; color:var(--faint)}
.results .empty{padding:.6rem .7rem; color:var(--faint); font-size:.85rem}
.icon-btn{display:grid; place-items:center; width:2.1rem; height:2.1rem; border-radius:.5rem; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--muted); cursor:pointer; flex:none}
.icon-btn:hover{color:var(--text); border-color:var(--accent)}
.icon-btn svg{width:1.1rem; height:1.1rem; stroke:currentColor; fill:none}
#menuBtn{display:none}

/* Sidebar */
nav.side{
  position:sticky; top:3.4rem; align-self:start;
  height:calc(100vh - 3.4rem); overflow-y:auto;
  padding:1rem .75rem 3rem; border-right:1px solid var(--border);
}
.side .group{margin-bottom:1.1rem}
.side .group > .glabel{display:block; font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--faint); padding:.3rem .6rem}
.side a.nav{
  display:flex; align-items:center; gap:.5rem; padding:.42rem .6rem; border-radius:.5rem;
  color:var(--muted); font-size:.9rem; font-weight:500;
}
.side a.nav:hover{background:var(--surface-2); color:var(--text); text-decoration:none}
.side a.nav.active{background:var(--accent-soft); color:var(--accent); font-weight:600}
.side a.nav .dot{width:.4rem; height:.4rem; border-radius:999px; background:currentColor; opacity:.5; flex:none}

/* Content */
main{padding:2rem 1.5rem 5rem; min-width:0}
.wrap{max-width:var(--maxw); margin:0 auto}
.crumbs{font-size:.78rem; color:var(--faint); margin-bottom:.5rem; letter-spacing:.01em}
article h1{font-family:"Sora",sans-serif; font-weight:700; letter-spacing:-.025em; font-size:2rem; line-height:1.15; margin:.2rem 0 .5rem; text-wrap:balance}
article h2{font-family:"Sora",sans-serif; font-weight:600; letter-spacing:-.015em; font-size:1.25rem; margin:2rem 0 .6rem; padding-top:.4rem; scroll-margin-top:4rem}
article h3{font-weight:600; font-size:1.02rem; margin:1.3rem 0 .3rem; scroll-margin-top:4rem}
article p{margin:.6rem 0; color:var(--text)}
article .lede{font-size:1.08rem; color:var(--muted); margin-bottom:1rem}
article ul,article ol{margin:.5rem 0; padding-left:1.3rem}
article li{margin:.28rem 0}
article li::marker{color:var(--accent)}
article strong{font-weight:600}
hr{border:none; border-top:1px solid var(--border); margin:2rem 0}

/* blockquotes → callout look */
article blockquote{
  margin:1rem 0; padding:.7rem 1rem; border:1px solid var(--border);
  border-left:3px solid var(--accent); border-radius:.5rem;
  background:var(--surface); color:var(--text); box-shadow:var(--shadow);
}
article blockquote p{margin:.25rem 0}
article blockquote p:first-child{margin-top:0}
article blockquote p:last-child{margin-bottom:0}

/* tables */
.tbl-scroll{overflow-x:auto; margin:.8rem 0}
table{width:100%; border-collapse:collapse; font-size:.9rem}
th,td{text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--border)}
th{font-weight:600; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; background:var(--surface-2)}
td{vertical-align:top}
td code, th code{white-space:nowrap}

/* code */
:not(pre) > code{background:var(--code-bg); color:var(--code-text); padding:.08rem .35rem; border-radius:.35rem}
pre{background:var(--code-bg); color:var(--code-text); padding:.9rem 1rem; border-radius:.6rem; overflow-x:auto; border:1px solid var(--border); margin:.8rem 0}
pre code{color:inherit; background:none; padding:0}

/* FAQ (bare <details> from the markdown) */
article details{border-bottom:1px solid var(--border)}
article details:first-of-type{border-top:1px solid var(--border)}
article summary{cursor:pointer; padding:.75rem .2rem; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:1rem; color:var(--text)}
article summary::-webkit-details-marker{display:none}
article summary::after{content:"+"; color:var(--accent); font-weight:700}
article details[open] summary::after{content:"–"}
article details > :not(summary){margin-left:.2rem; margin-right:.2rem}
article details > :last-child{margin-bottom:.8rem}

/* pills / tags */
.pill{display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:600; padding:.15rem .5rem; border-radius:999px; border:1px solid var(--border-strong); color:var(--muted); background:var(--surface-2)}
.pill.pro{color:var(--accent); border-color:var(--accent); background:var(--accent-soft)}
.tag-row{display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0 1rem}

/* callouts (home) */
.callout{display:flex; gap:.7rem; padding:.85rem 1rem; border-radius:.7rem; border:1px solid var(--border); background:var(--surface); margin:1rem 0; box-shadow:var(--shadow)}
.callout .ico{flex:none; width:1.4rem; height:1.4rem; margin-top:.1rem}
.callout .ico svg{width:100%; height:100%; stroke:currentColor; fill:none}
.callout p{margin:.15rem 0}
.callout.ai{border-color:color-mix(in srgb,var(--accent) 40%,var(--border)); background:var(--accent-soft)}
.callout.ai .ico{color:var(--accent)}
.callout .ttl{font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.callout.ai .ttl{color:var(--accent)}

/* cards + browse (home) */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.8rem; margin:1.2rem 0}
.card{display:block; padding:1rem; border:1px solid var(--border); border-radius:.7rem; background:var(--surface); box-shadow:var(--shadow)}
.card:hover{border-color:var(--accent); text-decoration:none}
.card .ct{font-family:"Sora"; font-weight:600; color:var(--text); margin-bottom:.15rem; display:flex; align-items:center; gap:.4rem}
.card .cd{font-size:.85rem; color:var(--muted)}
.card .ci{width:1.1rem; height:1.1rem; stroke:var(--accent); fill:none; flex:none}
.browse{display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:1.2rem 1.5rem; margin:1rem 0}
.browse-col h3{font-family:"Sora"; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); margin:0 0 .4rem}
.browse-col ul{list-style:none; padding:0; margin:0}
.browse-col li{margin:.2rem 0}

footer.foot{max-width:var(--maxw); margin:2.5rem auto 0; padding-top:1.2rem; border-top:1px solid var(--border); color:var(--faint); font-size:.8rem}

#scrim{display:none}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  #menuBtn{display:grid}
  nav.side{position:fixed; top:0; left:0; z-index:50; width:16rem; height:100vh; background:var(--surface); transform:translateX(-100%); transition:transform .22s ease; padding-top:1rem}
  nav.side.open{transform:none}
  #scrim.show{display:block; position:fixed; inset:0; z-index:40; background:rgba(10,8,20,.45)}
  .search{max-width:none}
}
@media (prefers-reduced-motion:reduce){nav.side{transition:none}}