@import "//static.nlrdev.top/font-service/misans/font.css";

/* 公用 */
@font-face{font-family:'icon';src:url('//static.nlrdev.top/font-service/remixicon/remixicon.woff2');}
html{background:#F9F9FB;font-size:16px;user-select:none;-webkit-user-select:none;font-family:'misans', '微软雅黑';}
body{margin:0;}
font{font-family:icon;}
img{pointer-events:none;}
*{box-sizing:border-box;scrollbar-width:none;outline:none;-webkit-tap-highlight-color:transparent;}
*[hidden]{display:none!important;}
::-webkit-scrollbar{display:none;}
a{color:#0292FE;text-decoration:none;cursor:default;}
a:hover{text-decoration:underline;}
a:active{text-decoration:underline;opacity:.8;}
button{background:#0292FE;color:white;border:0;border-radius:5px;padding:5px 20px;font-size:1rem;transition:filter .2s;font-family:inherit;}
button.sub{background:#E8F5FF;color:#0292FE;}
button:hover{filter:brightness(.95);}
button:active{filter:brightness(.9);}
button:disabled{filter:grayscale(1)!important;}

/* 加载 */
#loadingBar{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:30;}
#loadingBar::before,#loading::after{content:"";height:3px;border-radius:0 0 3px 3px;background:white;position:fixed;display:block;top:0;animation:loadingBar1 1s infinite;transition:background .2s;}
.scrolled #loadingBar::before,.scrolled #loading::after{background:#0292FE;}
#loadingBar::after{animation:loadingBar2 1s .6s infinite;}
@keyframes loadingBar1{from{left:-300px;width:300px;}to{left:100vw;width:100px;}}
@keyframes loadingBar2{from{left:-100px;width:100px;}to{left:100vw;width:300px;}}


/* 顶栏 */
header{position:fixed;top:0;left:0;display:flex;padding:20px max(calc(50vw - 410px), 15px);align-items:center;width:100%;background:#F9F9FBF3;border-bottom:1px solid #E5E6EB;transition:padding .3s,border .3s;z-index:10;backdrop-filter:blur(10px);}
header>img{height:30px;margin-left:10px;}
header>#navigator{width:100%;justify-content:flex-end;display:flex;align-items:center;}
header>#navigator>a{margin:0 5px;padding:0 5px;height:35px;border-radius:20px;font-size:1.15em;transition:color .3s,background .3s,padding .3s;text-decoration:none;color:black;display:flex;align-items:center;white-space:nowrap;}
header>#navigator>a.active{background:#0292FE;color:white;padding:0 20px;font-weight:bold;}
header>#navigator>a.active>img{filter:invert(1);}
header:not(.scrolled header){background:transparent!important;padding:30px 20px;border-bottom:1px solid transparent!important;backdrop-filter:none;transition:padding .3s,border .3s,background .3s,padding .3s;}
header:not(.scrolled header)>img{filter:brightness(114514);}
header:not(.scrolled header)>#navigator>a{color:white;}
header:not(.scrolled header)>#navigator>a.active{background:white;color:#0292FE;}
header>#navigatorSwitch{display:none;}

/* 顶部 */
.hero{height:500px;position:relative;overflow:hidden;background:#0292FE;}
.hero>.background{position:absolute;top:0;left:-1px;width:calc(100% + 2px);height:500px;object-fit:cover;}
.hero>.intro{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;width:fit-content;height:fit-content;text-align:center;}
.hero>.intro>img{width:300px;}
.hero>.intro>img.brand{filter:invert(1);}
.hero.s{height:100px;}

/* 底栏 */
footer{display:flex;align-items:center;padding:20px max(calc(50vw - 400px), 15px);width:100%;background:#0292FE;white-space:nowrap;color:white;font-size:.9em;}
footer>.intro{width:100%;}
footer>.intro>img{height:25px;margin:0 2px 2px 2px;}
footer>.intro>div{display:flex;align-items:center;}
footer>.intro>div>img{width:20px;height:20px;border-radius:50%;margin:0 5px;}
footer>.intro>div>a{color:white;}
footer>.links{display:flex;align-items:flex-start;}
footer>.links>div{margin-left:20px;white-space:nowrap;}
footer>.links>div>b{font-size:1.05em;margin-bottom:5px;}
footer>.links>div>b,footer>.links>div>a{display:block;color:white;}
footer>.links>div>.qrcode{width:76px;height:76px;border-radius:5px;background:white;}
footer>.links>div>.qrcode>img{width:60px;height:60px;margin:8px;pointer-events:all;}

/* 主体 */
main{padding:30px max(calc(50vw - 400px), 25px) 100px max(calc(50vw - 400px), 25px);width:100%;min-height:calc(100vh - 200px);}
main.passage{text-align:justify;font-size:1.1em;}
main.passage h2{border-bottom:1px solid #ededed;padding:5px 0;margin:8px 0;margin-top:15px;}
main.passage h1{text-align:center;}
main.passage el{display:block;height:5px;}
main.passage div{font-size:1.2em;}
main.passage pre{background:rgba(0,0,0,.05);font-size:.8em;font-family:'Source Code Pro','Consolas',monospace;padding:5px 10px;user-select:text;width:100%;border-radius:5px;overflow:scroll;tab-size:3;margin:5px 0;}
main.passage code{user-select:text;}
main.passage .tableContainer{height:fit-content;width:100%;overflow-x:scroll;overflow-y:hidden;border:1px solid #ededed;border-radius:5px;font-size:.9em;}
main.passage .tableContainer table{font-weight:normal;border-spacing:0;border-collapse:collapse;white-space:nowrap;min-width:100%;margin:-1px;}
main.passage .tableContainer table th,main.passage .tableContainer table td{border:1px solid #ededed;border-right:0;padding:5px 15px;}

/* 手机 */
@media screen and (max-width: 750px) {
	header>#navigator{position:fixed;background:#F9F9FB;height:100vh;width:100%;top:100vh;left:0;padding-top:75px;flex-direction:column;z-index:-1;transition:top .3s;justify-content:flex-start;}
	header>#navigator>a{border-radius:5px;justify-content:flex-start;width:calc(100% - 20px);font-weight:normal!important;padding:15px!important;height:fit-content;position:relative;}
	header>#navigator>a.active::after{background:white;width:10px;height:10px;border-radius:50%;content:"";position:absolute;right:15px;}
	header>#navigatorSwitch{display:block;padding:5px;color:white;font-size:1.5em;width:100%;text-align:right;transition:color .2s;}
	.scrolled header>#navigatorSwitch{color:black;}
	.navShow header{border-color:transparent;padding:20px 15px!important;}
	.navShow header>img{filter:none!important;transition:filter .25s;}
	.navShow header>#navigator{top:0;}
	.navShow header>#navigator>a{color:black!important;}
	.navShow header>#navigator>a.active{background:#0292FE!important;color:white!important;}
	.navShow header>#navigator>a.active>img{filter:invert(1)!important;}
	.navShow header>#navigatorSwitch{color:#0292FE!important;}
	footer{flex-direction:column;text-align:center;}
	footer>.intro{margin:10px 0 20px 0;}
	footer>.intro>div{justify-content:center;}
	footer>.links>div{text-align:left;margin:0 10px;}
}

@media (prefers-color-scheme: dark) {
	html{background:black;color:white;}
	main.passage h2{border-color:#202020;}
	header{background:#0E0E0EF3;border-bottom:1px solid #202020;}
	.navShow header>#navigator>a{color:white!important;}
	main.passage .tableContainer table th,main.passage .tableContainer table td,.tableContainer{border-color:#202020!important;}
	@media screen and (max-width: 750px) {
		header>#navigator{background:#0E0E0E;}
		.scrolled header>#navigatorSwitch{color:white;}
		.navShow header:not(.scrolled header)>img{filter:brightness(114514)!important;}
	}
	@media screen and (min-width: 751px) {
		header>#navigator>a{color:white;}
	}
}