:root{
  --ink:#0f0f0f; --paper:#ffffff; --ink-800:#1c1a19; --ink-700:#2b2927; --ink-500:#5a5855; --ink-400:#9c9893; --ink-300:#c7c3bd; --ink-200:#edece9;
  --sand-100:#f7f5f2; --sand-200:#e9e5e1; --sand-300:#cec8c2;
  --moss-100:#b1cdc9; --moss-500:#6e8a86; --moss-700:#304748; --moss-900:#1f2f30;
  --ink-on-dark:rgba(255,255,255,.92); --ink-on-dark-muted:rgba(255,255,255,.72); --ink-on-dark-faint:rgba(255,255,255,.5); --rule-on-dark-strong:rgba(255,255,255,.08);
  --alert:#8f3e3e;
  --font-sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"PT Serif",Georgia,serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --content:880px;
  --gutter:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--moss-700);text-decoration:none;border-bottom:1px solid var(--sand-300);transition:color .2s,border-color .2s}
a:hover{color:var(--moss-500);border-color:var(--moss-500)}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px var(--gutter);background:rgba(255,255,255,.86);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--sand-200)}
.nav-brand{font-family:var(--font-mono);font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink);border:0}
.nav-brand:hover{color:var(--moss-700)}
.nav-links{display:flex;gap:6px;flex-wrap:wrap}
.nav-links a{font-family:var(--font-mono);font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-500);padding:6px 12px;border:1px solid transparent;border-radius:4px}
.nav-links a:hover{color:var(--ink);background:var(--sand-100)}
.nav-links a.active{color:var(--paper);background:var(--ink);border-color:var(--ink)}

/* hero */
.hero{padding:80px var(--gutter) 0;max-width:calc(var(--content) + var(--gutter) * 2);margin:0 auto}
.eyebrow{display:inline-block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-500);background:var(--sand-100);border:1px solid var(--sand-200);padding:6px 11px;margin-bottom:26px}
.hero h1{font-family:var(--font-sans);font-size:clamp(34px,6vw,58px);line-height:1.04;letter-spacing:-2px;font-weight:600;margin:0 0 20px}
.hero h1 em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--ink-500);letter-spacing:-1px}
.hero .lede{font-family:var(--font-serif);font-size:19px;line-height:1.6;color:var(--ink-500);max-width:640px;margin:0}
.hero-meta{display:flex;flex-wrap:wrap;gap:44px;margin-top:44px;padding:24px 0 0;border-top:1px solid var(--sand-200)}
.hero-meta>div{display:flex;flex-direction:column;gap:5px}
.hero-meta .k{font-family:var(--font-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-400)}
.hero-meta .v{font-size:14px;font-weight:500;color:var(--ink)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.doc-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:14px;font-weight:500;letter-spacing:-.1px;padding:12px 20px;border-radius:4px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--moss-700);border-color:var(--moss-700);color:var(--paper)}

/* doc */
.doc{max-width:calc(var(--content) + var(--gutter) * 2);margin:0 auto;padding:52px var(--gutter) 96px}
.doc h2{font-family:var(--font-sans);font-size:clamp(23px,3.2vw,29px);line-height:1.15;letter-spacing:-.8px;font-weight:600;margin:64px 0 10px;padding-top:30px;border-top:1px solid var(--sand-200)}
.doc h2:first-child{border-top:0;padding-top:0;margin-top:4px}
.doc h3{font-family:var(--font-sans);font-size:19px;font-weight:600;letter-spacing:-.3px;margin:40px 0 6px;color:var(--ink)}
.doc h4{font-family:var(--font-mono);font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--moss-700);margin:30px 0 8px}
.doc p{margin:14px 0;color:var(--ink-700)}
.doc strong{font-weight:600;color:var(--ink)}
.doc em{font-family:var(--font-serif);font-style:italic;color:var(--ink-700)}
.doc ul,.doc ol{margin:14px 0;padding-left:22px;color:var(--ink-700)}
.doc li{margin:7px 0}
.doc li::marker{color:var(--ink-400)}
.doc code{font-family:var(--font-mono);font-size:.85em;background:var(--sand-100);border:1px solid var(--sand-200);border-radius:3px;padding:1px 5px;color:var(--moss-900)}
.doc blockquote{margin:24px 0;padding:16px 22px;background:var(--sand-100);border-left:3px solid var(--moss-500);color:var(--ink-700)}
.doc blockquote p{margin:6px 0}
.doc blockquote strong{color:var(--ink)}
.doc hr{border:0;border-top:1px solid var(--sand-200);margin:44px 0}
.doc h1{font-family:var(--font-sans);font-size:30px;font-weight:600;letter-spacing:-1px;margin:0 0 12px}

/* tables */
.table-wrap{overflow-x:auto;margin:22px 0;border:1px solid var(--sand-200)}
.doc table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:600px}
.doc thead th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-500);background:var(--sand-100);text-align:left;padding:11px 14px;border-bottom:1px solid var(--sand-300);white-space:nowrap}
.doc tbody td{padding:11px 14px;border-bottom:1px solid var(--sand-200);vertical-align:top;color:var(--ink-700);line-height:1.5}
.doc tbody tr:last-child td{border-bottom:0}
.doc tbody tr:nth-child(even) td{background:#fbfaf8}
.doc td code,.doc th code{white-space:nowrap}

/* footer */
.colophon{padding:40px var(--gutter);text-align:center;border-top:1px solid var(--sand-200)}
.colophon span{font-family:var(--font-mono);font-size:11px;letter-spacing:.8px;color:var(--ink-400)}

@media(max-width:768px){
  .hero{padding-top:52px}
  .hero-meta{gap:24px}
  .doc{padding-top:40px}
}

/* ----- Dark theme (per-page, used by Demo) ----- */
body.theme-dark{background:var(--ink);color:var(--ink-on-dark)}
.theme-dark .nav{background:rgba(15,15,15,.86);border-bottom-color:var(--rule-on-dark-strong)}
.theme-dark .nav-brand{color:#fff}
.theme-dark .nav-brand:hover{color:var(--moss-100)}
.theme-dark .nav-links a{color:var(--ink-on-dark-muted)}
.theme-dark .nav-links a:hover{color:#fff;background:rgba(255,255,255,.06)}
.theme-dark .nav-links a.active{background:#fff;color:var(--ink);border-color:#fff}
.theme-dark .eyebrow{background:rgba(255,255,255,.06);border-color:var(--rule-on-dark-strong);color:var(--ink-on-dark-muted)}
.theme-dark .hero h1{color:#fff}
.theme-dark .hero h1 em{color:var(--ink-on-dark-muted)}
.theme-dark .hero .lede{color:var(--ink-on-dark-muted)}
.theme-dark .hero-meta{border-top-color:var(--rule-on-dark-strong)}
.theme-dark .hero-meta .k{color:var(--ink-on-dark-faint)}
.theme-dark .hero-meta .v{color:#fff}
.theme-dark .btn{background:#fff;color:var(--ink);border-color:#fff}
.theme-dark .btn:hover{background:var(--sand-200);border-color:var(--sand-200);color:var(--ink)}
.theme-dark .doc{color:var(--ink-on-dark)}
.theme-dark .doc p{color:var(--ink-on-dark-muted)}
.theme-dark .doc strong{color:#fff}
.theme-dark .doc em{color:var(--ink-on-dark)}
.theme-dark .doc a:not(.btn){color:var(--moss-100);border-bottom-color:rgba(177,205,201,.4)}
.theme-dark .doc a:not(.btn):hover{color:#fff;border-color:#fff}
.theme-dark .doc h2{color:#fff;border-top-color:var(--rule-on-dark-strong)}
.theme-dark .doc h3{color:#fff}
.theme-dark .doc h4{color:var(--moss-100)}
.theme-dark .doc code{background:rgba(255,255,255,.06);border-color:var(--rule-on-dark-strong);color:var(--moss-100)}
.theme-dark .doc blockquote{background:rgba(255,255,255,.04);border-left-color:var(--moss-500);color:var(--ink-on-dark-muted)}
.theme-dark .doc blockquote strong{color:#fff}
.theme-dark .doc hr{border-top-color:var(--rule-on-dark-strong)}
.theme-dark .table-wrap{border-color:var(--rule-on-dark-strong)}
.theme-dark .doc thead th{background:rgba(255,255,255,.05);color:var(--ink-on-dark-muted);border-bottom-color:var(--rule-on-dark-strong)}
.theme-dark .doc tbody td{color:var(--ink-on-dark-muted);border-bottom-color:var(--rule-on-dark-strong)}
.theme-dark .doc tbody tr:nth-child(even) td{background:rgba(255,255,255,.03)}
.theme-dark .colophon{border-top-color:var(--rule-on-dark-strong)}
.theme-dark .colophon span{color:var(--ink-on-dark-faint)}

/* ----- Access gate ----- */
.gate{display:none;position:fixed;inset:0;z-index:9999;background:var(--paper);align-items:center;justify-content:center;padding:24px}
html.locked .gate{display:flex}
html.locked body{overflow:hidden}
.gate-card{width:100%;max-width:360px}
.gate-card .eyebrow{margin-bottom:18px}
.gate-card h2{font-family:var(--font-sans);font-size:24px;letter-spacing:-.6px;font-weight:600;margin:0 0 8px;color:var(--ink)}
.gate-card .sub{font-family:var(--font-serif);font-size:14px;color:var(--ink-500);margin:0 0 22px}
.gate-card form{display:flex;flex-direction:column;gap:10px}
.gate-card input{font-family:var(--font-sans);font-size:15px;padding:12px 14px;border:1px solid var(--sand-300);border-radius:4px;background:var(--paper);color:var(--ink);outline:none}
.gate-card input:focus{border-color:var(--ink)}
.gate-card button{font-family:var(--font-sans);font-size:14px;font-weight:500;padding:12px 18px;border:1px solid var(--ink);border-radius:4px;background:var(--ink);color:var(--paper);cursor:pointer;transition:background .2s,border-color .2s}
.gate-card button:hover{background:var(--moss-700);border-color:var(--moss-700)}
.gate-card .err{color:var(--alert);font-family:var(--font-mono);font-size:11px;letter-spacing:.4px;min-height:14px}