@charset "utf-8";

@import url('base.css');
@import url('layout.css');
@import url('iconfont.css');
@import url('fancybox.css');
@import url('dark-mode.css');
@import url('highlight.min.css');
.container{
    max-width: 85rem;
    margin: auto;
    padding: 0 var(--spacing-md);
}
.dashed-b{
    border-bottom: thin dashed var(--border-color);
}
.dashed-t{
    border-top: thin dashed var(--border-color);
}
.main-content[index] .posts .post{
    border-bottom: thin dashed var(--border-color);
}
.main-content[index] .posts .post .post-flex{
    display: flex;
    gap: var(--spacing-lg);
}
.main-content[index] .posts .post .post-thumbnail-wrapper{
    height: 25rem;
    width: 20rem;
    position: relative;
    overflow: hidden;
    border-radius: 0.2rem;
    flex-shrink: 0;
    margin-block: calc(var(--spacing-lg) *4);
    outline: thin dashed var(--border-color);
    padding: var(--spacing-xs);
}
.main-content[index] .posts .post .post-thumbnail-wrapper img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.2rem;
}
.main-content[index] .posts .post--odd{
    padding-inline: var(--spacing-lg);
}
.main-content[index] .posts .post--even{
    padding-inline: var(--spacing-lg);
    flex-direction: row-reverse;
}
.main-content[index] .post-content-wrapper{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: var(--spacing-lg);
}
.main-content[index] .post--odd .post-content-wrapper{
    border-left: thin dashed var(--border-color);
    padding-inline-start: var(--spacing-lg);
}
.main-content[index] .post--even .post-content-wrapper{
    border-right: thin dashed var(--border-color);
    padding-inline-end: var(--spacing-lg);
}
.main-content[index] .post-content-wrapper > *{
    flex: 100%;
}
.main-content[index] .post-content-wrapper .post-header h2 {
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
    font-size: 26px;
}
.main-content[index] .post-content-wrapper .post-header h2 a {
    padding-block: var(--spacing-xs);
    border-bottom: thin dashed var(--border-color);
    transition: .3s;
    color: var(--text-primary);
}
.main-content[index] .post-content-wrapper .post-header h2 a:hover{
    color:rgba(var(--color-primary-rgb),100);
    border-bottom-color:rgba(var(--color-primary-rgb),.6);
}
.main-content[index] .post-content-wrapper .post-tags {
    display: flex;
    gap: var(--spacing-sm);
}
.main-content[index] .post-content-wrapper .post-tags a{
    font-size: 12px;
    padding: var(--spacing-sm);
    background: rgba(var(--bg-dark-1-rgb),1);
    color: var(--divider-color);
}
.main-content[index] .post-content-wrapper .post-excerpt{
    --line-num: 2;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    font-weight: 400;
}
.main-content[index] .post-content-wrapper .post-footer{
    display: flex;
    font-size: 12px;
    gap: var(--spacing-sm);
    color: var(--text-muted);
}
.site-main{
    position: sticky;
    bottom: 0;
    z-index: 9;
    background: rgba(var(--bg-primary-rgb),1);
    border-top: thin dashed var(--border-color);
}
.site-nav[footer-nav]{
    display: grid;
    grid: auto / auto-flow max-content;
}
.site-nav[footer-nav] .nav-section{
    position: relative;
    padding: var(--spacing-sm);
    border-radius: .2em;
    transition: .3s;
}
.site-nav[footer-nav] > .nav-section:before {
    content: "";
    position: fixed;
    background: rgba(var(--bg-primary-rgb) , 1);
    inset: 0;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    transition: .3s;
}
.site-nav[footer-nav] > .nav-section:hover:before {
    opacity: .8;
}
.site-nav[footer-nav] > .nav-section > .nav-title {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 3rem;
}
.site-nav[footer-nav] > .nav-section > .nav-list {
    position: fixed;
    display: grid;
    align-items: start;
    width: 20rem;
    max-height: calc(100vh - 3rem);
    padding: var(--spacing-sm);
    bottom: 3rem;
    outline: thin dashed var(--border-color);
    border-radius: .2em;
    background: rgba(var(--bg-primary-rgb) , .8);
    -webkit-backdrop-filter: blur(5px) saturate(1.5);
    backdrop-filter: blur(5px) saturate(1.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(1rem);
    transform-origin: bottom left;
    overflow: clip auto;
    z-index: 8;
    transition: .3s;
    box-shadow: var(--shadow-xs);
    grid: auto / repeat(auto-fill, minmax(min(22rem / 2 - 3em, 100%), 1fr));
}
.site-nav[footer-nav] > .nav-section:hover > .nav-list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    will-change: transform;
}
.site-nav[footer-nav] > .nav-section > .nav-list .nav-item {
    position: relative;
    padding: var(--spacing-sm);
    border-radius: .2em;
    list-style: none;
    transition: .3s;
}
.site-nav[footer-nav] > .nav-section > .nav-list .nav-item:hover {
    background: rgba(var(--color-primary-rgb),.1);
    color: var(--text-muted);
}
.site-nav[footer-nav] > .nav-section > .nav-list .nav-item a {
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagination{
    margin: var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--text-secondary);
    gap: var(--spacing-xs);
}
.pagination-nav > a{
    padding: var(--spacing-sm);
    font-size: 14px;
    line-height: 1;
    background: rgba(var(--color-primary-rgb),.1);
    border-radius: 0.2em;
    color: var(--text-muted);
    transition: .3s;
}
.pagination-nav > a:hover{
    background: rgba(var(--color-primary-rgb), .3);
    color: rgba(var(--color-primary-rgb), 1);
    box-shadow: var(--shadow-lg);
}
.footer-main[foot]{
    margin: var(--spacing-lg);
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}
[post] .simple-breadcrumb{
    font-size: 12px;
    color: var(--text-muted);
}
[post] .post .post-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-height: 25vh;
    justify-content: center;
    padding-block: 0 var(--spacing-lg);
    margin-block-start: 1rem;
}
[post] .post .post-header h1 {
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
    font-size: 30px;
    color: var(--text-primary);
    z-index: 1;
}
[post] .post .post-header .meta-info {
    font-size: 12px;
    display: flex;
    gap: var(--spacing-md);
    color: var(--text-muted);
}
[post] .post-content {
    line-height: 1.8;
    font-weight: 400;
    color: var(--text-secondary);
    margin-block-start: calc(var(--spacing-lg) *2);
}
.main-content[post]{
    overflow: hidden;
}
.main-content .post-content > * {
    position: relative;
    margin-block-end: calc(var(--spacing-md)*2);
}
.main-content .single-footer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-block: var(--spacing-lg) var(--spacing-sm);
}
.main-content .single-footer .copyright-notice {
    padding: var(--spacing-sm);
    background: rgba(var(--bg-secondary-rgb),100);
    font-size: 12px;
    color: var(--text-muted);
}
.main-content .single-footer .copyright-notice a {
    text-decoration: revert;
}
.main-content[post] .single-footer .post-tags .tags-list {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
}
.main-content[post] .post-navigation {
    margin-block: var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
}
.main-content[post] .post-navigation >div {
    padding-block: var(--spacing-lg);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    font-size: 14px;
    gap: var(--spacing-xs);
    color: var(--text-secondary);
    align-content: flex-start;
}
.main-content[post] .post-navigation >div a {
    width: fit-content;
}
.main-content[post] .post-navigation .nav-next {
    text-align: end;
    display: flex;
    align-content: flex-end;
}
.Comments-warpper{
    margin-block: var(--spacing-lg);
    /*background: rgba(var(--bg-secondary-rgb),100);*/
    /*padding: var(--spacing-lg);*/
    border-radius: 0.2em;
}
#comment-form .comment-editor{
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    margin-block: var(--spacing-md);
}
#comment-form .comment-userinfo__row {
    display: flex;
    flex-flow: wrap;
    gap: var(--spacing-md);
    flex: auto;
}
#comment-form .comment-userinfo__row input{
    position: relative;
    flex: 1;
    padding: var(--spacing-sm);
    font-size: 14px;
    background: rgba(var(--bg-accent-rgb),100);
    border-radius: 2em;
    outline: thin dashed var(--border-color);
}
.Comments-warpper .comment-editor__input{
    position: relative;
    flex: 100%;
    background: rgba(var(--bg-accent-rgb),100);
    border-radius: 0.2em;
    outline: thin dashed var(--border-color);
}
.Comments-warpper .comment-editor__input textarea{
    font-size: 14px;
    background: 0;
    transition: 0s;
    width: 100%;
    min-height: 8rem;
    padding: var(--spacing-sm);
}
.Comments-warpper .comment-emoji-main{
    border-top: thin dashed var(--border-color);
    border-radius: 2em;
    display: flex;
    align-items: center;
    font-size: 12px;
    height: 2.5rem;
    gap: 0.5rem;
}
.Comments-warpper .comment-emoji-main .comment_emoji_block{
    display: grid;
    place-items: center;
    grid: auto-flow 2em / repeat(auto-fill, minmax(1.75em, 1fr));
    font-size: 1.5em;
    flex: 1;
    height: inherit;
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
    overflow: hidden auto;
    scrollbar-width: none;
    transition: .3s;
}
.Comments-warpper .comment-emoji-main span {
    scroll-snap-align: center;
    user-select: none;
    cursor: pointer;
    transition: .3s;
}
.comment-emoji-main:not(.show) :where(span) {
    filter: grayscale(1) opacity(.5);
}
.Comments-warpper .comment-emoji-main span:hover {
    scale: 1.2;
    filter: none;
}
.Comments-warpper .comment-footer__submit{
    border-radius: 2em;
    color: var(--text-primary);
    font-weight: bold;
    font-size: 14px;
    padding: 0.7rem 1rem;
    font-size: 12px;
    height: 100%;
    width: 100%;
    transition: .3s;
    background: rgba(var(--bg-secondary-rgb),100);
}
.Comments-warpper .comment-footer__submit:hover{
    box-shadow: var(--shadow-lg);
    background: rgba(var(--color-primary-rgb),.1) !important;
    color: rgba(var(--color-primary-rgb),1);
}
.Comments-warpper .comment-footer{
    width: 100%;
}
.v-comment .comment-list{
    list-style: none;
    margin-block: var(--spacing-lg);
}
.m-comments-list > .comment-children > .comment-list{
    margin-block-start: -1.2rem;
    margin-inline-start: 2rem;
    margin-block-end: 0;
}
.m-comments-list .comment-children .comment-children .comment-list{
    margin-block-start: -1.5rem;
    margin-inline-start: 0;
}
.comment-item:has(~ .comment-children) .comment-body {
    padding-block-end: 2rem;
}
.Comments-lists .comment-none,.Comments-warpper .vcount{
    min-height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-block: var(--spacing-md) 0;
    background: rgba(var(--bg-secondary-rgb),100);
    border-radius: 0.2em;
}
.Comments-lists>.comment-list>.m-comments-list{
    margin-block-end: calc(var(--spacing-lg) *2);
    transition: .3s;
}
.m-comments-list .comment-header{
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-primary);
    background: rgba(var(--bg-accent-rgb),1);
}
.m-comments-list .comment-header img{
    width: 2rem;
    height: 2rem;
    border-radius: 0.2em;
    flex-shrink: 0;
}
.m-comments-list .comment-body {
    border-left: thin dashed var(--border-color);
    padding-inline-start: 1rem;
    margin-inline-start: 1rem;
    padding-block-end: 1rem;
    border-bottom: thin dashed var(--border-color);
    border-radius: 0 0 0 1rem;
}
.m-comments-list .comment-body .comment-foot{
    font-size: 12px;
    color: var(--text-muted);
    margin-block: var(--spacing-sm) 0;
}
.m-comments-list .comment-body .comment-foot button{
    background: none;
}
.comment-avatar-wrap .comment-meta {
    font-size: 14px;
    color: var(--text-muted);
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}
.comment-card .comment-body .comment-content{
    color: var(--text-secondary);
    padding: var(--spacing-xs) 0;
}
.comment-card .comment-body .comment-content .comment-notice{
    color: var(--color-warning);
    font-size: 12px;
    padding: var(--spacing-xs) 0;
}
.comment-avatar-wrap .comment-meta .comments-at{
    background: rgba(var(--color-primary-rgb),.35);
    color: rgba(var(--color-primary-rgb),1);
    font-size: 12px;
    padding: 0.2rem .4rem;
    border-radius: 2em;
    line-height: 1;
}
.post .main-article {
    line-height: 1.8;
	font-size: 17px;
}
.post .main-article .post-content a:not([class]){
    color: rgba(var(--color-primary-rgb), 1);
    text-decoration: none;
    position: relative;
    padding: 2px 6px;
}
.post .main-article .post-content a:not([class]):before{
    content: "\e616";
    scale: .95;
    transition: rotate .5s;
    display: inline-block;
    text-indent: 0;
    margin: 0 0.25rem 0 0;
    font-family: "iconfont" !important;
}
.post .main-article .post-content a:not([class]):hover:before{
    rotate: 45deg;
}
.post .main-article .post-content a:not([class]) {
    background: linear-gradient(90deg,rgba(var(--color-primary-rgb), .5),rgba(var(--color-primary-rgb), .5)) no-repeat 100% 100% / 0 1px;
    border-radius: .2em;
    background-size: 0 1px;
    background-position-x: 50%;
    transition: 0.3s ease;
}
.post .main-article .post-content a:not([class]):hover {
    background-position-x: 50%;
    background-size: 100% 1px;
}

/* 足迹 */
#cover-map {
	width: 100%;
	height: 20vh;
	min-height: 35vh;
	z-index: 0;
	opacity: .8;
	transition: .3s;
	margin-block-start: 1rem;
	padding: var(--spacing-sm);
    outline: thin dashed var(--border-color);
}
#cover-map:not(.full-screen) :is(.amap-controls, .maps-name),
.amap-copyright, .amap-logo {
	display: none !important;
}
/*代码块*/
.post .main-article .post-content pre{
    position: relative;
    overflow: hidden;
    border-radius: .2em;
}
.post .main-article .post-content pre code {
    border: none;
    direction: ltr;
    display: block;
    cursor: text;
    tab-size: 4;
    line-height: 1.5;
    overflow: auto;
    text-align: initial;
    text-decoration: none;
    scrollbar-width: thin;
    font-family: inherit;
    font-synthesis: initial;
    white-space: pre !important;
    overflow-wrap: break-word;
    color: var(--text-muted);
    padding: 4rem 1rem 1rem;
    max-height: calc(100vh - 6rem * 2);
    background: rgba(var(--bg-dark-1-rgb),100) !important;
}
.post .main-article .post-content pre code:before {
    content: "code";
    display: flex;
    align-items: center;
    position: absolute;
    font-weight: 600;
    inset: 0;
    padding: 1rem 1rem 1rem 2.25rem;
    height: 3rem;
    z-index: 0;
    color: var(--color);
    background: radial-gradient(circle, currentcolor 50%, #0000 65%) no-repeat 1rem / 0.75rem 0.75rem, linear-gradient(90deg, currentcolor, rgba(var(--bg-accent-rgb),.1) 40%) no-repeat 50% 100% / calc(100% - 2rem) 1px;
    background-color: inherit;
    text-transform: uppercase;
}
.post .main-article .post-content pre code[data-language]:before {
    content: attr(data-language);
}
.post .main-article .post-content pre .copy-btn{
    position: absolute;
    font-size: 12px;
    inset: 0.8rem 0.5rem auto auto;
    color: var(--text-muted);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 2em;
    z-index: 2;
    background: rgba(var(--bg-dark-2-rgb),100);
    line-height: 1;
}
.post .main-article .post-content code:not([class]) {
    color: var(--color-primary);
    text-decoration: underline dotted .1ex;
    text-decoration-skip-ink: none;
    text-underline-offset: .5ex;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
/* 定义CSS变量，统一管理样式值（聚焦圆形+渐变） */
:root {
    --title-number-gradient: linear-gradient(45deg, #4299e1, #38bdf8); /* 统一渐变背景 */
    --title-number-radius: 50%;          /* 圆形（50%实现正圆） */
    --title-number-size: 35px;           /* 圆形序号大小（宽高一致） */
    --title-number-font-size: 0.9em;     /* 序号字体大小 */
    --title-font-weight: 600;            /* 标题字体粗细 */
    --title-line-height: 1.8;            /* 标题行高 */
}

/* 初始化计数器 + 公共容器样式 */
.post .main-article .post-content {
    counter-reset: h1-sub 0 h2-sub 0 h3-sub 0 h4-sub 0 h5-sub 0;
    position: relative;
}

/* 所有标题的公共样式 */
.post .main-article .post-content h1,
.post .main-article .post-content h2,
.post .main-article .post-content h3,
.post .main-article .post-content h4,
.post .main-article .post-content h5 {
    position: relative;
    line-height: var(--title-line-height);
    font-weight: var(--title-font-weight);
    font-size: 22px!important;
}
.post .main-article .post-content h1.clicked-target::before,
.post .main-article .post-content h2.clicked-target::before,
.post .main-article .post-content h3.clicked-target::before,
.post .main-article .post-content h4.clicked-target::before,
.post .main-article .post-content h5.clicked-target::before {
    background: linear-gradient(125deg, rgba(var(--color-primary-rgb), .3), rgba(var(--color-primary-rgb), .9), rgba(var(--color-primary-rgb), .6), transparent) !important;
}
/* 标题序号核心美化：圆形+统一渐变 */
.post .main-article .post-content h1::before,
.post .main-article .post-content h2::before,
.post .main-article .post-content h3::before,
.post .main-article .post-content h4::before,
.post .main-article .post-content h5::before {
    width: var(--title-number-size);
    height: var(--title-number-size);
    border-radius: var(--title-number-radius);
    background: linear-gradient(125deg, rgba(var(--color-primary-rgb), .6), rgba(var(--color-primary-rgb), .3), rgba(var(--color-primary-rgb), .1), transparent);
    color: var(--text-primary);
    font-weight: bold;
    font-size: var(--title-number-font-size);
    display: inline-block;
    line-height: 1;
    box-sizing: border-box;
    box-shadow: var(--shadow-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: .5rem;
    transition: background .3s;
}

/* H1 标题序号规则 */
.post .main-article .post-content h1:first-of-type::before {
    counter-reset: h1-sub 0;
    content: "1"; /* 去掉多余空格，适配圆形 */
}
.post .main-article .post-content h1:not(:first-of-type)::before {
    counter-increment: h1-sub;
    content: "1." counter(h1-sub);
}

/* H2 标题序号规则 */
.post .main-article .post-content h2:first-of-type::before {
    counter-reset: h2-sub 0;
    content: "2";
}
.post .main-article .post-content h2:not(:first-of-type)::before {
    counter-increment: h2-sub;
    content: "2." counter(h2-sub);
}

/* H3 标题序号规则 */
.post .main-article .post-content h3:first-of-type::before {
    counter-reset: h3-sub 0;
    content: "3";
}
.post .main-article .post-content h3:not(:first-of-type)::before {
    counter-increment: h3-sub;
    content: "3." counter(h3-sub);
}

/* H4 标题序号规则 */
.post .main-article .post-content h4:first-of-type::before {
    counter-reset: h4-sub 0;
    content: "4";
}
.post .main-article .post-content h4:not(:first-of-type)::before {
    counter-increment: h4-sub;
    content: "4." counter(h4-sub);
}

/* H5 标题序号规则 */
.post .main-article .post-content h5:first-of-type::before {
    counter-reset: h5-sub 0;
    content: "5";
}
.post .main-article .post-content h5:not(:first-of-type)::before {
    counter-increment: h5-sub;
    content: "5." counter(h5-sub);
}
/*音乐*/
.post .main-article .post-content .music-player-wrapper{
    outline: thin dashed var(--border-color);
    padding-inline: var(--spacing-xs) var(--spacing-sm);
    border-radius: 2em;
    line-height: 1;
    transition: .3s;
}
.post .main-article .post-content .music-player-wrapper button{
    background: none;
}
.post .main-article .post-content .music-player-wrapper .inline-player{
    padding-inline-start: var(--spacing-xs);
    font-size: 14px;
}
.post .main-article .post-content .music-iframe-wrapper.wyy iframe{
    height: 5rem;
}
.post .main-article .post-content .music-player-wrapper.playing {
    background: rgba(var(--bg-secondary-rgb),100);
}

.post .main-article .post-content > hr {
	font-size: 12px!important;
	padding: 0.5rem 0;
	position: relative;
	border-bottom: thin dashed var(--border-color);
	margin: 3rem 0;
	margin-block-end: 3rem!important;
	border-top: 0;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
}

.post .main-article .post-content > hr:before {
	content: '分割线';
	position: absolute;
	right: 0;
	line-height: 0px;
	color: var(--text-muted);
}
/*视频*/
.post .main-article .post-content iframe,
.post .main-article .post-content video{
    border-radius: .2em;
}
.post .main-article .post-content .douyin-video-iframe{
    display: block;
    aspect-ratio: 16 / 9;
    max-width: calc(100vw - 1.5rem* 2);
    height: auto;
    min-height: auto;
    margin: 0;
}
.post .main-article .post-content .douyin-video-iframe iframe {
    height: 100%;
    width: 100%;
}
.post .main-article .post-content .local-video-wrapper video{
    height: 60vh;
    width: 100%;
    object-fit: cover;
}
/*折叠*/
.post .main-article .post-content .collapse-panel{
    border-radius: .2em;
    outline: thin dashed var(--border-color);
    overflow: hidden;
    transition: all 0.3s ease 0s;
}
.post .main-article .post-content .collapse-panel summary{
    cursor: pointer;
    color: var(--text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0.5rem 1rem 0.5rem .5rem;
}
.post .main-article .post-content details[open] summary{
    border-bottom: thin dashed var(--border-color);
}
.post .main-article .post-content .collapse-panel .collapse-content{
    padding: 0.5rem 1rem 0.5rem .5rem;
}
.post .main-article .post-content details[open]{
    background: rgba(var(--bg-secondary-rgb),100);
    box-shadow: var(--shadow-md);
}
.gallery-container .gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}
.gallery-container .gallery-grid .image {
    position: relative;
    flex-grow: 1;
}
.gallery-container .gallery-grid .image figure {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 100%;
    min-height: 10vh;
    overflow: hidden;
}
.gallery-container .gallery-grid .image figure img {
    display: block;
    max-width: 100%;
    object-fit: cover;
    transition: 0.5s;
    height: 20rem;
    max-height: 32vw;
    flex-grow: 1;
}
.post .main-article .post-content .gallery-container figure img {
    object-fit: cover;
    aspect-ratio: 1 / 1.414;
    transition: 0.3s ease;
}
.post .main-article .post-content figure[data-fancybox="single"] figcaption {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    opacity: .6;
}
.post .main-article .post-content figure[data-fancybox="gallery"] figcaption {
    margin: 0;
    flex: auto;
    text-align: center;
    font-size: 12px;
    position: absolute;
    padding: var(--spacing-sm);
    color: var(--text-muted);
    inset: 0;
    top: auto;
    transition: 0.3s ease;
    background:rgba(var(--bg-secondary-rgb),.8);
    backdrop-filter: blur(5px);
    overflow: hidden;
}
.post .main-article .post-content > .gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    gap: 0.5rem;
    align-items: center;
    outline: thin dashed var(--border-color);
    border-radius: 0.2em;
    padding: 0.5rem;
}
.post .main-article .post-content .gallery figure{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    max-width: 100%;
    width: auto !important;
    position: relative;
    margin-inline-end: var(--spacing-sm);
}
.post .main-article .post-content .gallery figure img {
    height: 100%;
    min-height: 22rem;
    max-height: 55vh;
    display: block;
    height: auto;
    max-width: 100%!important;
    width: auto;
    border-radius: 0.2em;
}
.post .main-article .post-content .gallery figure .gallery-caption{
    margin: 0;
    flex: auto;
    text-align: center;
    font-size: 12px;
    position: absolute;
    padding: var(--spacing-sm);
    color: var(--text-muted);
    inset: 0;
    top: auto;
    transition: 0.3s ease;
    background: rgba(var(--bg-secondary-rgb),.8);
    backdrop-filter: blur(5px);
    overflow: hidden;
}
.post .main-article .post-content .gallery .f-carousel__nav {
    order: 3;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
.post .main-article .post-content .gallery .f-carousel__dots,
.post .main-article .post-content .gallery .f-carousel__nav button{
    position: static;
    transform: none;
    margin: 0px !important;
}
.post .main-article .post-content .gallery .f-carousel__nav button{
    background: rgba(var(--bg-secondary-rgb),100);
    font-size: 12px;
    color: var(--text-muted);
    transform: scale(.6);
}
.post .main-article .post-content .bg-with-text {
	margin-left: -50vw;
	width: 100vw;
	left: 50%;
}
.post .main-article .post-content .bg-with-text .image-background {
    min-height: 90vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(0.6);
    background-position: 50% 50%;
}
.post .main-article .post-content .bg-with-text .image-content {
    max-width: 85rem;
    width: 100%;
    margin: auto;
    padding: var(--spacing-sm);
    z-index: 3;
    position: absolute;
    inset: 0;
    font-size: 12px;
    font-weight: 400;
    opacity: .8;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: rgb(245 244 247);
    line-height: 2;
}
.post .main-article .post-content>ol{
    list-style: none;
    counter-reset: num-counter;
}
.post .main-article .post-content>ol li{
    position: relative;
    padding: 12px 0 12px 48px;
    margin-bottom: 10px;
    counter-increment: num-counter;
    transition: all 0.3s ease;
    border-radius: .2em;
}
.post .main-article .post-content>ol li::before {
    content: counter(num-counter);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: thin dashed rgba(var(--color-primary-rgb), .3);
    color: rgba(var(--color-primary-rgb), 1);
    border-radius: .2em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.post .main-article .post-content>ol li:hover {
    background: rgba(var(--color-primary-rgb), .3);
    padding-left: 52px;
}
.post .main-article .post-content>ol li:hover::before {
    background: rgba(var(--color-primary-rgb), 1);
    color: white;
    transform: translateY(-50%) scale(1.05);
    margin-left: 5px;
    box-shadow: var(--shadow-lg);
}
.post .main-article .post-content>ul {
    list-style: none;
}
.post .main-article .post-content>ul li{
    position: relative;
    padding: 12px 0 12px 30px;
    margin-bottom: 15px;
    padding-right: 15px;
    border-radius: .2em;
    transition: .3s;
    outline: thin dashed #0000;
}
.post .main-article .post-content>ul li:hover{
    outline-color: var(--border-color);
}
.post .main-article .post-content>ul li::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), .9) 0%, rgba(var(--color-primary-rgb), .1) 100%);
    box-shadow: var(--shadow-lg);
}
.nav-floating{
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
}
.nav-floating .floating-menu-ring{
    position: fixed;
    bottom: 5rem;
}
@media (width <= 1023px){
    .post .main-article .post-content .douyin-video-iframe{
        width: min(324px, 100%);
        max-height: none;
        margin-inline: auto;
        aspect-ratio: .4821;
        overflow: hidden;
        height: auto;
        margin: 0 auto;
    }
}