:root{
  --bg:#fdfaf6;
  --ink:#2b1d12;
  --brown:#7a4a23;
  --orange:#f08a3e;
  --orange-dark:#cc6f25;
  --line:#e9d8c4;
  --code-bg:#f5e9d7;
  --muted:#8a6a4f;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px}
.container{max-width:1100px;margin:0 auto;padding:0 24px}
.topbar{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:10}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.logo{font-family:"SF Mono",Menlo,monospace;background:var(--brown);color:#fff;padding:4px 10px;border-radius:6px;font-weight:700}
.title{font-weight:600;font-size:18px}
.title em{color:var(--orange-dark);font-style:normal}
nav{display:flex;gap:24px;flex-wrap:wrap}
nav a{color:var(--ink);text-decoration:none;font-weight:500}
nav a:hover{color:var(--orange-dark)}
.hero{padding:80px 0 60px;background:linear-gradient(180deg,#fff,var(--bg))}
.hero h1{font-size:42px;font-weight:700;color:var(--brown);margin-bottom:18px;letter-spacing:-0.5px}
.lead{font-size:19px;color:var(--muted);max-width:720px;margin-bottom:30px}
.cta-row{display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 24px;border-radius:6px;text-decoration:none;font-weight:600;font-size:15px;border:1.5px solid transparent;transition:all .15s}
.btn.primary{background:var(--orange);color:#fff}
.btn.primary:hover{background:var(--orange-dark)}
.btn.secondary{background:#fff;color:var(--brown);border-color:var(--brown)}
.btn.secondary:hover{background:var(--code-bg)}
section{padding:60px 0;border-top:1px solid var(--line)}
section h2{font-size:30px;color:var(--brown);margin-bottom:30px;font-weight:700}
section h3{font-size:20px;color:var(--brown);margin-bottom:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(122,74,35,.08)}
.card p{color:var(--muted);font-size:14px;margin-bottom:12px}
.card code{display:block;background:var(--code-bg);padding:6px 10px;border-radius:4px;font-size:12px;font-family:"SF Mono",Menlo,monospace;color:var(--brown);word-break:break-all;margin-bottom:12px}
.card a{color:var(--orange-dark);text-decoration:none;font-weight:600;font-size:14px}
.features-grid div{padding:20px;background:#fff;border-left:3px solid var(--orange);border-radius:4px}
.features-grid strong{display:block;color:var(--brown);font-size:17px;margin-bottom:8px}
.features-grid p{font-size:14px;color:var(--muted)}
code,pre{font-family:"SF Mono",Menlo,Monaco,monospace}
pre{background:var(--code-bg);padding:18px;border-radius:8px;overflow-x:auto;font-size:13px;line-height:1.5;border:1px solid var(--line);margin:18px 0}
.inline{background:var(--code-bg);padding:2px 6px;border-radius:3px;font-size:13px;color:var(--brown)}
article.doc{background:#fff;padding:40px 50px;border-radius:10px;border:1px solid var(--line);margin-bottom:30px}
article.doc h1{font-size:34px;color:var(--brown);margin-bottom:12px;font-weight:700}
article.doc h2{font-size:24px;color:var(--brown);margin:30px 0 14px;font-weight:600;border:none;padding:0}
article.doc h3{font-size:18px;color:var(--brown);margin:24px 0 10px;font-weight:600}
article.doc p{margin-bottom:14px;color:var(--ink)}
article.doc ul,article.doc ol{margin:14px 0 14px 30px;color:var(--ink)}
article.doc li{margin-bottom:6px}
article.doc table{width:100%;border-collapse:collapse;margin:18px 0}
article.doc th,article.doc td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
article.doc th{background:var(--code-bg);color:var(--brown);font-weight:600}
footer{padding:40px 0;background:#fff;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:14px}
footer a{color:var(--brown);text-decoration:none}
.api-list a{display:block;padding:14px 20px;background:#fff;border:1px solid var(--line);border-radius:6px;margin-bottom:10px;text-decoration:none;color:var(--brown);font-weight:500}
.api-list a:hover{border-color:var(--orange);background:var(--code-bg)}
.api-list a small{color:var(--muted);font-weight:normal;display:block;font-size:12px;margin-top:4px}
@media (max-width:700px){
  nav{display:none}
  .hero h1{font-size:32px}
  article.doc{padding:24px 22px}
}