:root{--bg:#f5efe7;--ink:#2a2520;--line:#eadfd3;--brand:#8f623e;--brand-dark:#4d2f20;--shadow:0 24px 70px rgba(71,45,27,.12)}*{box-sizing:border-box}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:#f5efe7;line-height:1.75}.topbar{position:sticky;top:0;background:rgba(255,252,247,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);z-index:10}.topbar-inner,.layout,.page-foot{max-width:1180px;margin:auto}.topbar-inner{padding:14px 22px;display:flex;justify-content:space-between;align-items:center}.brand,.pill,.nav-link,.tutorial-card{text-decoration:none;color:inherit}.brand{display:flex;gap:12px;align-items:center;font-weight:800}.brand-mark{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#ead5bd;color:#4a2c18;font-weight:900}.brand-sub{display:block;font-size:12px;color:#756a60}.brand-logo{width:42px;height:42px;display:block;flex:0 0 auto;border-radius:12px}.pill{border:1px solid var(--line);border-radius:999px;padding:8px 14px;margin-left:8px}.layout{display:grid;grid-template-columns:260px 1fr;gap:28px;padding:34px 22px 72px}.sidebar{position:sticky;top:84px;align-self:start}.side-card,.hero,.doc{background:rgba(255,253,249,.92);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px}.side-card{padding:14px}.nav-link{display:flex;gap:10px;padding:11px 12px;border-radius:12px;font-weight:700}.nav-link.active,.nav-link:hover{background:var(--brand-dark);color:#fff}.hero{padding:42px 44px;margin-bottom:24px}.eyebrow{border:1px solid #e3ceb8;background:#fff7ee;color:var(--brand);border-radius:999px;padding:7px 12px;font-weight:800}.hero h1{font-size:42px;line-height:1.1}.tutorial-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.tutorial-card{display:flex;gap:14px;padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff}.doc{padding:42px 46px}.doc h1:first-child{display:none}.code-block{margin:18px 0;border-radius:16px;overflow:hidden;background:#15110d}.code-head{display:flex;justify-content:space-between;background:#241a13;color:#e5d6c7;padding:10px 16px}.copy-code{background:#332319;color:#fff;border:1px solid #6f5038;border-radius:10px;padding:6px 11px}pre{margin:0;overflow:auto;padding:18px}pre code{color:#f5eadc;white-space:pre}.doc-image img{max-width:100%;border-radius:16px;border:1px solid var(--line)}.table-wrap{overflow:auto}@media(max-width:860px){.top-actions{display:none}.layout{display:block;padding:20px 14px}.side-card{display:flex;overflow:auto}.hero{padding:28px 22px}.hero h1{font-size:30px}.tutorial-grid{grid-template-columns:1fr}.doc{padding:26px 18px}pre code{font-size:12px}}
.page-foot{padding:0 22px 38px;text-align:center;color:#8f7f70;font-size:13px;width:100%;}

@media(max-width:860px){
  .sidebar{position:static!important;margin:0 0 12px!important;top:auto!important;}
  .side-card{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;overflow:visible!important;padding:12px!important;border-radius:18px!important;}
  .nav-link{min-width:0!important;width:100%!important;white-space:normal!important;display:flex!important;align-items:center!important;gap:8px!important;padding:10px 11px!important;font-size:13px!important;line-height:1.35!important;word-break:normal!important;overflow-wrap:anywhere!important;writing-mode:horizontal-tb!important;}
  .nav-link span{flex:0 0 auto!important;font-size:12px!important;line-height:1!important;}
  .nav-link.active{box-shadow:none!important;}
}
@media(max-width:420px){
  .side-card{grid-template-columns:1fr!important;}
  .nav-link{font-size:14px!important;}
}

.anchor{display:none!important}