.x-github {
    border: 1px solid #ccc;
    border-radius: .25em;
    font-family: system-ui, —apple-system, Segoe UI, Rototo, Emoji, Helvetica, Arial, sans-serif
}

.x-github-title {
    padding: .5em;
    background-color: #f3f4f6;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    border-radius: .25em .25em 0 0
}

.x-github-title .icon {
    padding-top: 2px;
    padding-right: .5em
}

.x-github-title svg {
    width: 16px;
    height: 16px
}

.x-github-title > a, .x-github-title span {
    text-decoration: none
}

.x-github-title > a:hover {
    text-decoration: underline
}

.x-github-content {
    padding: .5em
}

.x-github-footer {
    display: flex;
    gap: .5em;
    padding: .75em
}

.x-github-statics {
    margin-left: auto;
    align-items: center;
    gap: .5em;
    display: none
}

.x-github-statics > span {
    display: flex;
    align-items: center;
    gap: .25em
}

.x-github-btn {
    display: inline-flex;
    align-items: center;
    transition: all .2s;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: .25em;
    text-decoration: none;
    height: 36px
}

.x-github-btn:not(.disabled):not(:disabled) {
    cursor: pointer
}

.x-github-btn-icon {
    background-color: rgba(0, 0, 0, .1);
    padding: .25em .75em;
    height: 24px;
    display: inline-flex;
    justify-content: center;
    align-items: center
}

.x-github-btn-content {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    line-height: 24px;
    padding: .25em .75em
}

.x-github-btn.secondary {
    background-color: #252c41;
    border-color: #252c41;
    color: #fff
}

.x-github-btn.secondary:hover, .x-github-btn.secondary:focus, .x-github-btn.secondary.focus {
    color: #fff;
    background-color: #222831;
    border-color: #222831;
    box-shadow: 0 5px 20px -3px rgba(37, 44, 65, .33) !important
}

.x-github-btn.secondary:not(:disabled):not(.disabled):active:focus, .x-github-btn.secondary:not(:disabled):not(.disabled).active:focus {
    color: #fff;
    background-color: #222831;
    border-color: #222831;
    box-shadow: 0 5px 20px -3px rgba(37, 44, 65, .33) !important
}

.x-github-btn.secondary.disabled, .x-github-btn.secondary:disabled {
    color: #f4f5f9;
    background-color: #222831;
    border-color: #222831
}

.x-github-btn.secondary:not(:disabled):not(.disabled):active, .x-github-btn.secondary:not(:disabled):not(.disabled).active {
    color: #f4f5f9;
    background-color: #222831;
    border-color: #222831
}

.x-github-btn.secondary .content {
    background-color: rgba(255, 255, 255, .1)
}

.x-github-btn.warning {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107
}

.x-github-btn.warning:hover {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00
}

.x-github-btn.warning:active {
    color: #212529;
    background-color: #d39e00;
    border-color: #c69500
}

.x-github-btn.warning:focus {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00;
    box-shadow: 0 0 0 .2rem rgba(222, 170, 12, .5)
}

.x-github-user {
    border: 0
}

.x-github-user > a {
    display: table;
    border: 1px solid #ccc;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    padding: .5em .75em;
    transition: transform ease-in-out .3s;
    border-radius: 4px;
    text-decoration: none
}

.x-github-user > a:hover {
    border-bottom-color: #e5e7eb;
    transform: translateY(-5px)
}

.x-github-user > a > span {
    vertical-align: middle;
    display: table-cell
}

.x-github-user > a .icon {
    padding-top: 2px;
    padding-right: .5em
}

@media (min-width: 640px) {
    .x-github-statics {
        display: flex
    }
}

@media (min-width: 768px) {
    .x-github-title, .x-github-content, .x-github-footer {
        padding: 12px
    }
}

.x-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #222;
}

.x-video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.bilibili-player-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #222;
}

.bilibili-player-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ===== Fence Block 样式 ===== */
.fence {
    margin: 1em 0;
    border: 1px solid;
    border-radius: 6px;
    overflow: hidden
}

.fence-title {
    padding: 0.5em 1em;
    font-weight: 600;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 0.5em
}

.fence-title::before {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 14.25 15H1.75A1.75 1.75 0 0 1 0 13.25Zm1.75-.25a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V2.75a.25.25 0 0 0-.25-.25Zm7.47 3.97 2.84 2.84a.75.75 0 1 1-1.06 1.06L9.31 8.81V11.5a.75.75 0 0 1-1.5 0V8.81L5.8 10.38a.75.75 0 1 1-1.06-1.06l2.84-2.84a.75.75 0 0 1 1.06 0l-.42.42Z'/%3E%3C/svg%3E")
}

.fence-raw .fence-title::before {
    display: none
}

.fence-content {
    padding: 0.75em 1em
}

.fence-content > *:last-child,
.fence-details .details-content > *:last-child {
    margin-bottom: 0
}

.fence-details .details-content {
    padding: 0.75em 1em
}

/* Info - 蓝色 (对应 GitHub NOTE) */
.fence-info {
    border-color: #0969da;
    background-color: #ddf4ff
}

.fence-info .fence-title {
    background-color: #0969da;
    color: #fff
}

.fence-info .fence-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z'/%3E%3C/svg%3E")
}

/* Tip / Success - 绿色 (对应 GitHub TIP) */
.fence-tip,
.fence-success {
    border-color: #1a7f37;
    background-color: #dafbe1
}

.fence-tip .fence-title,
.fence-success .fence-title {
    background-color: #1a7f37;
    color: #fff
}

.fence-tip .fence-title::before,
.fence-success .fence-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM7 10.5 4.5 8l1-1 2 2 4-4 1 1-5.5 4.5Z'/%3E%3C/svg%3E")
}

/* Important - 紫色 (对应 GitHub IMPORTANT) */
.fence-important {
    border-color: #8957e5;
    background-color: #f5f0ff
}

.fence-important .fence-title {
    background-color: #8957e5;
    color: #fff
}

.fence-important .fence-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 0a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0Zm0 13.5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 13.5ZM.75 8a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5A.75.75 0 0 1 .75 8Zm12 0a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75ZM2.343 2.343a.75.75 0 0 1 1.061 0l1.06 1.061a.75.75 0 0 1-1.06 1.06l-1.061-1.06a.75.75 0 0 1 0-1.061Zm9.193 9.193a.75.75 0 0 1 1.06 0l1.061 1.06a.75.75 0 0 1-1.06 1.061l-1.061-1.06a.75.75 0 0 1 0-1.061Zm0-9.193a.75.75 0 0 1 0 1.061l-1.06 1.06a.75.75 0 0 1-1.061-1.06l1.06-1.061a.75.75 0 0 1 1.061 0ZM3.404 11.536a.75.75 0 0 1 0 1.06l-1.06 1.061a.75.75 0 0 1-1.061-1.06l1.06-1.061a.75.75 0 0 1 1.061 0Z'/%3E%3C/svg%3E")
}

/* Warning - 橙色 (对应 GitHub WARNING) */
.fence-warning {
    border-color: #9a6700;
    background-color: #fff8c5
}

.fence-warning .fence-title {
    background-color: #9a6700;
    color: #fff
}

.fence-warning .fence-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368L8.22 1.754ZM8 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 5Zm0 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E")
}

/* Danger / Error - 红色 (对应 GitHub CAUTION) */
.fence-danger,
.fence-error {
    border-color: #cf222e;
    background-color: #ffebe9
}

.fence-danger .fence-title,
.fence-error .fence-title {
    background-color: #cf222e;
    color: #fff
}

.fence-danger .fence-title::before,
.fence-error .fence-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M4.47.22A.749.749 0 0 1 5 0h6c.198 0 .389.078.53.22l4.25 4.25c.141.14.22.332.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.198.078-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E")
}

/* Details - 可折叠块 */
.fence-details {
    border-color: #d0d7de;
    background-color: #f6f8fa
}

/* Masonry - 瀑布流布局 */
.fence-masonry {
    border-color: #d0d7de;
    background-color: #f6f8fa
}

.fence-masonry .fence-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3Zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3ZM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3Zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3Z'/%3E%3C/svg%3E")
}

/* Masonry 容器：隔离 fence-content 的 padding */
.masonry-wrapper {
    margin: -1em; /* 抵消 fence-content 的 padding: 1em */
}

/* 外层布局容器 */
.masonry-item {
    /* 由 JS 动态设置宽度和间距 */
}

/* 内层内容容器 */
.masonry-item-inner {
    padding: 16px;
    background: var(--fence-bg, transparent);
    border-radius: .25em;
}

.masonry-item-inner img {
    margin: 0;
    border-radius: 0;
    display: block;
    width: 100%;
}

.fence-details {
    padding: 0
}

.fence-details summary {
    padding: 0.75em 1em;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.5em;
    list-style: none;
    border-radius: 6px
}

.fence-details summary::-webkit-details-marker {
    display: none
}

.fence-details summary::before,
.fence-grid .fence-title::before {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3Zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3ZM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3Zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: opacity 0.2s
}

.fence-grid .fence-content {
    display: grid;
    grid-template-columns: var(--columns, repeat(3, 1fr));
    gap: var(--gap, 1rem)
}

.fence-grid .fence-content br {
    display: none
}

.fence-grid[data-auto-fit="true"] .fence-content {
    grid-template-columns: repeat(auto-fit, minmax(var(--min-width, 250px), 1fr))
}

.fence-details[open] summary::before {
    opacity: 1
}

.fence-details summary::after {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M4.427 7.427l3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.2s;
    margin-left: auto
}

.fence-details[open] summary::after {
    transform: rotate(180deg)
}

.fence-details summary:hover {
    background-color: rgba(0, 0, 0, .03)
}

.fence-details .details-content {
    border-top: 1px solid #d0d7de
}

/* Raw - 原样输出，无样式 */
.fence-raw {
    border: none;
    background: none;
    padding: 0
}

.fence-raw .fence-title,
.fence-raw .fence-content {
    padding: 0;
    background: none
}

/* ===== Kbd 键盘按键样式 ===== */
kbd {
    display: inline-block;
    padding: 0.2em 0.5em;
    font-size: 0.85em;
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
    line-height: 1;
    color: #24292f;
    background-color: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .05);
    white-space: nowrap
}

kbd kbd {
    margin: 0 0.1em;
    padding: 0 0.4em;
    font-size: 0.9em;
    background-color: #fff;
    border: 1px solid #babbbd;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .15)
}

/* 响应式调整 */
@media (prefers-color-scheme: dark) {
    kbd {
        color: #c9d1d9;
        background-color: #282e33;
        border-color: #484f58;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2), inset 0 -1px 0 rgba(0, 0, 0, .2)
    }

    kbd kbd {
        background-color: #32383f;
        border-color: #636e7b;
        box-shadow: 0 1px 0 rgba(0, 0, 0, .3)
    }

    .fence-info {
        border-color: #58a6ff;
        background-color: rgba(56, 139, 253, .15)
    }

    .fence-info .fence-title {
        background-color: #58a6ff
    }

    .fence-tip,
    .fence-success {
        border-color: #3fb950;
        background-color: rgba(63, 185, 80, .15)
    }

    .fence-tip .fence-title,
    .fence-success .fence-title {
        background-color: #3fb950
    }

    .fence-important {
        border-color: #a371f7;
        background-color: rgba(163, 113, 247, .15)
    }

    .fence-important .fence-title {
        background-color: #a371f7
    }

    .fence-warning {
        border-color: #d29922;
        background-color: rgba(210, 153, 34, .15)
    }

    .fence-warning .fence-title {
        background-color: #d29922
    }

    .fence-danger,
    .fence-error {
        border-color: #f85149;
        background-color: rgba(248, 81, 73, .15)
    }

    .fence-danger .fence-title,
    .fence-error .fence-title {
        background-color: #f85149
    }

    .fence-details {
        border-color: #484f58;
        background-color: #161b22
    }

    .fence-details summary:hover {
        background-color: rgba(255, 255, 255, .05)
    }

    .fence-details .details-content {
        border-top-color: #484f58
    }

    .fence-masonry {
        border-color: #484f58;
        background-color: #161b22
    }
}

/* ===== 文章末尾统计 ===== */
.tex-post-stats {
    display: flex;
    gap: 1em;
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid #e5e7eb
}

.tex-stat-item {
    display: flex;
    align-items: center;
    gap: 0.25em;
    font-size: 0.9em
}

.tex-stat-icon {
    font-size: 1.25em
}

.tex-stat-label {
    color: #6b7280
}

.tex-stat-value {
    font-weight: 500
}

.tex-stat-icon svg {
    display: block
}

/* 浏览统计项（不可点击） */
.tex-stat-views {
    cursor: default
}

.tex-stat-views:hover {
    background-color: transparent
}

/* 点赞按钮交互样式 */
.tex-stat-like {
    transition: all 0.2s;
    border-radius: 4px;
    padding: 0.25em 0.5em;
    cursor: pointer
}

.tex-stat-like:hover {
    background-color: rgba(239, 68, 68, .1);
    transform: scale(1.05)
}

.tex-stat-like:hover .tex-like-icon {
    stroke: #ef4444;
    transform: scale(1.1)
}

/* 已点赞状态 */
.tex-stat-like.tex-liked {
    color: #ef4444;
    cursor: default
}

.tex-stat-like.tex-liked:hover {
    background-color: transparent;
    transform: none
}

.tex-stat-like.tex-liked .tex-like-icon {
    fill: #ef4444;
    stroke: #ef4444
}

/* 点赞跳动动画 */
.tex-stat-like.tex-animate {
    animation: likeBounce 0.5s ease
}

@keyframes likeBounce {
    0%, 100% { transform: scale(1) }
    25% { transform: scale(1.3) }
    50% { transform: scale(0.95) }
    75% { transform: scale(1.1) }
}

/* 加载状态 */
.tex-stat-like.tex-loading {
    opacity: 0.6;
    cursor: wait
}

.tex-stat-like.tex-loading .tex-like-icon {
    animation: likePulse 1s ease-in-out infinite
}

@keyframes likePulse {
    0%, 100% { transform: scale(1); opacity: 1 }
    50% { transform: scale(1.1); opacity: 0.8 }
}

@media (prefers-color-scheme: dark) {
    .tex-post-stats {
        border-color: #374151
    }

    .tex-stat-label {
        color: #9ca3af
    }

    .tex-stat-like:hover {
        background-color: rgba(239, 68, 68, .2)
    }

    .tex-stat-like.tex-liked {
        color: #f87171
    }

    .tex-stat-like.tex-liked .tex-like-icon {
        fill: #f87171;
        stroke: #f87171
    }

    .fence-tabs {
        border-color: #484f58;
        background-color: #161b22
    }

    .fence-tabs .tabs-header {
        background-color: #0d1117;
        border-bottom-color: #484f58
    }

    .fence-tabs .tab-button {
        color: #c9d1d9;
        border-bottom-color: transparent
    }

    .fence-tabs .tab-button:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, .05)
    }

    .fence-tabs .tab-button.active {
        color: #58a6ff;
        border-bottom-color: #58a6ff;
        background-color: #161b22
    }

    .fence-tabs .tab-pane {
        background-color: #161b22
    }
}

/* ===== Tabs 样式 ===== */
.fence-tabs {
    border-color: #d0d7de;
    background-color: #fff
}

.fence-tabs .tabs-header {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid #d0d7de;
    background-color: #f6f8fa;
    scrollbar-width: thin;
    scrollbar-color: #d0d7de transparent
}

.fence-tabs .tabs-header::-webkit-scrollbar {
    height: 4px
}

.fence-tabs .tabs-header::-webkit-scrollbar-track {
    background: transparent
}

.fence-tabs .tabs-header::-webkit-scrollbar-thumb {
    background-color: #d0d7de;
    border-radius: 2px
}

.fence-tabs .tab-button {
    flex-shrink: 0;
    padding: 0.5em 1em;
    border: none;
    background: none;
    color: #24292f;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap
}

.fence-tabs .tab-button:hover {
    color: #0969da;
    background-color: rgba(9, 105, 218, .08)
}

.fence-tabs .tab-button.active {
    color: #0969da;
    border-bottom-color: #0969da;
    background-color: #fff
}

.fence-tabs .tab-button:focus-visible {
    outline: 2px solid #0969da;
    outline-offset: -2px
}

.fence-tabs .tabs-content {
    padding: 0
}

.fence-tabs .tab-pane {
    display: none;
    padding: 0.75em 1em;
    animation: tabFadeIn 0.2s ease-in-out
}

.fence-tabs .tab-pane.active {
    display: block
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px)
        }
    to {
        opacity: 1;
        transform: translateY(0)
        }
}
