@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fira+Code:wght@400;500&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Instrument Sans','DM Sans',system-ui,sans-serif;color:#1a1a2e;background:#fff;line-height:1.65;font-size:15px}

.hdr{position:fixed;top:0;left:0;right:0;height:54px;background:#fff;border-bottom:1px solid #ecedf0;z-index:50;display:flex;align-items:center;padding:0 20px}
.hdr-inner{display:flex;align-items:center;justify-content:space-between;width:100%}
.hdr-left{display:flex;align-items:center;gap:20px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-size:16px;font-weight:700;color:#1a1a2e}
.logo-mark{width:26px;height:26px;background:linear-gradient(135deg,#7c3aed,#a78bfa);border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:800;letter-spacing:-0.04em}
.hdr-links{display:flex;gap:2px}
.hdr-links a{font-size:13px;font-weight:500;color:#64648c;padding:6px 11px;border-radius:6px;text-decoration:none;transition:all .12s}
.hdr-links a:hover{background:#f4f4f8;color:#1a1a2e}
.hdr-links a.active{background:#ede9fe;color:#7c3aed}
.hdr-cta{font-size:13px;font-weight:600;color:#fff;background:#7c3aed;padding:7px 18px;border-radius:7px;text-decoration:none;transition:all .15s}
.hdr-cta:hover{background:#6d28d9}

.layout{display:flex;margin-top:54px;min-height:calc(100vh - 54px)}

.sb{width:256px;min-width:256px;border-right:1px solid #ecedf0;background:#fafbfd;padding:16px 0;position:fixed;top:54px;bottom:0;overflow-y:auto}
.sb-section{padding:0 12px;margin-bottom:18px}
.sb-label{font-size:10.5px;font-weight:700;color:#9495ad;text-transform:uppercase;letter-spacing:.08em;padding:8px 12px 4px}
.sb-link{display:block;font-size:13.5px;color:#52526e;text-decoration:none;padding:5px 12px;border-radius:6px;line-height:1.45;font-weight:450;transition:all .1s}
.sb-link:hover{background:#eeeef3;color:#1a1a2e}
.sb-link.act{background:#ede9fe;color:#7c3aed;font-weight:600}

.main{flex:1;margin-left:256px;padding:36px 48px 80px}
.main-inner{max-width:720px}

.crumb{display:flex;gap:6px;font-size:12.5px;color:#9495ad;margin-bottom:16px}
.crumb a{color:#7c3aed;text-decoration:none}
.crumb a:hover{text-decoration:underline}

.badge{display:inline-block;font-size:11px;font-weight:600;color:#7c3aed;background:#ede9fe;padding:3px 10px;border-radius:100px;margin-bottom:10px;letter-spacing:.02em}
.updated{font-size:12px;color:#b0b0c8;margin-bottom:12px}
.pg-title{font-size:28px;font-weight:700;letter-spacing:-0.025em;line-height:1.2;color:#1a1a2e;margin-bottom:6px}
.pg-sub{font-size:15.5px;color:#7a7a96;margin-bottom:28px;font-weight:400}

.desc-box{font-size:14.5px;color:#52526e;line-height:1.72;padding:20px 24px;background:#f8f9fc;border:1px solid #ecedf0;border-radius:10px;margin-bottom:32px}

.pg-list{list-style:none;margin-bottom:40px}
.pg-list li a{display:flex;align-items:flex-start;gap:10px;color:#52526e;text-decoration:none;font-size:14px;padding:10px 14px;border-radius:8px;line-height:1.5;border:1px solid transparent;transition:all .12s}
.pg-list li a:hover{background:#f8f8fc;border-color:#ecedf0;color:#7c3aed}
.pg-list .dot{flex-shrink:0;width:5px;height:5px;background:#7c3aed;border-radius:50%;margin-top:8px}

.body h2{font-size:20px;font-weight:700;margin:36px 0 12px;color:#1a1a2e;padding-top:20px;border-top:1px solid #f0f0f4;letter-spacing:-0.01em}
.body h2:first-of-type{border-top:none;padding-top:0}
.body p{margin-bottom:14px;color:#52526e;font-size:14.5px;line-height:1.72}
.body strong{color:#1a1a2e;font-weight:600}
.body a{color:#7c3aed;text-decoration:none}
.body a:hover{text-decoration:underline}
.body ul{margin:0 0 14px 18px;color:#52526e}
.body li{margin-bottom:5px;font-size:14px;line-height:1.6}
.body code{font-family:'Fira Code',monospace;background:#f4f2ff;border:1px solid #eae6f7;padding:1px 5px;border-radius:4px;font-size:12.5px;color:#6d28d9}
.body pre{background:#1e1e2e;border-radius:10px;padding:18px 20px;overflow-x:auto;margin:0 0 18px}
.body pre code{background:none;border:none;padding:0;color:#cdd6f4;font-size:12.5px;line-height:1.65;display:block;white-space:pre}
.body table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13.5px}
.body th{background:#f8f9fc;font-weight:600;text-align:left;padding:9px 14px;border:1px solid #ecedf0;color:#1a1a2e}
.body td{padding:9px 14px;border:1px solid #ecedf0;color:#52526e}

.cta-box{background:linear-gradient(135deg,#f5f3ff,#eef6ff);border:1px solid #ddd6fe;border-radius:12px;padding:28px;margin:40px 0;text-align:center}
.cta-box h3{font-size:17px;font-weight:700;margin-bottom:6px;color:#1a1a2e}
.cta-box p{font-size:13.5px;color:#7a7a96;margin-bottom:14px}
.cta-box a{display:inline-block;background:#7c3aed;color:#fff;padding:9px 22px;border-radius:8px;text-decoration:none;font-weight:600;font-size:13.5px;transition:all .15s}
.cta-box a:hover{background:#6d28d9;transform:translateY(-1px);box-shadow:0 4px 14px rgba(124,58,237,.25)}

.pg-nav{display:flex;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid #ecedf0}
.pg-nav a{flex:1;text-decoration:none;display:block;border:1px solid #ecedf0;border-radius:8px;padding:12px 16px;transition:all .12s}
.pg-nav a:hover{border-color:#7c3aed}
.pg-nav .nl{font-size:11px;color:#9495ad;margin-bottom:2px}
.pg-nav .nt{font-size:13px;font-weight:600;color:#7c3aed}
.pg-nav .next{text-align:right}

.ft{margin-left:256px;border-top:1px solid #ecedf0;padding:20px 48px}
.ft p{font-size:11.5px;color:#b0b0c8;line-height:1.7}
.ft a{color:#7c3aed;text-decoration:none}

@media(max-width:860px){
.sb{display:none}.main{margin-left:0;padding:28px 20px 60px}.ft{margin-left:0;padding:16px 20px}.pg-nav{flex-direction:column}
}