@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif+TC:wght@100;200;300;400;500;600;700;800;900&display=swap");

:root {
    --theme-font-display: "Noto Serif TC", "Times New Roman", serif;
    --theme-font-body: "Noto Sans TC", "Segoe UI", sans-serif;
    --theme-color-cortex-ink: #162033;
    --theme-color-cortex-sand: #f5efe4;
    --theme-color-cortex-cream: #fffaf2;
    --theme-color-cortex-gold: #d97706;
    --theme-color-cortex-clay: #b45309;
    --theme-color-cortex-mint: #c8d9cb;
    --theme-color-cortex-sky: #d8e5f4;
    --theme-body-background:
        radial-gradient(circle at top left, rgba(217, 119, 6, 0.14), transparent 28rem),
        radial-gradient(circle at 88% 14%, rgba(22, 32, 51, 0.08), transparent 26rem),
        radial-gradient(circle at bottom right, rgba(180, 83, 9, 0.12), transparent 24rem),
        linear-gradient(180deg, #fffaf2 0%, #f5efe4 100%);
    --theme-selection-background: rgba(22, 32, 51, 0.14);
}

.frontend-breadcrumb-shell {
    width: 100%;
    display: var(--theme-breadcrumb-display, block);
    background: var(--theme-breadcrumb-background, transparent);
    border-bottom: 1px solid rgba(22, 32, 51, 0.08);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.frontend-breadcrumb-container {
    min-width: max-content;
    padding-inline: 16px;
}

@media (min-width: 768px) {
    .frontend-breadcrumb-container {
        padding-inline: 0;
    }
}

.frontend-breadcrumb-list {
    margin: 0;
    padding: 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0;
    justify-content: var(--theme-breadcrumb-align, left);
    color: var(--theme-breadcrumb-text-color, color-mix(in srgb, var(--theme-color-text, #162033) 62%, transparent));
    font-size: var(--theme-breadcrumb-font-size, 0.875rem);
    font-weight: var(--theme-breadcrumb-font-weight, 400);
    line-height: 1.5;
    white-space: nowrap;
}

.frontend-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.frontend-breadcrumb-item + .frontend-breadcrumb-item::before {
    content: attr(data-breadcrumb-separator);
    margin: 0 0.65rem;
    color: color-mix(in srgb, var(--theme-color-text, #162033) 34%, transparent);
}

.frontend-breadcrumb-item a {
    color: var(--theme-breadcrumb-link-color, inherit);
    text-decoration: none;
    transition: color 0.15s ease;
}

.frontend-breadcrumb-item a:hover {
    color: var(--theme-color-text, #162033);
}

.frontend-breadcrumb-item.is-current {
    color: var(--theme-breadcrumb-current-color, var(--theme-color-text, #162033));
    font-weight: 600;
}

@media (max-width: 767px) {
    .frontend-breadcrumb-list {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
        font-size: 0.8125rem;
    }
}