/* =============================== 基礎設定 & 變數================================ */:root{--bg: #000000; --text: #ffffff; --muted: #cccccc; --link: rgb(145, 181, 253); --sidebar-bg: #333; --menu: #2b2e3e; --shadow: rgba(0, 0, 0, 0.1); --code-bg: #354863; --code-bg-dark: #2d2d2d; --radius: 10px; --gap: 20px; --content-width: 60%; --sidebar-width: 20%;}*,*::before,*::after{box-sizing: border-box;}html{scroll-behavior: smooth;}body{background-color: var(--bg); color: var(--text); font-family: "Chiron Hei HK", sans-serif; font-optical-sizing: auto; font-style: normal; line-height: 1.2em; display: flex; flex-wrap: nowrap; padding-left: 50px; padding-right: 50px; margin: 0; text-autospace: normal; line-height: 1.2em;}h1,h2,h3,h4,h5,h6{font-family: "Chiron Hei HK", sans-serif;}h1{font-weight: 800;}h2{font-weight: 600; margin-block-start: 3em; border-bottom: 1px solid var(--text); padding-bottom: 10px;}h3{font-weight: 400;}/* Google Material Symbols */.material-symbols-outlined{font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' -25, 'opsz' 24;}/* =============================== 排版 & 連結================================ */a{color: var(--link); text-decoration: none;}a:hover{text-decoration: underline;}p{font-weight: 300; margin-left: 2em; line-height: 25px; text-autospace: normal;}iframe{margin-left: 2em;}hr{margin: 30px 0;}table{border-collapse: collapse; border-left: 1px solid rgb(255, 255, 255); padding: 2px; border: 1px solid rgb(255, 255, 255); margin-left: 2em;}th{background-color: rgba(76, 76, 76, 0.7); padding: 15px; border: 1px solid rgb(255, 255, 255);}td{text-align: center; padding: 15px; border: 1px solid rgb(255, 255, 255);}blockquote{background-color: rgb(48, 48, 48); padding: 10px; border-radius: 5px; border-left: 10px solid rgb(216, 216, 216); margin-inline-start: 2em; margin-inline-end: 0px;}blockquote>p{margin-left: 10px; margin-block-start: 0em; margin-block-end: 0em; font-family: 'GenRyuMin2TW-M', serif;}strong{font-weight: 600;}mark{background-color: #a6460b; /* Light blue background */ color: #f5fbff; /* Dark gray text color */}/* =============================== 版面結構================================ */main{margin: 60px 0px;}.doc-switchers{display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 10px 0 20px;}.sidebar_box{width: var(--sidebar-width); padding: var(--gap); position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; background-color: var(--sidebar-bg); box-shadow: 2px 0 5px var(--shadow);}#sidebar{width: 100%; color: aliceblue; position: sticky; top: 0; overflow-y: auto; font-weight: 500;}#sidebar a{display: block; margin-bottom: 10px; color: var(--text); font-weight: normal;}#sidebar a.indent-h3{margin-left: 20px; font-size: 90%; opacity: 0.85;}#content{width: var(--content-width); padding-left: 50px; margin-left: calc(var(--sidebar-width)); overflow-x: clip;}.tips-tip{background-color: rgb(9, 58, 9); padding: 10px; border-radius: 5px; border-left: 10px solid rgb(48, 145, 48);}.tips-warning{background-color: #75351a; padding: 10px; border-radius: 5px; border-left: 10px solid #f08644;}.tips-info{background-color: rgb(26, 39, 71); padding: 10px; border-radius: 5px; border-left: 10px solid rgb(51, 63, 175);}/* =============================== 圖片與展示================================ */.imgBox,.img-container{display: flex; justify-content: center; align-items: center;}.imgBox{padding: 10px 20px; width: 100%;}.img-container{width: 80%; margin: 0 auto; text-align: center;}img{width: 100%; border-radius: var(--radius);}.showImage{width: 100%; cursor: pointer; transition: all 0.3s;}.showImage:hover{opacity: 0.7;}.showImageHint{font-weight: 200; font-size: 12px;}/* 圖片燈箱 */dialog{position: fixed; inset: 0; border: none; padding: 0; width: auto; height: auto; display: flex; justify-content: center; align-items: center; background-color: rgb(141 141 141 / 49%); backdrop-filter: blur(5px); z-index: 1000;}dialog img{max-width: 90%; max-height: 90%; object-fit: contain;}.close-btn{position: absolute; top: 20px; right: 30px; font-size: 40px; color: white; cursor: pointer; z-index: 1001;}/* =============================== 程式碼區塊/摺疊================================ */.codeDisplay{background-color: var(--code-bg); padding: 1em; margin: 0.5em 0; border-radius: 0.3em; overflow: auto; line-height: 20px;}.code-container{margin-left: 20px;}details summary{cursor: pointer; margin-bottom: 8px;}pre{margin-left: 2em;}details pre{background: var(--code-bg-dark); color: #f8f8f2; padding: 12px; border-radius: 6px; overflow-x: auto;}/* =============================== 目錄（頁內 TOC）================================ */.page-toc{width: fit-content; display: flex; flex-wrap: wrap; padding: 5px 20px; background-color: var(--menu); border-radius: 5px;}.page-toc>ol,ul,li{margin: 1em 2em; margin: 10px;}.toc-h3{margin: 0px;}.page-toc>a{width: 100%; line-height: 2em; text-decoration: underline; color: rgb(142, 202, 255);}/* =============================== 分頁================================ */.pagination{text-align: center; margin-top: 50px;}.pagination a,.pagination span.current{margin: 0 10px; padding: 2px 8px; border: 1px solid var(--text); color: var(--text); border-radius: 4px;}.pagination a:hover{background-color: var(--text); color: #000;}.pagination span.current{background-color: #000;}/* =============================== 其他================================ */.jx-knightlab{display: none; z-index: 0;}/* 浮動漢堡按鈕（行動版顯示） */.hamburger{display: none; position: fixed; right: 20px; bottom: 20px; width: 50px; height: 50px; background-color: var(--sidebar-bg); color: var(--text); border-radius: 50%; justify-content: center; align-items: center; z-index: 1000; cursor: pointer; border: none;}.hamburger div{width: 30px; height: 3px; background-color: var(--text); margin: 5px 0;}.current{}.capsule{border: 1px solid var(--text); border-radius: 200px; padding: 2px 10px; color: white; background-color: #000; font-size: 0.8em; font-weight: 400;}/* =============================== RWD================================ */@media (max-width: 600px){body{padding: 20px;} .sidebar_box{display: none;} .hamburger{display: flex;} .sidebar_box.active{display: block; width: 60%; position: fixed; left: 0; top: 0; height: 100vh; z-index: 999; background-color: var(--sidebar-bg); padding: var(--gap); box-shadow: 2px 0 5px var(--shadow);} #content{width: 100%; margin-left: 0; padding-left: 0;} .img-container{width: 90%;} li{font-size: 12px; line-height: 25px;} .li_margin{margin-top: 30px;} p, iframe, table, pre, .code-container{margin-left: 0em;} ul{margin-left: 1em;}}