body,
html {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    font-size: 15px;
}

body {
    display: flex;
    flex-direction: column;
    background: var(--ts-page-background-default);
}

body:has(dialog#modal[open], dialog#drawer[open]) {
    overflow-y: hidden !important;
}

body:has(dialog.ts-modal[open], dialog.ts-app-drawer[open]) {
    overflow: auto !important;
}

/**
 * Space
 */

.ts-space.is-small {
    height: var(--ts-space-gap-small);
}
.ts-space.is-large {
    height: var(--ts-space-gap-large);
}
.ts-space.is-big {
    height: var(--ts-space-gap-big);
}
.ts-space.is-huge {
    height: var(--ts-space-gap-huge);
}
.ts-space::before {
    content: " ";
}
.ts-space {
    height: var(--ts-space-gap);
}

.色票預覽 {
    width: 100%;
    height: 30px;
}

.界限容器 {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 2rem;
}

.隱藏的 {
    display: none;
}

/**
 * 穹頂
 */

.穹頂 {
    background: var(--ts-gray-100);
    border-bottom: 1px solid var(--ts-gray-200);
    padding: 2rem 0 4rem;
}

.穹頂-導航列 {
    display: flex;
}

.穹頂-導航列 .ts-dropdown .divider:last-child {
    display: none;
}

.穹頂-導航列_手機的 {
    display: none;
}

.穹頂-導航列-左側 {
}

.穹頂-導航列-右側 {
    margin-left: auto;
}

.穹頂-導航列-左側,
.穹頂-導航列-右側 {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;
}

.穹頂-導航列-項目 {
    color: var(--ts-gray-900);
    text-decoration: none;
}

.穹頂-導航列-項目_選單按鈕 {
    padding: 0 1rem;
    margin-right: -1rem;
}

.穹頂-導航列-項目_語系的 {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.穹頂-導航列-項目 .ts-flag {
    margin-bottom: 3px;
    border-radius: 3px;
    margin-right: 0.25rem;
    pointer-events: none;
}

.穹頂-導航列-項目 .ts-icon.is-github-icon,
.穹頂-導航列-項目 .ts-icon.is-code-branch-icon {
    font-size: 1.3rem;
    margin-right: 0.25rem;
    line-height: 1;
}

.穹頂-導航列-項目_啟用 {
    color: var(--ts-gray-900);
}

.穹頂-導航列-項目_主要 {
    color: var(--ts-gray-900);
    font-weight: 500;
}

.穹頂-標題 {
    margin-top: 3rem;
}

.穹頂-標題-主要 {
    line-height: initial;
    font-size: 2rem;
    font-weight: 500;
    color: var(--ts-gray-900);
}

.穹頂-標題-說明 {
    margin-top: 1rem;
    color: var(--ts-gray-700);
    font-size: 1.15rem;
}

/**
 * 主體
 */

.主體 {
    flex: 1;
}

.主體-格局 {
    display: flex;
    margin: 4rem 0 6rem;
}

.主體-格局_容器範例的 {
}

@media screen and (min-width: 769px) {
    .主體-格局_容器範例的 .主體-格局-導覽 {
        display: none;
    }
}

.主體-格局_容器範例的 .主體-格局-內容 {
    max-width: 100%;
    padding: 0;
}

.主體-格局_容器範例的 .主體-格局-索引 {
    display: none;
}

.主體-格局_容器範例的 .主體-格局-內容-單個範例-文字-標題_段落::after {
    display: none;
}

.主體-格局-導覽 {
    display: flex;
    min-width: 210px;
    max-width: 210px;
    flex-direction: column;
    gap: 1rem;
    border-right: 2px solid var(--ts-gray-300);
    padding-right: 1rem;
    box-sizing: border-box;
}

.主體-格局-導覽-關閉按鈕 {
    color: var(--ts-gray-900);
    font-size: 1.5rem;
    line-height: 1;
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: none;
}

.主體-格局-導覽-標題 {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--ts-gray-700);
    margin-top: 2rem;
    border-bottom: 1px solid var(--ts-gray-300);
    padding-bottom: 10px;
    margin-right: 15px;
}

.主體-格局-導覽-標題:first-child {
    margin-top: 0;
}

.主體-格局-導覽-空白隔間 {
}

.主體-格局-導覽-項目 {
    text-decoration: none;
    color: var(--ts-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.主體-格局-導覽-項目_啟用的 {
    background: var(--ts-gray-900);
    color: var(--ts-gray-50);
    padding: 0.45rem 1rem;
    border-radius: 0.4rem;
    margin-right: 1rem;
    margin-left: -1rem;
}

.主體-格局-導覽-項目_啟用的 .主體-格局-導覽-項目-英文 {
    color: var(--ts-gray-200);
}

.主體-格局-導覽-項目-模組 {
    display: inline-flex;
    background: var(--ts-gray-300);
    color: var(--ts-gray-900);
    line-height: 1;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border-radius: 0.2rem;
    margin-left: 0.65rem;
    padding: 0.15rem 0.25rem;
    font-size: var(--ts-font-size-12px);
}

.主體-格局-導覽-項目-英文 {
    color: var(--ts-gray-700);
    opacity: 0.8;
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

.主體-格局-導覽-空白隔間 {
}

.主體-格局-內容 {
    flex: 1;
    padding: 0 3rem;
    max-width: calc(100% - (210px + 210px));
}

.主體-格局-內容 .ts-modal:not(#modal) {
    position: relative;
}

.主體-格局-內容 .ts-app-drawer:not(#drawer) {
    position: relative;
    border: 1px solid var(--ts-gray-300);
    min-height: 120px;
}

.主體-格局-內容 .ts-app-drawer.is-bottom {
    min-height: 230px !important;
}

.主體-格局-內容 .ts-app-layout.is-fullscreen {
    width: 100%;
    height: 200px;
}

.主體-格局-內容_網格範例的 *:not(.no-grid-indicator) + .ts-grid,
.主體-格局-內容_網格範例的 .ts-grid:first-child {
    width: 100%;
    background: var(--ts-gray-50);
    position: relative;
    border: 2px solid var(--ts-gray-300);
}

.主體-格局-內容_網格範例的 *:not(.no-grid-indicator) + .ts-grid .ts-grid,
.主體-格局-內容_網格範例的 .ts-grid:first-child .ts-grid {
    margin: -2px;
    border: 4px solid var(--ts-gray-300);
    border-left-width: 2px;
    border-right-width: 2px;
}

.主體-格局-內容_網格範例的 *:not(.no-grid-indicator) + .ts-grid .column,
.主體-格局-內容_網格範例的 .ts-grid:first-child .column {
    min-height: 5rem;
    background: var(--ts-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--ts-gray-400);
    font-weight: bold;
    border: 1px solid var(--ts-gray-300);
    margin: -1px 0px;
}

.主體-格局-內容_網格範例的 .ts-grid:is(.is-top-aligned, .is-middle-aligned, .is-bottom-aligned) .column:not(:nth-child(2)) {
    min-height: 8rem;
}
.主體-格局-內容_網格範例的 .ts-grid:is(.is-top-aligned, .is-middle-aligned, .is-bottom-aligned) .column:nth-child(2) {
    min-height: 3rem;
}

.主體-格局-內容_網格範例的 .ts-grid.is-divided .column {
    border: 0;
    background-color: transparent;
}

.主體-格局-內容_網格範例的 .ts-grid.is-divided .column:nth-child(1)::before {
    content: "A";
}
.主體-格局-內容_網格範例的 .ts-grid.is-divided .column:nth-child(2)::before {
    content: "B";
}
.主體-格局-內容_網格範例的 .ts-grid.is-divided .column:nth-child(3)::before {
    content: "C";
}

/*.主體-格局-內容_網格範例的 .ts-grid[class*="-columns"] .column::before {
    border-radius: 100rem;
    background: var(--ts-gray-300);
    width: 33px;
    height: 33px;
    text-align: center;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ts-gray-50);
}

.主體-格局-內容_網格範例的 .ts-grid[class*="-columns"] .column:nth-child(1)::before {
    content: "1";
}
.主體-格局-內容_網格範例的 .ts-grid[class*="-columns"] .column:nth-child(2)::before {
    content: "2";
}
.主體-格局-內容_網格範例的 .ts-grid[class*="-columns"] .column:nth-child(3)::before {
    content: "3";
}
.主體-格局-內容_網格範例的 .ts-grid[class*="-columns"] .column:nth-child(4)::before {
    content: "4";
}
.主體-格局-內容_網格範例的 .ts-grid[class*="-columns"] .column:nth-child(5)::before {
    content: "5";
}
.主體-格局-內容_網格範例的 .ts-grid[class*="-columns"] .column:nth-child(6)::before {
    content: "6";
}
.主體-格局-內容_網格範例的 .ts-grid[class*="-columns"] .column:nth-child(7)::before {
    content: "7";
}
.主體-格局-內容_網格範例的 .ts-grid[class*="-columns"] .column:nth-child(8)::before {
    content: "8";
}
.主體-格局-內容_網格範例的 .ts-grid[class*="-columns"] .column:nth-child(9)::before {
    content: "9";
}
.主體-格局-內容_網格範例的 .ts-grid[class*="-columns"] .column:nth-child(10)::before {
    content: "10";
}*/

.主體-格局-內容_網格範例的 .ts-grid .column.is-1-wide::before {
    content: "1";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-2-wide::before {
    content: "2";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-3-wide::before {
    content: "3";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-4-wide::before {
    content: "4";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-5-wide::before {
    content: "5";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-6-wide::before {
    content: "6";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-7-wide::before {
    content: "7";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-8-wide::before {
    content: "8";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-9-wide::before {
    content: "9";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-10-wide::before {
    content: "10";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-11-wide::before {
    content: "11";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-12-wide::before {
    content: "12";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-13-wide::before {
    content: "13";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-14-wide::before {
    content: "14";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-15-wide::before {
    content: "15";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-16-wide::before {
    content: "16";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-4-wide + .column.is-fluid::before {
    content: "Fluid";
}
.主體-格局-內容_網格範例的 .ts-grid.is-top-aligned .column:nth-child(2)::before {
    content: "Top";
}
.主體-格局-內容_網格範例的 .ts-grid.is-middle-aligned .column:nth-child(2)::before {
    content: "Middle";
}
.主體-格局-內容_網格範例的 .ts-grid.is-bottom-aligned .column:nth-child(2)::before {
    content: "Bottom";
}
/*.主體-格局-內容_網格範例的 .ts-grid .column.is-first::before {
    content: "First";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-last::before {
    content: "Last";
}

.主體-格局-內容_網格範例的 .ts-grid .column[class*="is-order-"]::before,
.主體-格局-內容_網格範例的 .ts-grid.is-reversed .column::before {
    border-radius: 100rem;
    background: var(--ts-gray-300);
    width: 33px;
    height: 33px;
    text-align: center;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ts-gray-50);
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-order-1::before,
.主體-格局-內容_網格範例的 .ts-grid.is-reversed .column:nth-child(1):after {
    content: "1";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-order-2::before,
.主體-格局-內容_網格範例的 .ts-grid.is-reversed .column:nth-child(2):after {
    content: "2";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-order-3::before,
.主體-格局-內容_網格範例的 .ts-grid.is-reversed .column:nth-child(3):after {
    content: "3";
}
.主體-格局-內容_網格範例的 .ts-grid .column.is-order-4::before {
    content: "4";
}*/

.主體-格局-內容-文字 {
    color: var(--ts-gray-900);
    line-height: 2;
}

.主體-格局-內容-文字 a {
    color: var(--ts-link-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.主體-格局-內容-工具列 {
    display: flex;
    justify-content: flex-end;
    color: var(--ts-gray-900);
    align-items: flex-end;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}

.主體-格局-內容-工具列-項目 {
    margin-left: 2rem;
    text-align: right;
}

.主體-格局-內容-工具列-項目-標籤 {
    font-size: 14px;
    color: var(--ts-gray-700);
    margin-bottom: 0.45rem;
    padding-right: 18px;
}

.主體-格局-內容-工具列-項目-下拉式選單 {
    position: relative;
}

.主體-格局-內容-工具列-項目-下拉式選單-文字 {
    /*font-weight: 500;*/
    font-size: 15px;
    cursor: pointer;
    user-select: none;
}

.主體-格局-內容-工具列-項目-下拉式選單-文字-圖示 {
    font-size: 13px;
    color: var(--ts-gray-75);
    margin-left: 0.3rem;
}

.主體-格局-內容-工具列-項目-下拉式選單-群組.主體-格局-內容-工具列-項目-下拉式選單-群組_開啟的 {
    display: block;
}

.主體-格局-內容-工具列-項目-下拉式選單-群組 {
    display: none;
    position: absolute;
    border: 1px solid var(--ts-gray-300);
    padding: 0.25rem 0;
    border-radius: 0.35rem;
    font-size: 14px;
    margin-top: 0.5rem;
    box-shadow: 0px 0px 8px rgb(0 0 0 / 8%);
    background: var(--ts-gray-50);
    text-align: left;
    width: max-content;
    right: 0;
    z-index: 1001;
}

.主體-格局-內容-工具列-項目-下拉式選單-群組-項目 {
    padding: 0.35rem 0.8rem;
    /*border-bottom: 1px solid #e9e9e9;*/
    min-width: 4rem;
}

.主體-格局-內容-工具列-項目-下拉式選單-群組-項目:hover {
    cursor: pointer;
    background: var(--ts-gray-100);
}

.主體-格局-內容-工具列-項目-下拉式選單-群組-項目.主體-格局-內容-工具列-項目-下拉式選單-群組-項目_啟用的 {
    background: var(--ts-gray-900);
    color: var(--ts-gray-50);
}

.主體-格局-內容-工具列-項目-下拉式選單-群組-項目:last-child {
    border-bottom: 0;
}

.主體-格局-內容-工具列-項目_標題 {
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 500;
    color: var(--ts-gray-900);
    margin-right: auto;
    margin-left: initial;
    text-align: left;
}

.主體-格局-內容-工具列-項目-連結標籤 {
    display: flex;
    gap: 0.8rem;
    margin-top: 13px;
}

.主體-格局-內容-工具列-項目-連結標籤-項目 {
    border: 1px solid var(--ts-gray-300);
    border-radius: 4px;
    font-size: 14px;
    padding: 0.4rem 0.7rem;
    display: flex;
    white-space: nowrap;
    gap: 0.5rem;
    font-weight: normal;
    line-height: 1;
    color: var(--ts-gray-900);
}

.主體-格局-內容-工具列-項目-連結標籤-項目-文字 {
}

.主體-格局-內容-工具列-項目-連結標籤-項目 .ts-icon {
    font-size: 13px;
    margin-top: 1px;
}

.主體-格局-內容-主要範例 {
    border: 1px solid var(--ts-gray-300);
    border-radius: 0.4rem;
    overflow: hidden;
}

.主體-格局-內容-主要範例-實際效果 {
    padding: 3.5rem;

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 1px solid var(--ts-gray-300);
}

.主體-格局-內容-主要範例-實際效果:not(.主體-格局-內容-主要範例-實際效果_置中的) .主體-格局-內容-主要範例-實際效果-置中容器 {
    width: 100%;
}

.主體-格局-內容-主要範例-實際效果-置中容器 > .ts-email {
    padding: 0;
    margin: -45px 0;
}

.主體-格局-內容-主要範例-程式碼 {
    padding: 1.5rem;
    background: var(--ts-gray-75);
}

.主體-格局-內容-主要範例-程式碼 pre {
    margin: 0;
    /*line-height: 1.5;*/
}

.主體-格局-內容-標題 {
}

.主體-格局-內容-標題_章節 {
    font-size: 1.6rem;
    line-height: 1;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--ts-gray-300);
    margin-bottom: 2rem;
    font-weight: 500;
    color: var(--ts-gray-900);
}

.主體-格局-內容-標題_範例的 {
    border-bottom: 0;
    margin-bottom: 2rem;
    margin-top: 2rem !important;
}

.主體-格局-內容-標題_章節:not(:first-child) {
    margin-top: 8rem;
}

.主體-格局-內容-單個範例-錨點 {
}

.主體-格局-內容-單個範例-文字 {
    color: var(--ts-gray-900);
    line-height: 2;
}

.主體-格局-內容-單個範例-文字 a {
    color: var(--ts-link-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.主體-格局-內容-變數屬性 {
    margin-top: 1.5rem;
}

.主體-格局-內容-變數屬性 ul {
    margin: 0;
    padding: 0;
    margin-inline-start: 1.4rem;
}

.主體-格局-內容-變數屬性 {
    line-height: 2;
}

.主體-格局-內容-額外連結 {
    display: flex;
    gap: 1rem;
    margin-top: 8rem;
}

.主體-格局-內容-額外連結-項目 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid var(--ts-gray-300);
    padding: 0.8rem 0.8rem;
    border-radius: 6px;
    width: 40%;
}

.主體-格局-內容-額外連結-項目-主體 {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
}

.主體-格局-內容-額外連結-項目-主體-圖示容器 {
}

.主體-格局-內容-額外連結-項目-主體-圖示容器 .ts-icon {
    background: var(--ts-gray-200);
    height: 40px;
    width: 40px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ts-gray-900);
    border-radius: 100em;
}

.主體-格局-內容-額外連結-項目-主體-文字容器 {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.主體-格局-內容-額外連結-項目-主體-文字容器-標題 {
    font-weight: bold;
    font-size: 14px;
    color: var(--ts-gray-900);
    line-height: 1.2;
}

.主體-格局-內容-額外連結-項目-主體-文字容器-說明 {
    font-size: 14px;
    color: var(--ts-gray-600);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}

.主體-格局-內容-額外連結-項目-連結文字 {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0.35rem 0;
    margin-top: 0.2rem;
    line-height: 1;
    border-top: 1px solid var(--ts-gray-300);
}

.主體-格局-內容-額外連結-項目-連結文字-文字 {
    flex: 1;
    color: var(--ts-gray-600);
}

.主體-格局-內容-額外連結-項目-連結文字-圖示容器 {
    color: var(--ts-gray-600);
    font-size: var(--ts-font-size-17px);
}

.主體-格局-內容-文字 p code,
.主體-格局-內容-單個範例-文字 p code,
.主體-格局-內容-單個範例-文字 .ts-list code,
.主體-格局-內容-單個範例-文字 .ts-table code,
.主體-格局-內容-文字 .ts-table code,
.主體-格局-內容-變數屬性 .ts-table code {
    padding: 0 0.4rem;
    display: inline-block;
    border-radius: 0.3rem;
    line-height: 1.4;
    background-color: var(--ts-gray-200);
    color: var(--ts-gray-900);
    font-family: "Ubuntu Mono", "Noto Sans TC", "Noto Sans CJK TC", "SF Pro TC", "SF Pro Text", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", "Microsoft JhengHei",
        wf_SegoeUI, "Segoe UI", Segoe, "Segoe WP", Tahoma, Verdana, Ubuntu, "Bitstream Vera Sans", "DejaVu Sans", 微軟正黑體, "LiHei Pro", "WenQuanYi Micro Hei",
        "Droid Sans Fallback", "AR PL UMing TW", Roboto, "Hiragino Maru Gothic ProN", メイリオ, "ヒラギノ丸ゴ ProN W4", Meiryo, "Droid Sans", sans-serif;
}

.主體-格局-內容-單個範例-文字 p a code,
.主體-格局-內容-文字 p a code {
    text-decoration: underline;
    color: var(--ts-link-700);
}

.主體-格局-內容-單個範例-文字 pre {
    padding: 1.5rem;
    background: var(--ts-gray-75);
    border: 1px solid var(--ts-gray-300);
    border-radius: 0.4rem;
}

.主體-格局-內容-單個範例-文字 pre code {
    color: var(--ts-gray-600);
    font-size: 14px;
    white-space: break-spaces;
    overflow-x: scroll;
    font-family: "Ubuntu Mono", "Noto Sans TC", "Noto Sans CJK TC", "SF Pro TC", "SF Pro Text", "PingFang TC", "Helvetica Neue", Helvetica, Arial, "Microsoft JhengHei", wf_SegoeUI,
        "Segoe UI", Segoe, "Segoe WP", Tahoma, Verdana, Ubuntu, "Bitstream Vera Sans", "DejaVu Sans", 微軟正黑體, "LiHei Pro", "WenQuanYi Micro Hei", "Droid Sans Fallback",
        "AR PL UMing TW", Roboto, "Hiragino Maru Gothic ProN", メイリオ, "ヒラギノ丸ゴ ProN W4", Meiryo, "Droid Sans", sans-serif;
    word-spacing: 2px;
    letter-spacing: 0em;
    background: none;
}

.主體-格局-內容-單個範例-文字-標題 {
    position: relative;
}

.主體-格局-內容-標題 + .主體-格局-內容-單個範例 .主體-格局-內容-單個範例-文字-標題_段落 {
    margin-top: 4rem;
}

.主體-格局-內容-單個範例-文字-標題-連結 {
    color: var(--ts-gray-900);
    text-decoration: none;
}

.主體-格局-內容-單個範例-文字-標題-連結:hover {
    text-decoration: underline;
}

.主體-格局-內容-單個範例-文字-標題_段落 {
    margin-top: 8rem;
    color: var(--ts-gray-900);
    font-size: 1.26rem;
    margin-bottom: 1rem;
    font-weight: bold;
    display: flex;
}

.主體-格局-內容-單個範例-文字-標題_被提及的 {
    color: var(--ts-primary-600);
    font-weight: bold;
}

.主體-格局-內容-單個範例-文字-標題_段落::after {
    content: " ";
    height: 40px;
    background: var(--ts-gray-600);
    border: 6px solid var(--ts-gray-50);
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    position: absolute;
    width: 2px;
    left: -47px;
    top: -5px;
}

.主體-格局-內容-單個範例-文字-標題_被提及的::after {
    background: var(--ts-primary-600);
}

.主體-格局-內容-單個範例-文字-標題-切換原始碼 {
    margin-left: auto;
    appearance: none;
    border: 0;
    border-radius: 0.4rem;
    /* background: var(--ts-gray-900); */
    /* color: var(--ts-gray-50); */
    color: var(--ts-gray-700);
    background: transparent;
    border: 2px solid var(--ts-gray-300);
    padding: 0.4rem 0.9rem;
    font-weight: 500;
    font-family: "Noto Sans TC", "Noto Sans CJK TC";
    cursor: pointer;
    font-size: var(--ts-font-size-14px);
}

.主體-格局-內容-單個範例-文字-標題-切換原始碼:hover {
    /*border-color: var(--ts-gray-400);*/
}

.主體-格局-內容-單個範例-文字-標題-切換原始碼 .ts-icon {
    margin-right: 0.5rem;
}

.主體-格局-內容-單個範例_檢視原始碼中 .主體-格局-內容-單個範例-文字-標題-切換原始碼 {
    background: var(--ts-gray-900);
    color: var(--ts-gray-50);
    border-color: var(--ts-gray-900);
}

.主體-格局-內容-單個範例-範例 {
    margin-top: 2rem;
}

.主體-格局-內容-單個範例_檢視原始碼中 .主體-格局-內容-單個範例-範例 {
    border: 1px solid var(--ts-gray-300);
    border-radius: 0.4rem;
}

.主體-格局-內容-單個範例-範例-實際效果 {
    position: relative;
}

.主體-格局-內容-單個範例-範例-實際效果
    :not([class*="ts-"]):is(
        .has-padded,
        .has-horizontally-padded,
        .has-vertically-padded,
        .has-padded-large,
        .has-horizontally-very-padded,
        .has-vertically-very-padded,
        .has-spaced,
        .has-horizontally-spaced,
        .has-vertically-spaced,
        .has-spaced-large,
        .has-horizontally-very-spaced,
        .has-vertically-very-spaced
    ) {
    background-image: linear-gradient(to bottom, var(--ts-gray-50) 0%, var(--ts-gray-50) 100%), linear-gradient(to bottom, var(--ts-gray-300) 0%, var(--ts-gray-300) 100%);
    background-clip: content-box, padding-box;
    border: 1px solid var(--ts-gray-300);
}

.主體-格局-內容-主要範例-實際效果 .ts-app-layout,
.主體-格局-內容-單個範例-範例-實際效果 .ts-app-layout {
    border: 1px solid var(--ts-gray-300);
}

.主體-格局-內容-單個範例-範例-實際效果 .ts-modal.is-fullscreen,
.主體-格局-內容-單個範例-範例-實際效果 .ts-app-drawer.is-fullscreen {
    padding: 6px;
}

.主體-格局-內容-單個範例_檢視原始碼中 .主體-格局-內容-單個範例-範例-實際效果 {
    padding: 1.5rem;
    border-bottom: 1px solid var(--ts-gray-300);
}

.主體-格局-內容-單個範例-範例-程式碼 {
    padding: 1.5rem;
    background: var(--ts-gray-75);
    display: none;
}

.主體-格局-內容-單個範例_檢視原始碼中 .主體-格局-內容-單個範例-範例-程式碼 {
    display: block;
}

.主體-格局-內容-單個範例-範例-程式碼 pre {
    margin: 0;
}

.主體-格局-內容-單個範例-附帶程式碼 {
    padding: 1.5rem;
    background: var(--ts-gray-75);
    border-radius: 0.4rem;
    margin-top: 1rem;
}

.主體-格局-內容-單個範例-附帶程式碼 pre {
    margin: 0;
}

.主體-格局-內容-相關元件 {
    padding: 2rem 2rem;
    margin-top: 8rem;
    background: var(--ts-gray-100);
    border-radius: 0.8rem;
    color: var(--ts-gray-900);
}

.主體-格局-內容-額外連結 + .主體-格局-內容-相關元件 {
    margin-top: 1.5rem;
}

.主體-格局-內容-相關元件-標題 {
    color: var(--ts-gray-900);
    font-weight: 500;
}

.主體-格局-內容-相關元件-清單 {
    margin: 1rem 0 0;
    padding: 0 1.5rem;
}

.主體-格局-內容-相關元件-清單-單個項目 {
    padding: 0.1rem 0;
}

.主體-格局-內容-相關元件-清單-單個項目-連結 {
    color: var(--ts-gray-900);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.主體-格局-內容-規格表格 {
    border-radius: 0.4rem;
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px var(--ts-gray-300);
    width: 100%;
    margin-top: 4rem;
}

.主體-格局-內容-規格表格 thead tr th {
    font-weight: normal;
    padding: 0.5rem 1rem;
    border: 1px solid var(--ts-gray-300);
    text-align: left;
    background: var(--ts-gray-100);
    font-weight: 500;
    color: var(--ts-gray-900);
}

.主體-格局-內容-規格表格 thead tr th:first-child {
    background: transparent;
    color: var(--ts-gray-600);
    font-weight: 500;
    width: 1px;
}

.主體-格局-內容-規格表格 tbody tr td {
    padding: 1rem 1rem;
    border: 1px solid var(--ts-gray-300);
    text-align: left;
    color: var(--ts-gray-900);
    vertical-align: top;
}

.主體-格局-內容-規格表格 tbody tr td:first-child {
    background: var(--ts-gray-100);
    color: var(--ts-gray-900);
    font-weight: 500;
    vertical-align: top;
}

.主體-格局-內容-規格表格-分隔線 {
    border: 0;
    border-top: 1px solid var(--ts-gray-300);
    margin: 1rem 0;
}

.主體-格局-內容-規格表格-參數清單 {
    font-size: 0.9rem;
    color: var(--ts-gray-900);
    margin: 1rem 0 0;
    list-style: none;
    padding: 0;
}

.主體-格局-內容-規格表格-參數清單-項目 {
    padding-left: 1rem;
}

.主體-格局-內容-規格表格-參數清單-項目 + .主體-格局-內容-規格表格-參數清單-項目 {
    margin-top: 0.5rem;
}

.主體-格局-內容-規格表格-參數清單-項目::before {
    content: "•";
    font-family: "Lato";
    color: var(--ts-gray-900);
    margin-left: -1rem;
    margin-right: 0.4rem;
}

.主體-格局-內容-規格表格-參數清單-項目-說明 {
    color: var(--ts-gray-600);
}

.主體-格局-內容-規格表格-型態,
.主體-格局-內容-規格表格-參數清單-項目-型態 {
    margin-left: 0.4rem;
    font-size: 0.8rem;
    position: relative;
    top: -0.2rem;
    color: var(--ts-gray-600);
}

.主體-格局-內容-規格表格-參數清單-項目-型態_必要的 {
    color: red;
    margin-left: 0.2rem;
}

.主體-格局-內容-規格表格-函式碼 {
    font-size: 0.9rem;
    background: var(--ts-gray-100);
    color: var(--ts-gray-600);
    padding: 0.2rem 0.4rem;
    border-radius: 0.4rem;
    font-family: "Fira Code";
}

.主體-格局-內容-規格表格-函式碼-參數 {
    font-size: 0.85rem;
}

.文件內容-主要欄位-元件-圖示組 {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1rem;
}

.文件內容-主要欄位-元件-圖示組-單個圖示 {
    width: calc(100% / 6 - 2rem);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    margin: 0.8rem 1rem;
    color: var(--ts-gray-900);
    box-sizing: border-box;
}

/*.文件內容-主要欄位-元件-圖示組-單個圖示:active,
.文件內容-主要欄位-元件-圖示組-單個圖示:active .文件內容-主要欄位-元件-圖示組-單個圖示-標籤 {
    color: #2cd62c;
}
.文件內容-主要欄位-元件-圖示組-單個圖示:hover {
    cursor: pointer;
}
.文件內容-主要欄位-元件-圖示組-單個圖示:hover .文件內容-主要欄位-元件-圖示組-單個圖示-標籤 {
    color: var(--ts-header-color);
}*/

.文件內容-主要欄位-元件-圖示組-單個圖示-圖示 {
    font-size: 2rem !important;
    margin-right: 0 !important;
}

.文件內容-主要欄位-元件-圖示組-單個圖示-標籤 {
    font-size: 0.9rem;
    text-align: center;
    margin-top: 0.4rem;
    line-height: 1.3;
    color: var(--ts-gray-600);
}

.主體-格局-索引 {
    min-width: 210px;
    max-width: 210px;
}

.主體-格局-索引-標題 {
    font-weight: 500;
    color: var(--ts-gray-700);
    margin-top: 3rem;
}

.主體-格局-索引-標題:first-child {
    margin-top: 0;
}

.主體-格局-索引-清單 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-left: 1px solid var(--ts-gray-300);
    padding-left: 1rem;
    margin-top: 1rem;
    margin-left: 0.5rem;
}

.主體-格局-索引-清單-項目 {
    text-decoration: none;
    color: var(--ts-gray-800);
}

.主體-格局-索引-清單-項目-英文 {
    color: var(--ts-gray-700);
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

.主體-格局-索引-回到頂部 {
    position: sticky;
    top: 30px;
    margin: 0 auto;
    display: block;
    appearance: none;
    border: 0;
    background: transparent;
    border-radius: 0.4rem;
    appearance: none;
    border: 2px solid var(--ts-gray-300);
    color: var(--ts-gray-800);
    border-radius: 0.4rem;
    padding: 0.4rem 1.2rem;
    font-size: 14px;
    font-weight: 500;
    font-family: "Noto Sans TC", "Noto Sans CJK TC";
    outline: none;
    cursor: pointer;
    width: 80%;
    margin-top: 2rem;
}

.主體-格局-索引-回到頂部:hover {
    border-color: var(--ts-gray-400);
}

.主體-格局-索引-回到頂部 .ts-icon {
    margin-right: 0.5rem;
    line-height: 1;
}

/**
 * 頁腳
 */

.頁腳 {
    background: var(--ts-gray-100);
    border-top: 1px solid var(--ts-gray-200);
    padding: 2rem 0px 4rem;
}

.頁腳-格局 {
    display: flex;
    align-items: flex-start;
}

.頁腳-格局-資訊 {
}

.頁腳-導航列 {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 2rem;
}

.頁腳-導航列-項目 {
    color: var(--ts-gray-900);
    text-decoration: none;
}

.頁腳-導航列-項目_回到頂部 .ts-icon {
    margin-right: 0.5rem;
    line-height: 1;
}

.頁腳-格局-資訊-文字 {
    color: var(--ts-gray-900);
    font-size: 0.95rem;
    line-height: 2;
    margin-top: 2rem;
    max-width: 790px;
}

.頁腳-格局-資訊-文字 .ts-flag {
    margin-bottom: 3px;
    border-radius: 3px;
}

.頁腳-格局-資訊-文字 a {
    color: var(--ts-gray-900);
    text-underline-offset: 2px;
}

.頁腳-格局-資訊-翻譯者 {
    display: block;
    margin-top: 2rem;
    font-size: 0.95rem;
    color: var(--ts-gray-900);
    line-height: 2;
    max-width: 50rem;
}

.頁腳-格局-資訊-翻譯者 a {
    color: var(--ts-gray-900); /* 108ee9*/
    text-decoration: underline;
    text-underline-offset: 2px;
}

.頁腳-格局-商標 {
    padding-left: 2rem;
    margin-left: auto;
}

.頁腳-格局-商標-圖片 {
    width: 130px;
}

html.is-dark .頁腳-格局-商標-圖片 {
    filter: invert(1) contrast(0.8);
}

@media (prefers-color-scheme: dark) {
    html:not(.is-light) .頁腳-格局-商標-圖片 {
        filter: invert(1) contrast(0.8);
    }
}

@media screen and (max-width: 960px) {
    .穹頂 {
        padding: 1.5rem 0 2.5rem;
    }

    .穹頂-標題 {
        margin-top: 2rem;
    }

    .穹頂-標題-主要 {
        font-size: 1.6rem;
    }

    .穹頂-標題-說明 {
        margin-top: 0.5rem;
        font-size: 1rem;
    }

    .穹頂-導航列 {
        display: none;
    }

    .穹頂-導航列_手機的 {
        display: flex;
    }

    .穹頂-導航列_手機的 .穹頂-導航列-右側 {
        gap: 0.5rem;
    }

    .界限容器 {
        padding: 0 1.5rem;
    }

    .主體-格局 {
        flex-direction: column;
        gap: 2rem;
        margin: 2.5rem 0;
    }

    .主體-格局-導覽 {
        max-width: 100%;
        border-right: 0;
        display: none;
        position: fixed;
        top: 1rem;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        border-radius: 1rem;
        z-index: 1002;
        background: var(--ts-gray-50);
        padding: 1.5rem;
        overflow-y: auto;
        overflow-x: hidden;
        border: 1px solid var(--ts-gray-300);
        box-shadow: 0px 0px 20px #0000001a;
    }

    .主體-格局-導覽_啟用的 {
        display: flex;
    }

    .主體-格局-導覽-關閉按鈕 {
        display: block;
    }

    .主體-格局-導覽-項目 {
        overflow: initial;
    }

    .主體-格局-遮罩 {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--ts-gray-300);
        backdrop-filter: blur(1px);
        z-index: 1001;
        display: none;
    }

    .主體-格局-遮罩_啟用的 {
        display: block;
    }

    .主體-格局-內容 {
        max-width: 100%;
        padding: 0;
    }

    .主體-格局-內容-工具列-項目_標題 {
        font-size: 1.5rem;
    }

    .主體-格局-內容-主要範例-實際效果 {
        padding: 1rem;
    }

    .主體-格局-內容-主要範例-實際效果-置中容器 > .ts-email {
        padding: 0;
        margin: -15px 0;
    }

    .主體-格局-內容-單個範例_檢視原始碼中 .主體-格局-內容-單個範例-範例-實際效果 {
        padding: 1rem;
    }

    .主體-格局-內容-單個範例-範例-程式碼 {
        padding: 1rem;
    }

    .主體-格局-內容-單個範例-附帶程式碼:not(.主體-格局-內容-單個範例-附帶程式碼_可下載的) pre,
    .主體-格局-內容-主要範例-程式碼 pre,
    .主體-格局-內容-單個範例-範例-程式碼 pre {
        overflow-x: auto;
    }

    .主體-格局-內容-單個範例-附帶程式碼:not(.主體-格局-內容-單個範例-附帶程式碼_可下載的) .hljs,
    .主體-格局-內容-主要範例-程式碼 .hljs,
    .主體-格局-內容-單個範例-範例-程式碼 .hljs {
        white-space: pre;
    }

    .主體-格局-內容-單個範例-文字-標題_段落 {
        margin-top: 4rem;
    }

    .主體-格局-內容-標題_章節 {
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }

    .主體-格局-內容-標題_章節:not(:first-child) {
        margin-top: 4rem;
    }

    .主體-格局-內容-相關元件 {
        margin-top: 3rem;
    }

    .主體-格局-內容-標題 + .主體-格局-內容-單個範例 .主體-格局-內容-單個範例-文字-標題_段落 {
        margin-top: 2rem;
    }

    .主體-格局-內容-單個範例-附帶程式碼 {
        margin-top: 2rem;
    }

    .主體-格局-內容-文字 > .ts-box,
    .主體-格局-內容-單個範例-文字 > .ts-box,
    .主體-格局-內容-變數屬性 > .ts-box {
        overflow-x: auto;
    }

    .主體-格局-內容-單個範例-文字 > .ts-box table,
    .主體-格局-內容-變數屬性 > .ts-box table {
        white-space: nowrap;
    }

    .主體-格局-索引-回到頂部 {
        width: 100%;
        position: relative;
        top: initial;
        margin-top: 3rem;
    }

    .頁腳 {
        padding: 2.5rem 0;
    }

    .頁腳-導航列 {
        gap: 0.5rem 1rem;
        flex-wrap: wrap;
        font-size: 0.95rem;
    }

    .頁腳-格局 {
        flex-direction: column;
        gap: 2.5rem;
    }

    .頁腳-格局-資訊-文字 {
        margin-top: 2rem;
    }

    .頁腳-格局-資訊-翻譯者 {
        margin-top: 2rem;
    }

    .頁腳-格局-商標 {
        padding-left: initial;
        margin-left: initial;
        align-self: center;
    }
}