:root{
  --bg:#fbfbfa; --fg:#1a1a19; --muted:#6b6b66; --line:#e0e0dc; --line2:#efefec;
  --accent:#0b6b5f; --bad:#b4341f; --warn:#8a6100; --code:#f3f3f0;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","PingFang TC",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#16171a; --fg:#e8e8e4; --muted:#9a9a94; --line:#2c2e33; --line2:#212328;
    --accent:#4fd1bd; --bad:#ff8a70; --warn:#e0b050; --code:#1d1f23;
  }
}
:root[data-theme="dark"]{
  --bg:#16171a; --fg:#e8e8e4; --muted:#9a9a94; --line:#2c2e33; --line2:#212328;
  --accent:#4fd1bd; --bad:#ff8a70; --warn:#e0b050; --code:#1d1f23;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 var(--sans);
  -webkit-font-smoothing:antialiased}

/* 頂欄:一條細線,不做卡片、不做陰影 */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.5rem;
  padding:.7rem 1.5rem;background:var(--bg);border-bottom:1px solid var(--line);
  max-width:100vw;overflow:hidden}
.brand{font-weight:650;letter-spacing:-.01em;color:var(--fg);text-decoration:none;
  border-bottom:0;white-space:nowrap}
.tabs{display:flex;gap:1.25rem;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{color:var(--muted);text-decoration:none;font-size:.92rem;white-space:nowrap;
  padding-bottom:.15rem;border-bottom:2px solid transparent}
.tabs a:hover{color:var(--fg)}
.tabs a.on{color:var(--fg);border-bottom-color:var(--accent)}
.gh{color:var(--muted);text-decoration:none;border-bottom:0;font-size:.85rem;white-space:nowrap}
.gh:hover{color:var(--fg)}

.shell{display:flex;gap:3rem;max-width:1240px;margin:0 auto;padding:0 1.5rem;align-items:flex-start}
.side{position:sticky;top:4.2rem;width:15rem;flex:none;padding:2rem 0 3rem;
  max-height:calc(100vh - 4.2rem);overflow-y:auto;font-size:.88rem}
.side-h{color:var(--muted);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  margin:0 0 .7rem;padding-bottom:.4rem;border-bottom:1px solid var(--line)}
.side-h~.side-h{margin-top:2.2rem}
.side-l,.toc{list-style:none;margin:0;padding:0}
.side-l li{margin:.1rem 0}
.side-l a{display:flex;gap:.55rem;color:var(--muted);text-decoration:none;border-bottom:0;
  padding:.28rem 0;line-height:1.45}
.side-l a:hover{color:var(--fg)}
.side-l a.on{color:var(--accent);font-weight:600}
.side-l .n{color:color-mix(in srgb,var(--muted) 45%,transparent);
  font-variant-numeric:tabular-nums;flex:none}
.side-l a.on .n,.side-l a:hover .n{color:var(--muted)}
.toc li{margin:.05rem 0}
.toc a{display:block;color:var(--muted);text-decoration:none;border-bottom:0;
  padding:.2rem 0;line-height:1.4}
.toc a:hover{color:var(--fg)}
.toc .l3{padding-left:.9rem;font-size:.94em}

.doc{flex:1;min-width:0;max-width:47rem;padding:2rem 0 6rem}

/* 標題:靠字級與留白建立階層 */
h1{font-size:1.85rem;line-height:1.3;letter-spacing:-.015em;margin:.5rem 0 1.6rem;font-weight:680}
h2{font-size:1.24rem;line-height:1.4;margin:3.2rem 0 1rem;padding-top:1.5rem;
  border-top:1px solid var(--line);font-weight:650;letter-spacing:-.01em}
h3{font-size:1.02rem;margin:2.2rem 0 .7rem;font-weight:650}
h4{font-size:.95rem;margin:1.6rem 0 .5rem;color:var(--muted);font-weight:650}
h1+p,h2+p,h3+p{margin-top:0}
p{margin:1.05rem 0}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
a:hover{border-bottom-color:var(--accent)}
strong{font-weight:650}
hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0}

ul,ol{padding-left:1.35rem;margin:1.05rem 0}
li{margin:.35rem 0}
li>ul,li>ol{margin:.35rem 0}

blockquote{margin:1.4rem 0;padding:.1rem 0 .1rem 1.15rem;border-left:2px solid var(--line);color:var(--muted)}
blockquote strong{color:var(--fg)}

code{font-family:var(--mono);font-size:.875em;background:var(--code);padding:.12em .38em;
  border-radius:3px;word-break:break-word}
pre{background:var(--code);border:1px solid var(--line2);border-radius:6px;padding:.9rem 1.1rem;
  overflow-x:auto;margin:1.4rem 0;line-height:1.6}
pre code{background:none;padding:0;font-size:.855rem}

.tw{overflow-x:auto;margin:1.5rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-size:.9rem;line-height:1.6}
th,td{text-align:left;vertical-align:top;padding:.6rem .9rem;border-bottom:1px solid var(--line2)}
th{font-weight:650;color:var(--muted);font-size:.8rem;letter-spacing:.03em;white-space:nowrap;
  border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
td:first-child,th:first-child{padding-left:0}
td:last-child,th:last-child{padding-right:0}

img,svg{max-width:100%;height:auto}
p[align="center"]{margin:2rem 0;text-align:center}
/* 既有圖解都是硬編白底,深色模式下給它一個明確的圖框,免得看起來像破圖 */
.doc p[align="center"] img{background:#fff;border:1px solid var(--line);border-radius:6px;padding:.5rem}

.offsite{color:var(--muted)}
.offsite-tag{font-size:.72rem;color:var(--muted);border:1px solid var(--line);border-radius:3px;
  padding:.05rem .3rem;margin-left:.3rem;white-space:nowrap}

.foot{max-width:1240px;margin:0 auto;padding:1.5rem;border-top:1px solid var(--line);
  color:var(--muted);font-size:.85rem}
.foot a{color:var(--muted);border-bottom:0}
.foot a:hover{color:var(--fg)}

@media (max-width:900px){
  .shell{display:block;padding:0 1.15rem}
  .side{position:static;width:auto;max-height:none;padding:1.5rem 0 0;overflow:visible}
  .doc{max-width:none;padding-top:1.5rem}
  .toc{display:none}
  h1{font-size:1.55rem}
  .top{padding:.6rem 1.15rem;gap:.9rem}
  .gh{display:none}
  .brand{font-size:.92rem}
}