:root{color-scheme:light dark;--bg:#0f1115;--card:#171a21;--fg:#e6e8ee;--mut:#9aa3b2;
      --bd:#262b36;--acc:#f0b23c;--warn:#f39c12;--bar:#12151bd9;
      --ctl:34px;   /* 頂欄控制項共用高度，避免各自算出不同尺寸 */
      --top-h:53px}   /* 由 app.js 依實際頂欄高度覆寫；此為未跑 JS 時的合理預設 */
@media(prefers-color-scheme:light){:root{--bg:#f6f7f9;--card:#fff;--fg:#16181d;--mut:#5b6472;
      --bd:#e2e5ea;--acc:#9a6a10;--bar:#ffffffd9}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
     font:15px/1.75 ui-sans-serif,system-ui,"Segoe UI","Noto Sans TC",sans-serif}
a{color:var(--acc)}
[data-lang="zh"] .en,[data-lang="en"] .zh{display:none}

/* 頂欄 */
.top{position:sticky;top:0;z-index:40;background:var(--bar);border-bottom:1px solid var(--bd);
     -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* 內層容器與 .layout 同寬，否則頂欄滿版、內文置中，兩者對不齊 */
.top-in{max-width:1240px;margin:0 auto;display:flex;gap:.7rem;align-items:center;padding:.45rem 1rem}
.menu{display:none;background:transparent;border:1px solid var(--bd);color:var(--fg);
      border-radius:7px;width:34px;height:32px;font-size:1rem;cursor:pointer}
.brand{font-weight:700;text-decoration:none;color:var(--fg);display:flex;gap:.45rem;
       align-items:center;white-space:nowrap}
.brand img{border-radius:5px;display:block}
.brand .v{font:11.5px ui-monospace,Consolas,monospace;color:var(--mut);font-weight:400;
          align-self:flex-end;padding-bottom:.15rem}
.search{position:relative;width:230px;margin-left:auto}
.search input{width:100%;height:var(--ctl);background:var(--card);border:1px solid var(--bd);
              color:var(--fg);border-radius:8px;padding:0 .7rem;font:inherit;font-size:.84rem;
              outline:none}
.search input:focus{border-color:var(--acc)}
#results{position:absolute;top:calc(100% + .4rem);left:0;right:0;background:var(--card);
         border:1px solid var(--bd);border-radius:9px;overflow:hidden;display:none;
         box-shadow:0 8px 28px rgba(0,0,0,.28);max-height:60vh;overflow-y:auto}
#results.on{display:block}
#results a{display:block;padding:.5rem .75rem;text-decoration:none;color:var(--fg);
           border-bottom:1px solid var(--bd);font-size:.87rem}
#results a:last-child{border-bottom:0}
#results a:hover,#results a.sel{background:rgba(127,127,127,.12)}
#results b{color:var(--acc);display:block;font-size:.82rem;margin-bottom:.1rem}
#results small{color:var(--mut);font-size:.78rem;line-height:1.5}
#results .none{padding:.6rem .75rem;color:var(--mut);font-size:.85rem}
.links{display:flex;align-items:center;gap:.15rem}
.links a{text-decoration:none;display:flex;align-items:center;justify-content:center;
         height:var(--ctl);white-space:nowrap}
.links svg{display:block}
/* GitHub／Discord 只放品牌圖示，文字標籤交給 title 與 aria-label */
.links .ico{width:var(--ctl);border-radius:8px;color:var(--mut)}
.links .ico:hover{color:var(--fg);background:var(--card)}
/* 下載鈕用 Modrinth 品牌綠；配深色字而非白字，白字在這個綠上對比不足 */
.links a.dl{gap:.45rem;margin-left:.5rem;padding:0 .95rem;background:#00af5c;color:#0d1117;
            font-weight:600;font-size:.85rem;border-radius:8px}
.links a.dl:hover{background:#00c96b}
.sep{width:1px;height:20px;background:var(--bd);margin:0 .25rem}
.langs{display:flex;gap:.3rem}
.langs button{height:var(--ctl);background:transparent;border:1px solid var(--bd);color:var(--mut);
              border-radius:8px;padding:0 .7rem;font:inherit;font-size:.81rem;cursor:pointer;
              white-space:nowrap}
.langs button:hover{color:var(--fg)}
.langs button.on{background:var(--card);border-color:var(--acc);color:var(--acc)}

/* 版面 */
/* 三欄一律保留，即使該頁沒有右側目錄。
   讓無目錄的頁面收成兩欄會使內容欄位移，換頁時整片內容左右跳動，比空一塊更突兀。 */
.layout{display:grid;grid-template-columns:250px minmax(0,1fr) 210px;max-width:1400px;margin:0 auto}
aside{position:sticky;top:var(--top-h);align-self:start;height:calc(100vh - var(--top-h));overflow-y:auto;
      padding:1.5rem .8rem 2rem;border-right:1px solid var(--bd)}
aside .grp{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);
           margin:1.2rem 0 .35rem;padding-left:.6rem;opacity:.8}
aside .grp:first-child{margin-top:0}
aside a{display:block;padding:.32rem .6rem;border-radius:6px;color:var(--mut);text-decoration:none;
        font-size:.88rem;border-left:2px solid transparent}
aside a:hover{color:var(--fg);background:var(--card)}
aside a.on{color:var(--acc);border-left-color:var(--acc);background:var(--card);font-weight:500}
main{min-width:0;padding:2.2rem 2.2rem 0}
article{max-width:780px}

h1{font-size:2rem;margin:0 0 1.8rem;letter-spacing:-.015em}
h2{font-size:1.3rem;margin:2.4rem 0 .9rem;padding-bottom:.4rem;border-bottom:1px solid var(--bd);
   scroll-margin-top:calc(var(--top-h) + 1rem)}
h3{font-size:1.02rem;margin:1.8rem 0 .5rem;scroll-margin-top:calc(var(--top-h) + 1rem)}
p{margin:.75rem 0}
ol,ul{margin:.75rem 0;padding-left:1.4rem}
li{margin:.3rem 0}
pre{background:rgba(127,127,127,.1);border:1px solid var(--bd);border-radius:8px;padding:.85rem;
    overflow-x:auto;margin:.9rem 0;font:12.5px/1.6 ui-monospace,Consolas,monospace}
code{font:.88em ui-monospace,Consolas,monospace}
p code,li code,td code,th code{background:rgba(127,127,127,.15);padding:.1rem .35rem;
                               border-radius:4px;color:var(--acc)}
pre code{background:none;padding:0;color:inherit}
table{width:100%;border-collapse:collapse;font-size:.88rem;margin:1rem 0;display:block;overflow-x:auto}
th,td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--bd);vertical-align:top}
th{color:var(--mut);font-weight:500;font-size:.75rem;text-transform:uppercase;
   letter-spacing:.04em;white-space:nowrap}
/* 提示框。原本只有淡灰底＋細框，在滿是文字的頁面裡幾乎看不出來。

   圖示用絕對定位而非 flex：flex 會把每個子元素（<b>、<code>…）都變成獨立
   flex item，內文會被拆成一欄一欄。容器必須維持一般區塊，文字才能正常斷行。 */
.note,.warn{position:relative;padding:.85rem 1rem .85rem 2.9rem;border-radius:9px;
            border:1px solid;border-left-width:4px;margin:1.2rem 0;font-size:.9rem}
.note::before,.warn::before{position:absolute;left:.95rem;top:.9rem;
            width:20px;height:20px;border-radius:50%;text-align:center;line-height:20px;
            font:700 13px ui-sans-serif,system-ui,sans-serif;color:#0d1117}
.note{background:rgba(76,194,255,.08);border-color:rgba(76,194,255,.28);
      border-left-color:var(--acc)}
.note::before{content:"i";background:var(--acc)}
.warn{background:rgba(243,156,18,.10);border-color:rgba(243,156,18,.35);
      border-left-color:var(--warn)}
.warn::before{content:"!";background:var(--warn)}
.warn::before{content:"!";background:var(--warn)}

/* 右側「本頁內容」 */
.toc{position:sticky;top:var(--top-h);align-self:start;max-height:calc(100vh - var(--top-h));
     overflow-y:auto;padding:2.4rem .6rem 2rem 0}
.toc-t{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);
       margin:0 0 .5rem;padding-left:.7rem;opacity:.8}
.toc a{display:block;padding:.24rem .7rem;color:var(--mut);text-decoration:none;font-size:.82rem;
       line-height:1.45;border-left:2px solid var(--bd)}
.toc a:hover{color:var(--fg)}
.toc a.on{color:var(--acc);border-left-color:var(--acc)}
.toc a.lv3{padding-left:1.4rem;font-size:.79rem}
.toc:empty,.toc div:empty{display:none}

/* 首頁 hero */
.hero{display:flex;gap:1.3rem;align-items:flex-start;background:var(--card);
      border:1px solid var(--bd);border-radius:14px;padding:1.5rem 1.6rem;margin:0 0 2.4rem;
      background-image:radial-gradient(120% 140% at 0% 0%,rgba(76,194,255,.10),transparent 55%)}
.hero img{border-radius:12px;flex-shrink:0}
/* 內文插圖。用專屬 class 而非 article img —— hero 的圖示也在 article 內，
   套上去會被加上邊框並被拉成 block。 */
img.shot{max-width:100%;height:auto;display:block;border:1px solid var(--bd);
         border-radius:10px;margin:1.15rem 0}
[data-lang="zh"] img.en,[data-lang="en"] img.zh{display:none}
.hero-title{font-size:1.6rem;margin:0 0 .35rem;border:0;padding:0;letter-spacing:-.01em}
.hero p{color:var(--mut);margin:0 0 1rem;font-size:.94rem}
.hero-act{display:flex;gap:.55rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.45rem 1rem;border-radius:8px;border:1px solid var(--bd);
     text-decoration:none;color:var(--fg);font-size:.88rem;background:var(--bg)}
.btn:hover{border-color:var(--acc);color:var(--acc)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#08121a;font-weight:500}
.btn.primary:hover{filter:brightness(1.1);color:#08121a}

/* 載入：頂部進度條 + 內容淡入。多頁式導覽在慢速連線下會有一段空白，
   進度條讓使用者知道點擊已被接受。

   隱藏狀態只由 JS 加上、且有計時器保底移除。HTML 與 CSS 預設一律可見，
   所以 JS 沒載入、rAF 沒回呼、transition 不執行——任何一種情況都只是少了效果，
   不會讓內容變成隱形。把「看得見」建立在某個效果一定會執行上，是不能接受的。 */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--acc);z-index:60;opacity:0}
.progress.on{animation:load 12s cubic-bezier(.12,.7,.2,1) forwards}
@keyframes load{0%{width:0;opacity:1}60%{width:72%}100%{width:94%;opacity:1}}
main{transition:opacity .3s ease,transform .3s ease}
main.enter{opacity:0;transform:translateY(8px)}

/* 上下頁 */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:3.2rem 0 0;max-width:780px}
.pager a{display:block;padding:.85rem 1rem;border:1px solid var(--bd);border-radius:10px;
         text-decoration:none;background:var(--card)}
.pager a:hover{border-color:var(--acc)}
.pager small{display:flex;align-items:center;gap:.3rem;color:var(--mut);
             font-size:.76rem;line-height:1.5;margin-bottom:.15rem}
.pager i{font-style:normal;font-size:.9rem;line-height:1}
.pager a:hover small,.pager a:hover i{color:var(--acc)}
.pager b{display:block;color:var(--fg);font-weight:500;font-size:.94rem;line-height:1.5;
         overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pager .next{text-align:right}
.pager .next small{justify-content:flex-end}
footer{border-top:1px solid var(--bd);color:var(--mut);font-size:.83rem;
       margin:3rem 0 0;padding:1.4rem 0 3rem;max-width:780px}
footer .copy{margin-top:.35rem;font-size:.79rem;opacity:.75}

.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:44}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;
                                       scroll-behavior:auto!important}
  main.enter{opacity:1;transform:none}}
.scrim.on{display:block}

/* 空間不足時先收掉右欄，內文永遠優先 */
@media(max-width:1180px){
  .layout{grid-template-columns:250px minmax(0,1fr)}
  .toc{display:none}
}
@media(max-width:900px){
  .menu{display:block}
  .layout{grid-template-columns:1fr}
  /* 抽屜整片蓋過頂欄（z-index 高於它），就不必跟浮動的頂欄高度對齊 ——
     靠 JS 設定的變數定位，遇到不重排自訂屬性的瀏覽器會錯位。 */
  aside{position:fixed;top:0;left:0;bottom:0;width:270px;height:100vh;z-index:45;
        background:var(--bg);border-right:1px solid var(--bd);
        transform:translateX(-100%);transition:transform .18s ease;padding:1rem .8rem 2rem}
  /* 頂欄在窄螢幕換行：搜尋框獨佔一列，否則會被壓到 55px 無法使用 */
  .top-in{flex-wrap:wrap;padding:.45rem .8rem}
  .search{order:3;flex:1 1 150px;width:auto;margin:.45rem .35rem .15rem 0}
  .links{order:4;margin:.45rem 0 .15rem}
  .langs{order:5}
  .sep{display:none}
  .brand .v{display:none}
  aside.open{transform:none}
  main{padding:1.6rem 1.1rem 0}
  .langs button{padding:.25rem .5rem}
  .pager{grid-template-columns:1fr}
}
/* 手機：語言鈕併回第一列，第二列留給搜尋框與三個連結 */
@media(max-width:700px){
  .search{flex:1 1 110px}
  .langs{order:2;margin-left:auto}
}