:root{
  --bg:#F6F4EF; --surface:#FFFFFF; --surface-2:#EFEBE2; --border:#E1DBCC;
  --text:#1C1B18; --muted:#6B6659; --accent:#3E6B4F; --accent-soft:#E4EEE6;
  --code-bg:#EFEBE2; --shadow:rgba(28,27,24,0.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15171A; --surface:#1B1E22; --surface-2:#20242A; --border:#2B3038;
    --text:#E8E9EA; --muted:#8B9198; --accent:#6FBF8B; --accent-soft:#1E2B22;
    --code-bg:#20242A; --shadow:rgba(0,0,0,0.3);
  }
}
:root[data-theme="dark"]{
  --bg:#15171A; --surface:#1B1E22; --surface-2:#20242A; --border:#2B3038;
  --text:#E8E9EA; --muted:#8B9198; --accent:#6FBF8B; --accent-soft:#1E2B22;
  --code-bg:#20242A; --shadow:rgba(0,0,0,0.3);
}
*{box-sizing:border-box;}
html{scroll-padding-top:calc(72px + env(safe-area-inset-top,0px));}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Public Sans",system-ui,sans-serif; font-size:15.5px; line-height:1.65;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
h1,h2,h3,.brand-name{font-family:"Space Grotesk",system-ui,sans-serif;}
a{color:inherit;text-decoration:none;}
code,.mono{font-family:"JetBrains Mono",monospace;}

.topbar{
  position:sticky; top:0; z-index:20; top:env(safe-area-inset-top,0px);
  display:flex; align-items:center; gap:14px; height:64px; padding:0 20px;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:10px; min-width:0;}
.logo-mark{
  width:32px; height:32px; border-radius:8px; flex:none;
  background:linear-gradient(155deg, var(--accent), #274A36);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:15px; font-family:"Space Grotesk",sans-serif;
}
.brand-name{font-size:16.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.brand-sub{font-size:11.5px; color:var(--muted); margin-top:-2px; white-space:nowrap;}
.brand-text{display:flex; flex-direction:column; min-width:0;}

.searchwrap{flex:1; max-width:420px; margin-left:12px; position:relative;}
.searchwrap input{
  width:100%; padding:8px 12px 8px 34px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  font-family:"Public Sans",sans-serif; font-size:13.5px; outline:none;
}
.searchwrap input:focus{border-color:var(--accent);}
.searchwrap svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); opacity:.55; width:15px; height:15px;}
.searchwrap kbd{position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:10.5px; color:var(--muted); border:1px solid var(--border); border-radius:4px; padding:1px 5px;}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:8px;}
.icon-btn{width:34px; height:34px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); flex:none; transition:transform .15s ease, background .15s ease, border-color .15s ease;}
.icon-btn svg{width:16px;height:16px;}
.icon-btn:hover{border-color:var(--accent);}
.icon-btn:active{transform:scale(.9);}
.menu-btn{display:flex;}
.menu-btn svg{transition:transform .2s ease;}
.menu-btn.active svg{transform:rotate(90deg);}

.shell{display:flex; max-width:1280px; margin:0 auto;}
nav.sidebar{width:250px; flex:none; padding:24px 14px 60px; position:sticky; top:64px; align-self:flex-start; height:calc(100vh - 64px); overflow-y:auto; overflow-x:hidden; transition:width .22s ease, padding .22s ease, opacity .18s ease; opacity:1;}
body.sidebar-collapsed nav.sidebar{width:0; padding-left:0; padding-right:0; opacity:0;}
.navgroup{margin-bottom:6px; white-space:nowrap;}
.navgroup-title{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:10px 10px 6px; font-weight:600;}
.navlink{display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:7px; font-size:13.8px; color:var(--muted); border-left:2px solid transparent; margin-left:2px; transition:background .15s ease, color .15s ease, transform .15s ease;}
.navlink svg{width:15px; height:15px; flex:none; opacity:.8;}
.navlink:hover{background:var(--surface-2); color:var(--text); transform:translateX(2px);}
.navlink.active{background:var(--accent-soft); color:var(--accent); border-left-color:var(--accent); font-weight:500;}
.navlink.active svg{opacity:1;}

main{flex:1; min-width:0; padding:32px 40px 100px; max-width:760px; animation:fadeInUp .4s ease both;}
@keyframes fadeInUp{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){ main{animation:none;} }
.toc{width:190px; flex:none; padding:32px 10px 60px; position:sticky; top:64px; align-self:flex-start; height:calc(100vh - 64px); overflow-y:auto; font-size:12.5px;}
.toc-title{color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-size:10.5px; font-weight:600; margin-bottom:10px;}
.toc a{display:block; padding:4px 0; color:var(--muted); border-left:2px solid var(--border); padding-left:12px;}
.toc a:hover{color:var(--text);}
.toc a.sub{padding-left:22px;}

.eyebrow{color:var(--accent); font-size:12.5px; font-weight:600; margin-bottom:6px;}
h1{font-size:29px; margin:0 0 6px; font-weight:700; letter-spacing:-.01em;}
.lede{color:var(--muted); font-size:15.5px; margin:0 0 28px;}
h2{font-size:19px; margin:36px 0 10px; font-weight:600; scroll-margin-top:80px;}
h3{font-size:15.5px; margin:22px 0 8px; font-weight:600; scroll-margin-top:80px;}
p{margin:0 0 14px; color:var(--text);}
ul,ol{margin:0 0 16px; padding-left:20px;}
li{margin-bottom:6px;}
.callout{border:1px solid var(--border); border-left:3px solid var(--accent); background:var(--surface); border-radius:0 8px 8px 0; padding:12px 16px; margin:16px 0 20px; font-size:14px;}
.callout b{color:var(--accent);}
code.inline{background:var(--code-bg); padding:1.5px 6px; border-radius:5px; font-size:.87em;}
pre{background:var(--code-bg); border:1px solid var(--border); border-radius:9px; padding:14px 16px; overflow-x:auto; font-size:13px; margin:0 0 18px; line-height:1.55;}
table{border-collapse:collapse; width:100%; margin:0 0 20px; font-size:13.8px;}
th,td{border:1px solid var(--border); padding:8px 12px; text-align:left;}
th{background:var(--surface-2); font-weight:600; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.03em;}
.cards{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 20px;}
.card{border:1px solid var(--border); border-radius:10px; padding:14px 16px; background:var(--surface);}
.card h4{margin:0 0 4px; font-size:14px; font-weight:600;}
.card p{margin:0; font-size:13px; color:var(--muted);}
.pagenav{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:56px;}
.pagenav-card{border:1px solid var(--border); border-radius:12px; padding:14px 16px; background:var(--surface); display:flex; flex-direction:column; gap:4px; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;}
.pagenav-card:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:0 10px 24px var(--shadow);}
.pagenav-card .label{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); display:flex; align-items:center; gap:5px;}
.pagenav-card .label svg{width:12px; height:12px;}
.pagenav-card .title{font-size:15px; font-weight:600; color:var(--text);}
.pagenav-card.next{align-items:flex-end; text-align:right;}
.pagenav-card.next .label{flex-direction:row-reverse;}
mark{background:var(--accent-soft); color:var(--accent); border-radius:3px; padding:0 2px;}

@media (max-width:980px){ .toc{display:none;} main{padding:28px 24px 100px;} }
@media (max-width:760px){
  .menu-btn{display:flex;}
  nav.sidebar{position:fixed; left:0; top:64px; top:calc(64px + env(safe-area-inset-top,0px)); height:calc(100vh - 64px); background:var(--bg); border-right:1px solid var(--border); transform:translateX(-100%); transition:transform .2s ease; z-index:15; width:78vw; max-width:280px;}
  nav.sidebar.open{transform:translateX(0); box-shadow:8px 0 24px var(--shadow);}
  .searchwrap{display:none;}
  main{padding:24px 18px 100px;}
  .cards{grid-template-columns:1fr;}
}