:root{--bg:#f6f8fc;--surf:#fff;--side:#eef2f8;--line:#e2e8f2;--ink:#17202e;--mute:#66758a;--ac:#3563c9;--soft:#e8eefc;--code:#f0f3f8;--onac:#fff;--warnbg:#fdf4e3;--warnbd:#e8c277;--warnfg:#8a5a0b;--ok:#2e9e6b;--bad:#c4372c;--sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;padding-top:env(safe-area-inset-top,0)}
a{color:var(--ac);text-underline-offset:3px}
::selection{background:var(--soft)}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
.mu{color:var(--mute)}

.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;height:54px;padding:0 20px;background:var(--surf);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:600;font-size:19px;letter-spacing:-.01em;min-width:0}
.brand svg{width:32px;height:auto;flex:none}
.brand span{color:var(--mute);font-weight:400;font-size:15px;border-left:1px solid var(--line);padding-left:10px;white-space:nowrap}
.hl{display:flex;align-items:center;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hl::-webkit-scrollbar{display:none}
.hl>*{flex:none}
.gh{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;margin:0;border:0;border-radius:9px;background:none;color:var(--mute);font:inherit;font-weight:500;font-size:14px;line-height:1.4;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background .12s,color .12s}
button.gh{font-family:var(--sans)}
.gh:hover{background:var(--side);color:var(--ink)}
.gh.on{background:var(--soft);color:var(--ac)}
.gh svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.layout{display:grid;grid-template-columns:276px minmax(0,1fr);max-width:1180px;margin:0 auto}
.toc{position:sticky;top:54px;align-self:start;height:calc(100vh - 54px);overflow-y:auto;padding:30px 18px 30px 24px;border-right:1px solid var(--line)}
.toc summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--mute);letter-spacing:.06em;margin-bottom:12px;list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc ol{list-style:none;margin:0;padding:0}
.toc li a{display:block;padding:5px 12px;border-radius:8px;color:var(--mute);text-decoration:none;font-size:15px;line-height:1.45;transition:background .12s,color .12s}
.toc li a:hover{background:var(--side);color:var(--ink)}
.toc li a.on{background:var(--soft);color:var(--ac);font-weight:500}
.toc li li a{padding-left:26px;font-size:14px}
main{padding:44px 52px 90px;max-width:860px}
h1{font-size:36px;line-height:1.2;margin:0 0 10px;font-weight:600;letter-spacing:-.02em}
h2{font-size:25px;line-height:1.3;margin:54px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line);font-weight:600;letter-spacing:-.01em}
h3{font-size:18px;margin:30px 0 6px;font-weight:600}
p{margin:0 0 14px}
.lead{color:var(--mute);font-size:18px;line-height:1.6}
pre{margin:0;padding:15px 18px;background:var(--code);border:1px solid var(--line);border-radius:12px;overflow-x:auto;font:14px/1.7 var(--mono)}
main>pre{margin:10px 0 18px}
code{font-family:var(--mono);font-size:.9em}
p code,li code,td code{background:var(--code);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
pre code{border:0;background:none;padding:0;font-size:inherit}
.cw{position:relative;margin:10px 0 18px}
.cw pre{margin:0;padding-right:54px}
.cpb{position:absolute;top:9px;right:9px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surf);color:var(--mute);cursor:pointer;transition:color .12s,border-color .12s}
.cpb:hover{color:var(--ac);border-color:var(--ac)}
.cpb.ok{color:var(--ok);border-color:var(--ok)}
.cpb svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.note,.warn{margin:18px 0;padding:14px 18px;border-radius:12px;background:var(--soft);border:1px solid var(--line)}
.note b,.warn b{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ac);margin-bottom:3px}
.warn{background:var(--warnbg);border-color:var(--warnbd)}
.warn b{color:var(--warnfg)}
table{width:100%;border-collapse:separate;border-spacing:0;margin:14px 0 20px;font-size:15px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surf)}
th,td{text-align:left;padding:10px 16px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child>td{border-bottom:0}
th{background:var(--side);font-size:13px;font-weight:600;color:var(--mute)}
th+th,td+td{border-left:1px solid var(--line)}
.sc{overflow-x:auto}
footer{border-top:1px solid var(--line);margin-top:56px;padding-top:20px;color:var(--mute);font-size:14px}
footer p{margin:0 0 6px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surf);color:var(--ink);font:inherit;font-weight:500;font-size:15px;line-height:1.4;text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color .12s,background .12s,color .12s}
.btn:hover{border-color:var(--ac);color:var(--ac)}
.btn.p{background:var(--ac);border-color:var(--ac);color:var(--onac)}
.btn.p:hover{background:var(--ac);color:var(--onac);opacity:.9}
.btn.s{padding:5px 12px;font-size:14px}
.btn:disabled{opacity:.55;cursor:default}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tag{display:inline-block;font-size:12px;line-height:20px;padding:0 9px;margin-right:6px;border-radius:999px;background:var(--soft);color:var(--mute);white-space:nowrap;font-weight:500}

@media(max-width:860px){
  .layout{display:block}
  .toc{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:16px 18px}
  main{padding:28px 18px 60px}
  h1{font-size:30px}
  h2{font-size:22px;margin-top:42px}
  .top{padding:0 14px}
}
@media(max-width:560px){
  .hl{gap:0}
  .hl .gh span{display:none}
  .hl .gh{padding:7px}
  .brand span{display:none}
  .brand{font-size:0;gap:0}
}

.ddw{position:relative;display:inline-flex}
.ddm{position:fixed;top:58px;right:12px;z-index:40;display:flex;flex-direction:column;gap:2px;min-width:210px;max-width:calc(100vw - 24px);padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surf)}
.ddm[hidden]{display:none}
.ddm{max-height:calc(100vh - 70px);overflow-y:auto}
.ddh{padding:8px 12px 4px;color:var(--mute);font-size:12px;font-weight:600}
.ddi{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.ddi svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--mute);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ddi:hover{background:var(--side)}
.ddi.on{background:var(--soft);color:var(--ac)}
.ddi.on svg{stroke:var(--ac)}
@media(max-width:380px){
  .top{padding:0 8px;gap:6px}
  .hl .gh{padding:6px}
  .brand svg{width:28px}
}