*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}

body{
	font:15px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;
	color:#fff;background:#222 center/cover fixed;
	overflow-x:hidden;position:relative;
	transition:opacity .5s,background-image .6s
}

body:after1{
	content:"";position:fixed;inset:0;z-index:-1;
	background:linear-gradient(to bottom,rgba(0,0,0,.1),rgba(0,0,0,.5))
}

a{text-decoration:none;color:#fff}

a.external::after{
  content: "";display:inline-block;
  margin-top: -1px;
  margin-left: 4px;
  width: 11px;
  height: 11px;
  background: currentColor;
  color: var(--t-c-text-3);
  flex-shrink: 0;
  --icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");
  -webkit-mask-image:var(--icon);mask-image:var(--icon);
}

.wrap{width:min(1200px,94%);margin:auto}

/* nav */

.nav{
	margin:28px auto 0;padding:16px 26px;border-radius:24px;
	display:flex;align-items:center;justify-content:space-between;
	background:rgba(0,0,0,.3);
	backdrop-filter:blur(20px) saturate(160%);
	-webkit-backdrop-filter:blur(20px) saturate(160%);
	border:1px solid rgba(255,255,255,.12);
	box-shadow:6px 6px 10px rgba(5,5,5,.5);
	color:#fff;text-shadow:1px 1px 0 #000
}

.logo{font-size:24px;font-weight:700;letter-spacing:1px}

.logo a{transition:.25s}

.logo a:hover{opacity:.9}

.menu{display:flex;gap:22px}

.menu a{opacity:.82;transition:.25s}

.menu a:hover{opacity:1;transform:translateY(-2px)}

/* main */

.main{
	display:grid;
	grid-template-columns:minmax(0,1fr) 320px;
	gap:28px;margin-top:60px;
	padding-bottom:80px;align-items:start
}

/* posts */

.posts{display:flex;flex-direction:column;gap:24px}

.post{
	padding:28px;border-radius:28px;
	background:rgba(0,0,0,.3);
	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);
	border:1px solid rgba(255,255,255,.12);
	box-shadow:6px 6px 10px rgba(5,5,5,.5);
	color:#fff;text-shadow:1px 1px 0 #000;
	transition:.3s
}

.post:hover{
	transform:translateY(-5px);
	box-shadow:6px 14px 20px rgba(5,5,5,.8)
}

.post-cover-link{
	display:block;border-radius:20px;
	overflow:hidden;margin-bottom:22px
}

.post-cover{
	height:240px;background-size:cover;
	background-position:center;transition:.45s
}

.post-cover-link:hover .post-cover{transform:scale(1.05)}

.post-title{display:inline-block;transition:.25s}

.post-title:hover{transform:translateX(4px);opacity:.92}

.meta{
	font-size:13px;
	color:rgba(255,255,255,.58);
	margin-bottom:12px
}

.post h2{
	font-size:30px;
	margin-bottom:14px;
	line-height:1.3
}

.post p{color:rgba(255,255,255,.9)}

.readmore{
	display:inline-block;
	margin-top:22px;
	padding:11px 18px;
	border-radius:14px;
	background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.12);
	transition:.25s
}

.readmore:hover{
	background:rgba(255,255,255,.15);
	transform:translateY(-2px)
}

/* pagination */

.pagination{
	display:flex;flex-wrap:wrap;
	justify-content:center;
	gap:12px;margin-top:10px
}

.pagination a,
.pagination span{
	min-width:46px;height:46px;
	padding:0 16px;
	display:flex;align-items:center;
	justify-content:center;
	border-radius:16px;
	background:rgba(255,255,255,.08);
	backdrop-filter:blur(12px);
	border:1px solid rgba(255,255,255,.12);
	transition:.25s
}

.pagination a:hover{
	transform:translateY(-3px);
	background:rgba(255,255,255,.16)
}

.pagination .active{background:rgba(255,255,255,.22)}

.pagination .dots{
	min-width:auto;padding:0 8px;
	background:none;border:none
}

/* sidebar */

.sidebar{display:flex;flex-direction:column;gap:24px}

.widget{
	padding:24px;border-radius:26px;
	background:rgba(0,0,0,.3);
	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);
	border:1px solid rgba(255,255,255,.12);
	box-shadow:6px 6px 10px rgba(5,5,5,.5);
	color:#fff;text-shadow:1px 1px 0 #000
}

.widget h3{font-size:18px;margin-bottom:18px}

.profile{text-align:center}

.profile img{
	width:96px;height:96px;
	border-radius:50%;
	margin:auto auto 16px
}

.profile p{
	font-size:14px;
	color:rgba(255,255,255,.9)
}

/* background switch */

.bgctrl h3{
	margin-bottom:16px
}

.bgbtns{
	display:flex;
	gap:12px
}

.bgbtns a{
	flex:1;

	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;

	height:48px;

	border-radius:16px;

	background:rgba(255,255,255,.06);

	border:1px solid rgba(255,255,255,.08);

	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);

	font-size:14px;

	letter-spacing:.3px;

	transition:.25s
}

.bgbtns a:hover{
	transform:translateY(-2px);

	background:rgba(255,255,255,.14);

	box-shadow:0 8px 18px rgba(0,0,0,.2)
}

.bgbtns span{
	width:26px;
	height:26px;

	display:flex;
	align-items:center;
	justify-content:center;

	font-size:12px;

	flex-shrink:0
}

@media(max-width:680px){

	.bgbtns{
		gap:8px
	}

	.bgbtns a{
		height:42px;
		font-size:12px;
		padding:0 6px
	}

	.bgbtns span{
		width:22px;
		height:22px;
		font-size:11px
	}
}

/* tags */

.tags{
	display:flex;
	flex-wrap:wrap;
	gap:10px
}

.tags a{
	padding:8px 15px;
	border-radius:999px;
	font-size:13px;
	background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.12);
	transition:.25s
}

.tags a:hover{
	transform:translateY(-2px);
	background:rgba(255,255,255,.18);
	box-shadow:0 6px 16px rgba(0,0,0,.18)
}

/* friends */

.friends{
	display:flex;
	flex-direction:column;
	gap:14px
}

.friends a{
	display:flex;
	align-items:center;
	gap:14px;
	padding:14px 16px;
	border-radius:18px;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.08);
	transition:.25s
}

.friends a:hover{
	transform:translateY(-2px);
	background:rgba(255,255,255,.12)
}

.friends span{
	width:36px;height:36px;
	display:flex;align-items:center;
	justify-content:center;
	border-radius:12px;
	background:rgba(255,255,255,.08);
	font-size:16px;flex-shrink:0
}

.friends b{
	display:block;
	font-size:15px;
	font-weight:600
}

.friends p{
	font-size:12px;
	color:rgba(255,255,255,.75);
	margin-top:2px
}

/* footer */

.footer{
	text-align:center;
	padding:20px 0 60px;
	color:rgba(255,255,255,.75);
	text-shadow:1px 1px 0 #000
}

.footer a{
	color:rgba(255,255,255,.72);
	border-bottom:1px solid transparent;
	transition:.25s
}

.footer a:hover{
	color:#fff;
	border-color:rgba(255,255,255,.55)
}


/* article */

.article-page{
	padding:34px;
	overflow:hidden
}

.article-top{
	margin-bottom:28px
}

.article-title{
	font-size:42px!important;
	line-height:1.22!important;
	margin:14px 0 18px!important;
	letter-spacing:.5px
}

.article-desc{
	font-size:16px;
	line-height:1.9;
	color:rgba(255,255,255,.62);
	padding-left:16px;
	border-left:3px solid rgba(255,255,255,.18)
}

.article-cate{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:28px;
	padding:0 14px;
	border-radius:999px;
	background:rgba(255,255,255,.1);
	font-size:12px;
	color:#fff
}

.article-page .meta{
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;
	font-size:13px;
	color:rgba(255,255,255,.58)
}

.article-page .dot{
	opacity:.4
}

.article-cover{
	height:420px;
	border-radius:28px;
	position:relative;
	overflow:hidden;
	margin-bottom:36px;
	background:center/cover no-repeat;
	box-shadow:0 20px 40px rgba(0,0,0,.28)
}

.article-cover-mask{
	position:absolute;
	inset:0;
	background:
	linear-gradient(
		to bottom,
		rgba(255,255,255,.02),
		rgba(0,0,0,.22)
	)
}

.article-content{
	font-size:16px;
	line-height:2;
	color:rgba(255,255,255,.82)
}

.article-content h2,
.article-content h3,
.article-content h4{
	margin:42px 0 18px;
	line-height:1.4;
	color:#fff
}

.article-content h2{
	font-size:30px
}

.article-content h3{
	font-size:24px
}

.article-content p{
	margin:18px 0
}

.article-content a{
	color:#fff;
	border-bottom:1px solid rgba(255,255,255,.22);
	transition:.25s
}

.article-content a:hover{
	border-color:#fff
}

.article-content img{
	display:block;
	max-width:100%;
	border-radius:22px;
	margin:28px auto;
	box-shadow:0 10px 30px rgba(0,0,0,.25)
}

.article-content blockquote{
	margin:28px 0;
	padding:18px 22px;
	border-radius:20px;
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.08);
	color:rgba(255,255,255,.72)
}

.article-content code{
	padding:3px 8px;
	border-radius:8px;
	background:rgba(255,255,255,.08);
	font-size:14px
}

.article-content pre{
	margin:24px 0;
	padding:22px;
	border-radius:24px;
	overflow:auto;
	background:rgba(0,0,0,.28);
	border:1px solid rgba(255,255,255,.08)
}

.article-content pre code{
	padding:0;
	background:none
}

.article-content ul,
.article-content ol{
	padding-left:24px;
	margin:20px 0
}

.article-content li{
	margin:10px 0
}

.article-bottom{
	margin-top:46px;
	padding-top:26px;
	border-top:1px solid rgba(255,255,255,.08)
}

.article-back{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:48px;
	padding:0 22px;
	border-radius:16px;
	background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.12);
	transition:.25s
}

.article-back:hover{
	transform:translateY(-2px);
	background:rgba(255,255,255,.16)
}

/* mobile */

@media(max-width:680px){

	.article-page{
		padding:24px
	}

	.article-title{
		font-size:32px!important
	}

	.article-cover{
		height:240px;
		border-radius:22px
	}

	.article-content{
		font-size:15px
	}

	.article-content h2{
		font-size:24px
	}

	.article-content h3{
		font-size:20px
	}
}

/* about */

.about-page{
	padding:34px;
	overflow:hidden
}

.about-hero{
	display:flex;
	align-items:center;
	gap:28px;
	margin-bottom:34px
}

.about-avatar{
	width:120px;
	height:120px;
	border-radius:50%;
	background:center/cover;
	flex-shrink:0;
	box-shadow:0 10px 30px rgba(0,0,0,.35);
	border:2px solid rgba(255,255,255,.12)
}

.about-intro{
	flex:1
}

.about-desc{
	font-size:16px;
	line-height:1.9;
	color:rgba(255,255,255,.68);
	margin-top:14px
}

.about-cover{
	position:relative
}

.about-cover-text{
	position:absolute;
	left:40px;
	bottom:34px;
	z-index:2
}

.about-cover-title{
	font-size:46px;
	font-weight:700;
	letter-spacing:2px;
	text-shadow:0 4px 20px rgba(0,0,0,.35)
}

.about-cover_sub{
	margin-top:8px;
	font-size:14px;
	letter-spacing:2px;
	color:rgba(255,255,255,.72)
}

.about-content h2{
	margin:46px 0 20px
}

.about-tags{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	margin-top:10px
}

.about-tags span{
	padding:10px 18px;
	border-radius:999px;
	background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.12);
	font-size:14px;
	color:rgba(255,255,255,.82);
	transition:.25s
}

.about-tags span:hover{
	transform:translateY(-2px);
	background:rgba(255,255,255,.16)
}

.about-grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:20px;
	margin-top:12px
}

.about-card{
	padding:24px;
	border-radius:24px;
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.08);
	transition:.3s
}

.about-card:hover{
	transform:translateY(-4px);
	background:rgba(255,255,255,.08)
}

.about-icon{
	width:52px;
	height:52px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:18px;
	background:rgba(255,255,255,.08);
	font-size:22px;
	margin-bottom:18px
}

.about-card h3{
	font-size:20px;
	margin-bottom:10px
}

.about-card p{
	font-size:14px;
	line-height:1.9;
	color:rgba(255,255,255,.65)
}

/* mobile */

@media(max-width:680px){

	.about-page{
		padding:24px
	}

	.about-hero{
		flex-direction:column;
		text-align:center;
		gap:22px
	}

	.about-cover-title{
		font-size:32px
	}

	.about-cover-text{
		left:24px;
		bottom:24px
	}

	.about-grid{
		grid-template-columns:1fr
	}
}


/* project */

.project-page{
	padding:34px;
	overflow:hidden
}

.project-desc{
	margin-top:14px;
	font-size:16px;
	line-height:1.9;
	color:rgba(255,255,255,.68)
}

.project-banner{
	height:300px;
	margin:34px 0 38px;
	border-radius:30px;
	position:relative;
	overflow:hidden;
	background:center/cover;
	box-shadow:0 20px 40px rgba(0,0,0,.28)
}

.project-banner-text{
	position:absolute;
	left:40px;
	bottom:34px;
	z-index:2
}

.project-banner-title{
	font-size:40px;
	font-weight:700;
	line-height:1.2;
	text-shadow:0 4px 20px rgba(0,0,0,.35)
}

.project-banner-sub{
	margin-top:10px;
	font-size:14px;
	letter-spacing:2px;
	color:rgba(255,255,255,.72)
}

.project-list{
	display:flex;
	flex-direction:column;
	gap:24px
}

.project-card{
	padding:28px;
	border-radius:28px;
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.08);
	transition:.3s
}

.project-card:hover{
	transform:translateY(-4px);
	background:rgba(255,255,255,.08)
}

.project-head{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:20px
}

.project-domain{
	display:inline-flex;
	align-items:center;
	height:30px;
	padding:0 14px;
	border-radius:999px;
	background:rgba(255,255,255,.08);
	font-size:12px;
	margin-bottom:14px;
	letter-spacing:.5px
}

.project-card h2{
	font-size:30px;
	line-height:1.3
}

.project-progress-text{
	font-size:22px;
	font-weight:700;
	color:rgba(255,255,255,.82)
}

.project-progress{
	height:8px;
	margin:22px 0 20px;
	border-radius:999px;
	background:rgba(255,255,255,.08);
	overflow:hidden
}

.project-progress span{
	display:block;
	height:100%;
	border-radius:999px;
	background:rgba(255,255,255,.85)
}

.project-card p{
	font-size:15px;
	line-height:1.95;
	color:rgba(255,255,255,.7)
}

.project-tags{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	margin-top:22px
}

.project-tags span{
	padding:9px 16px;
	border-radius:999px;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.08);
	font-size:13px;
	color:rgba(255,255,255,.78);
	transition:.25s
}

.project-tags span:hover{
	transform:translateY(-2px);
	background:rgba(255,255,255,.14)
}

.project-more{
	padding:42px 30px;
	border-radius:30px;
	text-align:center;
	background:
	linear-gradient(
		135deg,
		rgba(255,255,255,.06),
		rgba(255,255,255,.03)
	);
	border:1px solid rgba(255,255,255,.08)
}

.project-more-icon{
	width:70px;
	height:70px;
	margin:auto auto 20px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:24px;
	background:rgba(255,255,255,.08);
	font-size:28px
}

.project-more h2{
	font-size:32px;
	margin-bottom:16px
}

.project-more p{
	font-size:15px;
	line-height:1.9;
	color:rgba(255,255,255,.65)
}

.project-more a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:52px;
	padding:0 26px;
	margin-top:24px;
	border-radius:18px;
	background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.12);
	transition:.25s
}

.project-more a:hover{
	transform:translateY(-2px);
	background:rgba(255,255,255,.16)
}

/* mobile */

@media(max-width:680px){

	.project-page{
		padding:24px
	}

	.project-banner{
		height:220px;
		border-radius:24px
	}

	.project-banner-text{
		left:24px;
		bottom:24px
	}

	.project-banner-title{
		font-size:28px
	}

	.project-head{
		flex-direction:column;
		gap:14px
	}

	.project-card h2{
		font-size:24px
	}

	.project-progress-text{
		font-size:18px
	}

	.project-more h2{
		font-size:26px
	}
}


/* loading */

#bg_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:bgspin .7s linear infinite
}

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

/* tablet */

@media(max-width:900px){

	.main{
		grid-template-columns:1fr;
		margin-top:35px
	}

	.posts{order:1}

	.sidebar{order:2}

	.post h2{font-size:24px}
}

/* mobile */

@media(max-width:680px){

	.nav{
		flex-direction:column;
		gap:14px;
		padding:18px
	}

	.menu{
		flex-wrap:wrap;
		justify-content:center
	}

	.main{margin-top:28px}

	.post{padding:22px}

	.post-cover{height:180px}

	.footer .row{display:block}

	#bg_loading{
		left:12px;right:12px;
		bottom:12px;
		justify-content:center
	}
}


/* player */

.player{text-align:center}

.player h3{text-align:left}

.player-cover{
    display:none;
	height:180px;
	border-radius:20px;
	background:center/cover;
	margin-bottom:16px;
	box-shadow:0 10px 25px rgba(0,0,0,.3)
}

.player-title{
	font-size:16px;
	font-weight:700;
	line-height:1.5
}

.player-author{
	font-size:13px;
	color:rgba(255,255,255,.6);
	margin-top:2px
}

.player-progress{
	margin-top:16px
}

.player-bar{
	height:6px;
	border-radius:999px;
	background:rgba(255,255,255,.12);
	overflow:hidden;
	cursor:pointer
}

.player-bar span{
	display:block;
	height:100%;
	width:0;
	border-radius:999px;
	background:rgba(255,255,255,.88)
}

.player-time{
	display:flex;
	justify-content:space-between;
	margin-top:8px;
	font-size:12px;
	color:rgba(255,255,255,.6)
}

.player-controls{
	display:flex;
	justify-content:center;
	gap:12px;
	margin-top:18px
}

.player-controls a{
	width:44px;
	height:44px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:16px;
	background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.12);
	font-size:18px;
	transition:.25s
}

.player-controls a:hover{
	transform:translateY(-2px);
	background:rgba(255,255,255,.18)
}

.player-volume{
	display:flex;
	align-items:center;
	gap:10px;
	margin-top:18px
}

.player-volume span{
	font-size:14px;
	opacity:.8
}

.player-volume input{
	flex:1;
	appearance:none;
	height:5px;
	border-radius:999px;
	background:rgba(255,255,255,.12);
	outline:none
}

.player-volume input::-webkit-slider-thumb{
	appearance:none;
	width:14px;
	height:14px;
	border-radius:50%;
	background:#fff;
	cursor:pointer
}