*,::after,::before{box-sizing:border-box}html,body{margin:0;padding:0}ul,ol,li{list-style:none;margin:0;padding:0}h1,h2,h3{margin:0;padding:0}
body{background-color:var(--bg-body);color:var(--color-body);font-size:.9375rem;font-weight:300;line-height:1.5;font-family:"Chinese Quotes", "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}
a{color:var(--color-body);text-decoration:none}.main a:hover{color:#4493f8}
header{
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    z-index: 49;
    padding: .75rem 0;
    background-color: var(--bg-header);
    box-shadow: 0 12px 28px 0 rgb(27 26 49 / 5%), 0 5px 10px 0 rgb(27 26 49 / 2%);
    transition: all 0.3s ease-in-out, background-color 0s;
    display: flex;
}
.container{width:100%;max-width:1320px;margin:auto}
header .container{display:flex;align-items:center;justify-content:space-between;padding:0 .6rem;min-height:55px}
header .logo{max-height:40px;vertical-align:middle}
header.sticky{
    backdrop-filter: saturate(180%) blur(6px);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    background-color: var(--bg-header-sticky);
}
header.overlay{transition:none}



nav{
	flex-grow:0;
	position:relative;
}

nav ul{
    display:flex;
	width:fit-content;
	align-items:center;
	list-style:none;
	gap:1rem;
	padding:.35rem;
	background:var(--bg-block);
	border-radius:999px;
    position: relative;
    left: -100px;
}

nav li{
	position:relative;
}

nav li a{
	display:block;
	color:var(--color-secondary);
	font-size:.95rem;
	padding:.55rem .9rem;
	border-radius:999px;
	position:relative;
	transition:all .2s ease;
	white-space:nowrap;
}

/* hover */
nav li a:hover{
	background:var(--bg-light);
	color:var(--color-body);
}

/* current */
nav li.current a{
	color:#fff;
	background:#3858f6;
}





header .bar{display:flex;align-items:center}


.t_switch{
	margin-right:1rem;cursor:pointer;position:relative;border-radius:11px;display:inline-block;width:40px;height:22px;
	border:1px solid var(--border-1);background-color:rgba(142,150,170,.14);transition:border-color .25s !important;
}
.t_switch:hover{border-color:#007bff}
.t_switch .check{
	position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background-color:var(--bg-body);
	box-shadow:0 1px 2px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.06);transition:transform .25s !important;
}
.dark .t_switch .check{transform:translate(18px)}
.t_switch .icon{position:relative;display:block;width:18px;height:18px;border-radius:50%;overflow:hidden}
.t_switch .icon .t_i{
	position:absolute;top:3px;left:3px;width:12px;height:12px;color:var(--color-body);mask:var(--icon) no-repeat;-webkit-mask:var(--icon) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%;background-color:currentColor;
}
.t_switch .icon .sun{
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
	opacity:1;
}
.dark .t_switch .icon .sun{opacity:0}
.t_switch .icon .moon {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E");
	opacity:0;
}
.dark .t_switch .icon .moon{opacity:1}


#menubtn {
	cursor: pointer;
	display: none;
	grid-auto-columns: max-content;
	width: 2.2rem;
	height: 2.2rem;
	color: #848d97;
	background: transparent;
	border:0;
	align-items: center;
	justify-content: center;
	position: relative;
}
#menubtn:hover {
    color: var(--color-body);
    background-color: var(--bg-light);
    transition-duration: 80ms;
    border-radius:2.2rem;
}
#menubtn::before{
	content:'';
	width:16px;
	height:16px;
	display:block;
	background-color:currentColor;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.75A.75.75 0 0 1 1.75 2h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75Zm0 5A.75.75 0 0 1 1.75 7h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 7.75ZM1.75 12h12.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1 0-1.5Z'/%3E%3C/svg%3E") no-repeat center;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.75A.75.75 0 0 1 1.75 2h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75Zm0 5A.75.75 0 0 1 1.75 7h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 7.75ZM1.75 12h12.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1 0-1.5Z'/%3E%3C/svg%3E") no-repeat center;
	mask-size:100% 100%;
	-webkit-mask-size:100% 100%;
}

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(120,129,147,.22);
    transition: opacity 0.3s ease;
    z-index: 50;
}
#overlay.show {
    display: block;
    opacity: 1;
}
#sidebar {
    width: 320px;
    height: 100vh;
    background-color: var(--bg-sidebar);
    color: #f0f6fc;
    position: fixed;z-index:90;
    top:0;
    bottom:0;
    left: -320px;
    transition: left 0.2s ease;
    padding:1rem;
}
#sidebar.open {
    left: 0;
}
#sidebar ul{list-style:none;padding:0}
#sidebar li{
    margin: 0 0 .75rem;
    background-color: var(--bg-secondary);
    border-radius: 12px;
}
#sidebar li a{
	display:block;
	width:100%;
	height:100%;
	padding:.8125rem 1rem;
}
#sidebar .header{padding-bottom:1rem;text-align:right}
#closebtn{
    margin-left:auto;
    display: grid;
    cursor: pointer;
    color: var(--color-muted);
    background-color: var(--bg-light);
    border:0;
	border-radius:2.6rem;
    width:2.6rem;
    height:2.6rem;
    place-content: center;
}
#closebtn:hover{
    color: var(--color-muted-hover);
    transition-duration: 80ms;
}
#closebtn::before{
	content:'';
	width:16px;
	height:16px;
	display:block;
	background-color:currentColor;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E") no-repeat center;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E") no-repeat center;
	mask-size:100% 100%;
	-webkit-mask-size:100% 100%;
}


.tabmenu,.content .article,.widget,.content .post{background-color:var(--bg-block);border:1px solid var(--border-block);border-radius:8px}


main{padding:2.25rem 0;margin-top:4.5rem}
.row{display:flex;}
.content{width:70%;flex: 0 0 auto;padding:0 .5rem}
.tabmenu{margin-bottom:1rem}
.tabmenu ul{display:flex;padding:.5rem;list-style:none;margin:0}
.tabmenu li{padding: .5rem .5rem;}
.tabmenu li a{display:block;color:var(--color-1);background-color:var(--bg-light);font-size:0.875rem;padding: 0.3125rem 1rem;border-radius:7px;text-align:center;cursor:pointer}
.tabmenu li.active a,.tabmenu li:hover a{background-color:var(--bg-1);border-color:var(--bg-1);color:#fff;}
.content .article{display:flex;align-items:flex-start;position:relative;padding:1rem;margin-bottom:1rem;overflow:hidden}
.content .article .thumb{flex-shrink:0;margin-right:1.25rem;width:25%;max-width:217px;max-height:145px;border-radius:6px;overflow:hidden;position:relative}
.content .article .thumb img{width:100%;max-height:100%;display:block;transition:all 300ms ease-in-out}
.content .article .thumb .item-badge{
    position: absolute;
    left: 0;
    top: 0;
    font-size: .6875rem;
    line-height: 1.3;
    padding: .125rem .375rem;
    color: #fff;
    background-color: rgb(0 0 0/60%);
    border-top-left-radius: inherit;
    border-bottom-right-radius: 7px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    display:none
}
.content .article .thumb .item-badge.top {
  background: linear-gradient(to right,#ff6737,#ff9f46);
}
.content .article:hover .thumb img{transform:scale(1.05)}
.content .article .body{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;padding:.25rem 0}
.content .article .sticky{
    position: absolute;
    width: 100px;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #ff5d34;
    transform: rotate(-315deg);
    top: 10px;
    right: -25px;
    color: #fff;
    font-size: 13px;
    text-align: center;
    line-height: 28px;
}
.content .article h2{font-size:1.25rem;font-weight:400;line-height:1.4}
.content .article .excerpt{margin-top:1.25rem;overflow:hidden;text-overflow:ellipsis;color:#a2a6b1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.content .article .meta{display:flex;justify-content:space-between;margin-top:1.25rem;font-size:.8125rem}
aside{width:30%;flex:0 0 auto;padding:0 .5rem}
footer{background-color:var(--bg-header);padding:1.5rem 0}
footer .container{padding:0 .75rem}
footer .menu{display:flex;flex-wrap:wrap;margin-bottom:1rem}
footer .menu li{position:relative;margin:.25rem 1rem .25rem 0;padding:0 1rem 0 0}
footer .menu li::after {content:'';position:absolute;right:0;top:50%;width:4px;height:4px;border-radius:10px;background-color:#3858f6;transform:translate(50%, -50%)}
footer .menu li:last-child{margin-right:0;padding-right:0}
footer .menu li:last-child::after{display:none}
footer .copyright{color:#999;font-size:.8125rem}

.widget{padding:1.25rem;margin-bottom:1rem}
.widget h2{position:relative;font-weight:500;margin:0 0 1rem;padding-left:25px;color:var(--color-body);font-size:1.0625rem;line-height:1.4}
.widget-border{position:absolute;top:-3px;left:0;width:36px;height:30px;border-radius:4px}
.widget-border::before{content:'';position:absolute;left:0;top:50%;width:3px;height:18px;border-radius:10px;background-color:#3858f6;opacity:1;transform:translateY(-50%) rotate(15deg);transition:all .4s ease-in-out}
.widget-border::after{content:'';position:absolute;left:8px;top:50%;width:3px;height:16px;border-radius:10px;background-color:#3858f6;opacity:.6;transform:translateY(-50%) rotate(15deg);transition:all .4s ease-in-out}
.widget:hover .widget-border:before,.widget:hover .widget-border:after{transform:translateY(-50%) rotate(-165deg)}

.widget .article{display:flex;align-items:flex-start;margin:0 0 1.25rem}
.widget .article .body{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto}
.widget .article .title{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.widget .article .meta{margin-top:1rem;color:#a2a6b1;font-size:.8125rem}
.widget .article .thumb{width:33.33%;overflow:hidden;border-radius:5px;margin-left:.75rem}
.widget .article .thumb img{display:block;width:100%;max-height:100%;transition:all 300ms ease-in-out}
.widget .article:hover .thumb img{transform:scale(1.05)}

.list-overlay .list-item{position:relative;overflow:hidden;border-radius:8px;margin:0 0 1rem}
.media-content{transition:all 300ms ease-in-out}
.media-content img{display:block;width:100%}
.list-item:hover .media-content{transform:scale(1.05)}
.overlay-1 {width:100%;height:100%;background-color:#20232b;position:absolute;opacity:.4;top:0;left:0;transition:opacity .3s ease-in-out}
.list-item:hover .overlay-1{opacity:.6}
.list-overlay .list-content{display:block;position:absolute;left:0;right:0;top:0;bottom:0;padding:1rem 1.25rem;font-size:1.25rem;color:#fff;display:flex;align-items:center;z-index:1}
ul.contacts{margin:0 -.75rem;padding:0 1rem}
.contacts li{list-style:none;font-size:.875rem;padding:.75rem 0;border-top:1px solid rgba(38,38,38,0.05)}
ul.links{display:flex;flex-wrap:wrap;margin:0 -.75rem;padding:0 1rem}
.links li{list-style:none;flex:0 0 auto;width:50%;font-size:.875rem;padding:.75rem 0;border-top:1px solid rgba(38,38,38,0.05)}

.content .post{padding:2rem;margin-bottom:1rem}
.content .post h1{font-size:1.5rem;margin-bottom:1.5rem;font-weight:500}
.content .post-meta{display:flex;justify-content:space-between}
.content .post-content{margin-top:1.5rem;padding-top:1.5rem;font-size:1rem;line-height:1.85;word-break:normal;word-wrap:break-word}

@media (max-width: 1023px) {
    header{padding:.5rem 0}
    main{margin-top:4rem}
    main .row{flex-direction:column}
    .content,aside{width:100%}
    header nav{display:none}
    .content .article .thumb{width:33.33%}
    .widget .article .thumb,.widget .article .meta{display:none}
    footer .menu{justify-content:center}
    footer .copyright{text-align:center}
    #menubtn{display:inline-grid}
}
@media (max-width: 767px) {
    header .container{min-height:40px}
    header .logo{max-height:30px}
    main{margin-top:3rem}
    .tabmenu{display:none}
    .content .article .excerpt{display:none}
    .content .article h2{font-size:1rem}
    .content .article .sticky{display:none}
    .content .article .thumb .item-badge{display:block}
    .content .post{padding:.875rem}
}

:root{
    --bg-body: #f7f7fb;
	--color-body: #20232b;
    --bg-header: #fff;
    --bg-header-sticky: rgba(255, 255, 255, 0.8);
    --bg-sidebar: #f3f3f3;
    --bg-block: #fff;
    --border-block: transparent;
    --color-secondary: #424a57;
    --bg-secondary: #fff;
    --bg-light: #ececec;
    --border-light: #f3f3f3;
    --color-muted: #999;
    --color-muted-hover: #20232B;
    --border-1: #d2d2d2;
    --color-1: #424a57;
    --bg-1: #20232b;
}
.dark{
    --bg-body: #131313;
    --color-body: #ececec;
    --bg-header: #000;
    --bg-header-sticky: rgba(0, 0, 0, 0.6);
    --bg-sidebar: #131313;
    --bg-block: #212121;
    --border-block: #212121;
    --color-secondary: #f3f3f4;
    --bg-secondary: #212121;
    --bg-light: #3e3e3e;
    --border-light: #3d3e3e;
    --color-muted: #c8c9cc;
    --color-muted-hover: #ececec;
    --border-1: #2c2c2c;
    --color-1: #a2a6b1;
    --bg-1: #3858f6;
}







/* loading */

#page_loading{
	position:fixed;
	right:15px;
	bottom:15px;
	background:rgba(0,0,0,.35);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	padding:10px 14px;
	border-radius:30px;
	color:#fff;
	font-size:12px;
	z-index:9999;
	display:flex;
	align-items:center;
	gap:10px;
	box-shadow:0 0 20px rgba(0,0,0,.25);
	letter-spacing:.5px;
	transition:.5s
}

.spin{
	width:14px;
	height:14px;
	border:2px solid rgba(255,255,255,.2);
	border-top-color:#fff;
	border-radius:50%;
	display:inline-block;
	animation:page_spin .7s linear infinite
}

@keyframes page_spin{
	to{
		transform:rotate(360deg)
	}
}





/* player */

.player{
	text-align:center;
	background:var(--bg-block);
	border:1px solid var(--border-light);
	border-radius:14px;
	padding:1.25rem;
	box-shadow:0 4px 20px rgba(0,0,0,.03)
}

.player h3{
	text-align:left;
	font-size:1rem;
	font-weight:600;
	margin:0 0 1rem
}

.player-cover{
	display:none;
	height:180px;
	border-radius:12px;
	background:center/cover;
	margin-bottom:1rem;
	overflow:hidden;
	box-shadow:0 10px 25px rgba(0,0,0,.08)
}

.player-title{
	font-size:1rem;
	font-weight:600;
	line-height:1.5;
	color:var(--color-body)
}

.player-author{
	font-size:.8125rem;
	color:#999;
	margin-top:.25rem
}

.player-progress{
	margin-top:1rem
}

.player-bar{
	height:6px;
	border-radius:999px;
	background:var(--bg-light);
	overflow:hidden;
	cursor:pointer;
	position:relative
}

.player-bar span{
	display:block;
	height:100%;
	width:0;
	border-radius:999px;
	background:#3858f6;
	transition:width .15s linear
}

.player-time{
	display:flex;
	justify-content:space-between;
	margin-top:.5rem;
	font-size:.75rem;
	color:#999
}

.player-controls{
	display:flex;
	justify-content:center;
	gap:.75rem;
	margin-top:1.25rem
}

.player-controls a{
	width:44px;
	height:44px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:12px;
	background:var(--bg-light);
	border:1px solid var(--border-light);
	font-size:1rem;
	color:var(--color-body);
	transition:.2s
}

.player-controls a:hover{
	transform:translateY(-2px);
	background:#3858f6;
	border-color:#3858f6;
	color:#fff
}

.player-controls a.play{
	width:52px;
	height:52px;
	border-radius:16px;
	background:#3858f6;
	border-color:#3858f6;
	color:#fff;
	font-size:1.15rem;
	box-shadow:0 8px 20px rgba(56,88,246,.25)
}

.player-controls a.play:hover{
	transform:translateY(-3px) scale(1.03)
}

.player-volume{
	display:flex;
	align-items:center;
	gap:.75rem;
	margin-top:1.25rem
}

.player-volume span{
	font-size:.875rem;
	color:#999;
	flex-shrink:0
}

.player-volume input{
	flex:1;
	appearance:none;
	height:5px;
	border-radius:999px;
	background:var(--bg-light);
	outline:none
}

.player-volume input::-webkit-slider-thumb{
	appearance:none;
	width:14px;
	height:14px;
	border-radius:50%;
	background:#3858f6;
	border:0;
	cursor:pointer;
	box-shadow:0 0 0 3px rgba(56,88,246,.15)
}

.player-volume input::-moz-range-thumb{
	width:14px;
	height:14px;
	border-radius:50%;
	background:#3858f6;
	border:0;
	cursor:pointer
}

.dark .player{
	box-shadow:none
}

@media (max-width:767px){

	.player{
		padding:1rem
	}

	.player-cover{
		height:150px
	}

	.player-controls{
		gap:.5rem
	}

	.player-controls a{
		width:40px;
		height:40px
	}

	.player-controls a.play{
		width:48px;
		height:48px
	}

}






/* post */

.post-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1rem;
    margin-bottom:1rem;
}

.crumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    color:#999;
    font-size:.875rem;
}

.crumb a{color:#999}
.crumb a:hover{color:#3858f6}
.crumb span{margin:0 .5rem}

.post-tags{
    display:flex;
    flex-wrap:wrap;
    gap:.65rem;
    margin-top:3rem;
}

.post-tags a{
    display:block;
    padding:.38rem .85rem;
    border-radius:30px;
    font-size:.8125rem;
    line-height:1.2;
    color:var(--color-1);
    background:var(--bg-light);
    transition:all .2s;
}

.post-tags a:hover{
    background:#3858f6;
    color:#fff;
}

@media (max-width:767px){

    .post-tags{
        gap:.5rem;
    }

    .post-tags a{
        font-size:.75rem;
        padding:.35rem .75rem;
    }

}

.post h1{
    font-size:2rem;
    line-height:1.35;
    font-weight:600;
    margin-bottom:1rem;
    letter-spacing:-0.02em;
}

.post h1 a{
    color:var(--color-body);
    transition:all .2s;
}

.post h1 a:hover{
    color:#3858f6;
}


.post-meta{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:1rem;
    padding-bottom:1rem;
    border-bottom:1px solid var(--border-light);
}

.meta-left{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    color:#999;
    font-size:.875rem;
}

.meta-left .author{
    display:flex;
    align-items:center;
}

.meta-left .author img{
    width:40px;
    height:40px;
    border-radius:50%;
    margin-right:.5rem;
}

.meta-left .dot{
    width:4px;
    height:4px;
    border-radius:10px;
    background:#bbb;
    margin:0 .75rem;
}

.post-cover{
    margin:2rem 0;
    border-radius:10px;
    overflow:hidden;
}

.post-cover img{
    display:block;
    width:100%;
}

.post-note{
    padding:1rem 1.25rem;
    border-radius:8px;
    background:rgba(255,193,7,.08);
    border:1px solid rgba(255,193,7,.15);
    color:#d28b00;
    font-size:.875rem;
    margin-bottom:2rem;
}

.dark .post-note{
    background:rgba(255,193,7,.08);
    border-color:rgba(255,193,7,.12);
    color:#ffcb57;
}

.post-content{
    font-size:1rem;
    line-height:1.95;
    color:var(--color-body);
}

.post-content>*:first-child{margin-top:0}

.post-content h2{
    font-size:1.5rem;
    line-height:1.4;
    margin:2.5rem 0 1.25rem;
    font-weight:600;
}

.post-content h3{
    font-size:1.25rem;
    margin:2rem 0 1rem;
    font-weight:600;
}

.post-content p{
    margin:1.25rem 0;
}

.post-content a{
    color:#3858f6;
}

.post-content strong{
    font-weight:600;
}

.post-content img{
    max-width:100%;
    border-radius:8px;
}

.post-content blockquote{
    margin:1.5rem 0;
    padding:1rem 1.25rem;
    border-left:4px solid #3858f6;
    background:var(--bg-light);
    border-radius:0 8px 8px 0;
    color:#888;
}

.post-content ul,
.post-content ol{
    padding-left:1.5rem;
    margin:1.25rem 0;
}

.post-content ul li{
    list-style:disc;
    margin:.5rem 0;
}

.post-content ol li{
    list-style:decimal;
    margin:.5rem 0;
}

.post-content hr{
    border:0;
    border-top:1px solid var(--border-light);
    margin:2rem 0;
}

.post-content code{
    padding:.2rem .45rem;
    border-radius:5px;
    background:var(--bg-light);
    font-size:.875rem;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}

.post-content pre{
    overflow:auto;
    padding:1rem 1.25rem;
    border-radius:10px;
    background:#111;
    color:#f3f3f3;
    margin:1.5rem 0;
}

.post-content pre code{
    padding:0;
    background:none;
    color:inherit;
}

.info-box,
.warning-box,
.download-box{
    margin:1.5rem 0;
    border-radius:10px;
}

.info-box{
    position:relative;
    padding:1.25rem 1.5rem;
    background:rgba(56,88,246,.06);
    border:1px solid rgba(56,88,246,.1);
}

.info-box .label{
    display:inline-block;
    margin-bottom:.75rem;
    padding:.2rem .65rem;
    border-radius:20px;
    background:#3858f6;
    color:#fff;
    font-size:.75rem;
}

.warning-box{
    padding:1rem 1.25rem;
    background:rgba(255,87,34,.08);
    border:1px solid rgba(255,87,34,.12);
    color:#e06a3b;
}

.download-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1.5rem;
    background:linear-gradient(135deg,#3858f6,#6d5dfc);
    color:#fff;
}

.download-box .left{
    display:flex;
    flex-direction:column;
}

.download-box .left span{
    margin-top:.35rem;
    opacity:.8;
    font-size:.875rem;
}

.download-box .btn{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:42px;
    padding:0 1.25rem;
    border-radius:8px;
    background:#fff;
    color:#3858f6;
    font-weight:600;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
    margin:1.5rem 0;
}

.feature-item{
    display:flex;
    align-items:flex-start;
    padding:1.25rem;
    border-radius:10px;
    background:var(--bg-light);
}

.feature-item .icon{
    font-size:1.5rem;
    margin-right:1rem;
    line-height:1;
}

.feature-item .text{
    display:flex;
    flex-direction:column;
}

.feature-item .text strong{
    margin-bottom:.35rem;
}

.feature-item .text span{
    color:#999;
    font-size:.875rem;
}

.table{
    width:100%;
    border-collapse:collapse;
    margin:1.5rem 0;
    overflow:hidden;
    border-radius:10px;
}

.table th{
    background:var(--bg-light);
    font-weight:600;
}

.table th,
.table td{
    padding:.9rem 1rem;
    border-bottom:1px solid var(--border-light);
    text-align:left;
    font-size:.9375rem;
}

.post-actions{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:1rem;
    margin-bottom:1rem;
}

.action-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:120px;
    height:46px;
    border-radius:10px;
    background:var(--bg-block);
    border:1px solid var(--border-light);
    transition:all .2s;
}

.action-btn:hover{
    transform:translateY(-2px);
    background:#3858f6;
    border-color:#3858f6;
    color:#fff;
}

.post-nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
    margin-bottom:1rem;
}

.post-nav .nav-item{
    display:flex;
    flex-direction:column;
    padding:1.25rem;
    border-radius:10px;
    background:var(--bg-block);
    border:1px solid var(--border-block);
    transition:all .2s;
}

.post-nav a.nav-item:hover{
    border-color:var(--border-light);
}

.post-nav .nav-item span{
    color:#999;
    font-size:.8125rem;
    margin-bottom:.5rem;
}

.post-nav .nav-item strong{
    font-size:1rem;
    line-height:1.5;
    font-weight:500;
}

.related-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
}

.related-item{
    display:block;
    overflow:hidden;
    border-radius:10px;
    background:var(--bg-light);
}

.related-item img{
    display:block;
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    transition:all .3s;
}

.related-item:hover img{
    transform:scale(1.05);
}

.related-item .title{
    padding:1rem;
    font-size:.9375rem;
    line-height:1.6;
}

@media (max-width:1023px){

    .feature-grid,
    .related-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media (max-width:767px){

    .post h1{
        font-size:1.45rem;
        margin-bottom:1rem;
    }

    .post-cover{
        margin:1.25rem 0;
    }

    .post-meta{
        padding-bottom:1rem;
    }

    .meta-right{
        width:100%;
    }

    .meta-right .collect{
        justify-content:center;
    }

    .feature-grid,
    .related-grid,
    .post-nav{
        grid-template-columns:1fr;
    }

    .download-box{
        flex-direction:column;
        align-items:flex-start;
    }

    .download-box .btn{
        width:100%;
    }

    .table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

}





/* archive page */

.archive-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:1rem;
    margin-bottom:1rem;
    padding:1.25rem;
    background:var(--bg-block);
    border:1px solid var(--border-block);
    border-radius:10px;
}

.archive-title h1{
    font-size:1.6rem;
    margin-bottom:.25rem;
}

.archive-title p{
    color:#999;
    font-size:.875rem;
}

.pagination{
    display:flex;
    justify-content:center;
    gap:.5rem;
    margin-top:2rem;
    flex-wrap:wrap;
}

.pagination a,
.pagination span{
    padding:.4rem .75rem;
    border-radius:6px;
    background:var(--bg-block);
    border:1px solid var(--border-light);
    color:var(--color-1);
}

.pagination .current{
    background:#3858f6;
    color:#fff;
    border-color:#3858f6;
}

.pagination a:hover{
    border-color:#3858f6;
    color:#3858f6;
}

/* mobile */

@media (max-width:767px){

    .archive-head{
        flex-direction:column;
        align-items:flex-start;
    }

}





/* 404 page */

.error-404{
    text-align:center;
    padding:4rem 1rem 2rem;
}

.error-code{
    font-size:6rem;
    font-weight:700;
    color:#3858f6;
    letter-spacing:-2px;
    margin-bottom:1rem;
}

.error-title{
    font-size:1.75rem;
    font-weight:600;
    margin-bottom:.75rem;
}

.error-desc{
    color:#999;
    font-size:.95rem;
    max-width:420px;
    margin:0 auto 2rem;
    line-height:1.7;
}

.error-actions{
    display:flex;
    justify-content:center;
    gap:1rem;
    flex-wrap:wrap;
    margin-bottom:3rem;
}

.error-actions .btn{
    padding:.65rem 1.25rem;
    border-radius:8px;
    background:var(--bg-block);
    border:1px solid var(--border-light);
    color:var(--color-1);
    transition:all .2s;
}

.error-actions .btn:hover{
    border-color:#3858f6;
    color:#3858f6;
}

.error-actions .btn.primary{
    background:#3858f6;
    color:#fff;
    border-color:#3858f6;
}

.error-actions .btn.primary:hover{
    background:#2f49d8;
}

.error-suggest{
    margin-top:2rem;
}

.suggest-list{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
}

.suggest-item{
    display:block;
    padding:1rem;
    border-radius:10px;
    background:var(--bg-block);
    border:1px solid var(--border-light);
    transition:all .2s;
}

.suggest-item:hover{
    transform:translateY(-3px);
    border-color:#3858f6;
}

.suggest-item .title{
    font-size:.95rem;
    margin-bottom:.5rem;
    line-height:1.5;
}

.suggest-item .meta{
    font-size:.8rem;
    color:#999;
}

/* mobile */

@media (max-width:767px){

    .error-code{
        font-size:4rem;
    }

    .error-title{
        font-size:1.35rem;
    }

    .suggest-list{
        grid-template-columns:1fr;
    }

}




/* page */

.page{
    background:var(--bg-block);
    border:1px solid var(--border-light);
    border-radius:10px;
    overflow:hidden;
}

.page-head{
    padding:2rem 2rem 1.5rem;
}

.page-head h1{
    font-size:2rem;
    line-height:1.35;
    margin:1rem 0 .75rem;
    font-weight:600;
    letter-spacing:-0.02em;
}

.page-desc{
    color:#999;
    font-size:.95rem;
    line-height:1.7;
}

.page-cover img{
    display:block;
    width:100%;
}

.page-content{
    padding:2rem;
    font-size:1rem;
    line-height:1.95;
}

.page-content>*:first-child{
    margin-top:0;
}

.page-content h2{
    font-size:1.5rem;
    line-height:1.4;
    margin:2.5rem 0 1.25rem;
    font-weight:600;
}

.page-content h3{
    font-size:1.25rem;
    margin:2rem 0 1rem;
    font-weight:600;
}

.page-content p{
    margin:1.25rem 0;
}

.page-content a{
    color:#3858f6;
}

.page-content strong{
    font-weight:600;
}

.page-content img{
    max-width:100%;
    border-radius:8px;
}

.page-content blockquote{
    margin:1.5rem 0;
    padding:1rem 1.25rem;
    border-left:4px solid #3858f6;
    background:var(--bg-light);
    border-radius:0 8px 8px 0;
    color:#888;
}

.page-content ul,
.page-content ol{
    padding-left:1.5rem;
    margin:1.25rem 0;
}

.page-content ul li{
    list-style:disc;
    margin:.5rem 0;
}

.page-content ol li{
    list-style:decimal;
    margin:.5rem 0;
}

.page-content hr{
    border:0;
    border-top:1px solid var(--border-light);
    margin:2rem 0;
}

.page-content table{
    width:100%;
    border-collapse:collapse;
    margin:1.5rem 0;
}

.page-content table th{
    background:var(--bg-light);
    font-weight:600;
}

.page-content table th,
.page-content table td{
    padding:.9rem 1rem;
    border-bottom:1px solid var(--border-light);
    text-align:left;
}

.page-content code{
    padding:.2rem .45rem;
    border-radius:5px;
    background:var(--bg-light);
    font-size:.875rem;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}

.page-content pre{
    overflow:auto;
    padding:1rem 1.25rem;
    border-radius:10px;
    background:#111;
    color:#f3f3f3;
    margin:1.5rem 0;
}

.page-content pre code{
    padding:0;
    background:none;
    color:inherit;
}

@media (max-width:767px){

    .page-head{
        padding:1.25rem 1rem 1rem;
    }

    .page-head h1{
        font-size:1.6rem;
    }

    .page-content{
        padding:1rem;
        font-size:.95rem;
    }

    .page-content h2{
        font-size:1.3rem;
    }

    .page-content table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

}



/* ================================
   Featured Posts Widget
================================ */

.featured-post-list{
	display:flex;
	flex-direction:column;
	gap:14px;
    margin:2rem 0 1.5rem;
}

.featured-post-item{
	display:flex;
	align-items:center;
	gap:14px;
	border-radius:16px;
	background:var(--card);
	border:1px solid var(--border);
	text-decoration:none;
}

.featured-post-num{
	width:30px;
	height:30px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	font-size:13px;
	font-weight:700;
	background:#3b82f612;
	color:#3b82f6;
	border:1px solid #3b82f622;
}

.featured-post-body{
	min-width:0;
	flex:1;
}

.featured-post-title{
	font-size:14px;
	font-weight:400;
	line-height:1.75;
	color:var(--text);
	word-break:break-word;
	transition:color .2s;
}

.featured-post-item:hover .featured-post-title{
	color:#3b82f6;
}

/* dark */

body.dark .featured-post-num{
	background:#3b82f622;
	border-color:#3b82f633;
}