:root{

	--遮罩颜色: #0003;
	--透明背景颜色: #fffb;

	--内容颜色: #444;
	--背景颜色: #fff;
	--边框颜色: #bbb;

	--填充色块: #ccc;
	--填充线条: #444;

	color: var(--内容颜色);
	background-color: var(--背景颜色);
}

@media (prefers-color-scheme: dark){
:root{
	--遮罩颜色: #0008;
	--透明背景颜色: #0000;

	--内容颜色: #ccc;
	--背景颜色: #111;
	--边框颜色: #444;

	--填充色块: #333;
	--填充线条: #ddd;
}
}

html{
	height: 100%;
	width: 100%;
}

body{
	margin: 0;
	overflow: hidden;
}

#正文 img,.索引内容内框 img{
	background: var(--填充色块);
}


.width-min-1280 #目录_外{
	left: 4px;
}

.width-min-1280 #目录按钮{
	display:none;
}
.width-min-1280 #正文_留白,.width-min-1280 #加载提示,.width-min-1280 #失败提示{
	padding-left: 252px;
}

/*
.width-min-1280 #首次提示{
	margin-left: 252px;
}
*/
.width-min-1280 #目录遮罩{
	display: none;
}


.width-min-1280 #返回按钮{
	left: 64px;
}

.width-min-1280 #返回按钮_1{
	transform: rotate(-34deg);
	width: 10px;
	top: 3px;
}

.width-min-1280 #返回按钮_3{
	transform: rotate(34deg);
	width: 10px;
	top: -3px;
}




.width-max-1280 #目录按钮{
	display:block;
}

.width-max-1280 #正文_内容{
	padding-top: 64px;
}



#外框{
	overflow: hidden;
}

#索引,#正文{
	overflow-y: scroll;
    overflow-x: hidden;
}

#首次提示_外.提示_显示{
	filter: blur(0);
}

#首次提示_外{
    overflow: hidden;
	height: 0;
	filter: blur(32px);
	transition: height 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) 0.1s, filter 0.5s;
}


#首次提示{
	border: 1px;
	border-color: var(--边框颜色);
	border-style: solid;
	padding:16px;
}




#背景{
	z-index:2;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

#失败提示{
	margin: 16px;
	margin-top: 64px;
	color: red;
	display: none;
}
#失败提示.显示{
	display: block;
}

#加载提示{
	padding: 0 18px;
}

#返回按钮,#目录按钮{
	left:-8px;
	top:-4px;
	width: 28px;
	height:28px;
	padding:12px;
	cursor:pointer;
	position:fixed;
	z-index:2;
	transition:left 0.5s;
}


#目录按钮>div,#返回按钮>div{
	transition: width 0.5s, top 0.5s, transform 0.5s;
	height:2px;
	width: 20px;
	margin: 4px;
	position: relative;
	top: 0px;
}

#目录按钮_1,#目录按钮_3,
#返回按钮_1,#返回按钮_2,#返回按钮_3{
	/*background-color: rgba(0,0,0,0.7);*/
	background-color: var(--填充线条);
}

.已显示目录 #返回按钮{
	left: 64px;
}

.已显示目录 #返回按钮_1{
	transform: rotate(-34deg);
	width: 10px;
	top: 3px;
}

.已显示目录 #返回按钮_3{
	transform: rotate(34deg);
	width: 10px;
	top: -3px;
}



.已显示目录 #目录按钮_1{
	transform: rotate(-45deg);
	top: 6px;
}

.已显示目录 #目录按钮_3{
	transform: rotate(45deg);
	top: -6px;
}


#目录_外{
	top: 4px;
	bottom:4px;
	left: -242px;
	width: 240px;
	transition: left 0.5s;
	background-color: var(--透明背景颜色);
	backdrop-filter: blur(16px);
	border: var(--边框颜色) 1px solid;
	position:fixed;
	z-index:2;
	color: var(--内容颜色);
	
}

.已显示目录 #目录_外{
	left: 4px;
	
}

#目录{
	overflow: auto;
	height: calc(100% - 194px);
	
}

#目录_上填{
	height: 28px;
}
#功能{
	margin: 18px;
}
#功能>input,#功能>label{
	margin-bottom: 10px;
	cursor: pointer;
}

#功能>input[type="button"]:disabled{
	cursor: not-allowed;
}

#目录>li{
	padding: 4px;
	padding-left: 16px;
	padding-right: 16px;
}
#目录>li>a{
	color: var(--内容颜色);
	text-decoration-color: var(--内容颜色);
	text-underline-offset: 0.2em;
}

#目录_外>h3{
	text-align: center;
	position: sticky;
	margin: 18px;
}

#目录遮罩{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	background-color: var(--遮罩颜色);
	transition: opacity 0.5s;
	pointer-events: none;
	z-index: 2;
}

.已显示目录 #目录遮罩{
	pointer-events: auto;
	opacity: 1;
}

.没有目录 #目录_外{
	left:-300px;
}

.没有目录 #返回按钮, .没有目录 #目录按钮{
	left:-40px;
}

#正文{
	display:flex;
    width: 100%;
    height: 100%;
}


#正文_内容{
    padding: 12px;
	font-size: 18px;
	flex: 1;
	padding-bottom: 0;
}


.横向{
	display: flex;
	flex-wrap: wrap;
}
.媒体{
	margin: 4px;
}

audio{
	width: 100%;
}

#索引{
	padding: 12px;
    position: absolute;
    width: calc( 100% - 24px );
    height: calc( 100% - 24px );
}


#索引>h2,#正文_内容>h1{
	margin-block-start:0px;
}
#索引>h2{
	padding-block-start: 0.83em;
	margin-block-end:0;
	padding-block-end: calc( 0.83em + 12px );
}

#索引>div{
	font-size: 18px;
}

#索引_内容{
	/*
	display: flex;
	flex-wrap: wrap;
	*/
	display: grid;
	grid-gap: 10px 10px;
	grid-template-columns: repeat(auto-fit,228px);
	justify-content: center;
}
#索引_内容>div{
	width:228px;
	height:224px;
}
#过渡元素{
	width:100%;
	height:100%;
	position:absolute;
}

.索引内容内框{
	width:100%;
	height:100%;
	margin: 0;
}

.索引内容内框>div{
	border: 2px;
	border-style: solid;
	border-color: var(--边框颜色);
	/*margin-bottom: 12px;*/
	color: var(--内容颜色);
	text-align: center;
	font-size: 0;
    cursor: pointer;
    border-radius: 4px;
	width:calc( 100% - 4px );
	height:calc( 100% - 4px );
}

.索引内容内框>div>img{
	height: 160px;
	width: 100%;
	object-fit: cover;
}
.索引内容内框>div>div{
	font-size: 18px;
	margin: 2px;
	font-variant-ligatures: none;/*禁用连字,防止过渡拆字时出现位移*/
}

.索引内容内框>div>div>span,.过渡文本>span{
	display: inline-block;
}

.过渡文本,.标题{
	font-variant-ligatures: none;
}

.过渡文本>span{
	/*文本位置大小变换过渡*/
    transition-timing-function: cubic-bezier(0.6, 0.2, 0.2, 1);;
    transition-property: font, left, top;
	font-size: 18px;
	font-weight: 400;
	
}


.过渡文本.标题>span{
	font-size: 32px;

}


#内框_外{
    perspective: 3000px;
}
#内框_外.保持{
	width: 100%;
	height: 100%;
    /*perspective: unset;*/
}

#内框{
	position:absolute;
    transition-property: transform, left, top, width, height;
    transform-style: preserve-3d;
	transform-origin: center center;
    transform: rotateX(0deg);
	left: -2px;
	top: -2px;
	width: calc( 100% + 4px );
	height: calc( 100% + 4px );
}
.过渡 #内框,.过渡 #内框>div,.过渡 .过渡文本>span,.过渡 #正文,#索引{
    transition-duration: 1s;
}
.过渡 #正文{
	transform-origin: 0 0;
}

#内框,.过渡 #正文,#索引{
    transition-timing-function: cubic-bezier(0.2, 0.5, 0.2, 1);
}

.过渡 #正文{
	transition-property: transform,height;
}
.过渡 #索引{
	transition-property: transform;
}
.缩小{
	transform: scale(0.9);
}

#内框>div{
    backface-visibility: hidden;
}


#正面{
	width:100%;
	height:100%;
	position:absolute;
	display: none;
    transform: rotateX(-180deg);
    background: var(--背景颜色);
}
#反面{
	width:calc( 100% - 4px );
	height:calc( 100% - 4px );
	inset: 0;
	position:absolute;
	z-index: -1;
    transform: rotateX(0deg);
    background: var(--背景颜色);
    border-radius: 4px;
	border: 2px;
	border-color: var(--边框颜色);
}
#内框.过渡进行 #正面{
	display: block;
}
#内框.过渡进行 #反面{
	border-style: solid;
}

#内框.未旋转{
    transform: rotateX(-180deg);
}

#正文_外{
    opacity: 1;
    transform: rotateX(0deg);
    /*变换的中心为视口的中心*/
    /*transform-origin: 50vw 50vh;*/
    position: absolute;
	left: 2px;
	top: 2px;
	right: 2px;
	bottom: 2px;
}
#内框.过渡进行 #正文_外{
	overflow: hidden;
}

#内框.内框_隐藏{
	z-index: -1;
	visibility: hidden;
}

#正文_内容>h1{
	font-size: 32px;
	font-weight: 400;
}




.视频外框{
	position:relative;
	width:min-content;
	height:min-content;
	font-size: 0;/*防止空白占位*/
}

.图片外框>img{
	cursor: pointer;
}

.视频外框>video{
	width: 100%;
	height: 100%;
	background: var(--填充色块);
	cursor: pointer;
}


.可播放提示::after{
	content: '';
	margin: auto;
	position: absolute;
	width: 72px;
	height: 72px;
	background-size: 50%;
	background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJXaW5kb3dUZXh0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04IDV2MTRsMTEtN3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+);
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px 0px;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center center;
	transition: opacity 600ms cubic-bezier(0.4, 0, 0.6, 1) 0s;
	display: block;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}



@media print{
	#正文{
		margin: 0!important;
	}

	#目录_外,#返回按钮,#目录按钮,.可播放提示::after{
		display: none!important;
	}
}

/*
@media (min-width: 1280px){/*大于1280px* /
	#目录按钮{
		display:none;
	}
	#正文,#加载提示{
		margin-left: 280px;
	}

	#目录遮罩{
		display: none;
	}


	#返回按钮{
		left: 64px;
	}
	
	#返回按钮_1{
		transform: rotate(-34deg);
		width: 10px;
		top: 3px;
	}

	#返回按钮_3{
		transform: rotate(34deg);
		width: 10px;
		top: -3px;
	}

}

@media (max-width: 1280px){/* 小于1280px * /
	#目录按钮{
		display:block;
	}
	#目录_外{
		left: -240px;
	}
	#正文,#加载提示{
		margin-top: 64px;
	}
}
*/