@charset "UTF-8"; /* ==================================================
 * Snapic Just640px Theme Front Main Stylesheet by Lopwon.
 * www.Lopwon.com
 * 2025-03-08
 * CC BY-NC-SA
 * -------------------------------------------------------------------
 *
 * # root
 * # scrollbar
 * # font
 * # reset
 * # base
 * # main
 * # overlay
 * # list::before
 * # index(list)
 * # index & single
 * # glightbox
 * # protected
 * # markdown
 * # comments
 * # mood
 * # aside
 * # archive
 * # search
 * # navigator
 * # tool
 * # footer
 * # media
 *	## min-width: 1170px
 *	## min-width: 960px
 *	## max-width: 640px
 *	## max-width: 480px
 *
 * -------------------------------------------------------------- root */

:root {

	--font-family: 'Microsoft JhengHei', system-ui, -apple-system, Helvetica, Arial, sans-serif;
	--code-family: 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', -apple-system, system-ui, monospace;
	--body-color: #fcfcfc;
	--body-width: 640px;
	--body-width-base: 640px;
	--max-height: 320px;

	--border-color: rgb(125 125 125 / 15%);
	--overlay-color: rgb(0 0 0 / 25%);

	--wrap-255-15: rgb(255 255 255 / 15%);
	--wrap-255-85: rgb(255 255 255 / 85%);
	--wrap-f5: #f5f5f5;
	--wrap-e: #f5f5f5;
	--wrap-white: #ffffff;
	--wrap-black: #000000;
	--wrap-light: #fff4d9;

	--highlight-background: #f1f0ed;
	--highlight-background-hover: #c7d2d4;
	--highlight-color: #617172;

	--color-3: #576470;
	--color-6: #666666;
	--color-9: #999999;
	--color-c: #cccccc;
	--color-white: #ffffff;
	--color-black: #000000;
	--color-red: #e5432a;
	--color-orange: #c4d7d6;
	--color-yellow: #ffff00;
	--color-green: #03ee03;
	--color-cyan: #10aec2;
	--color-blue: #4a4035;
	--color-purple: #800080;

}

/* --------------------------------------------------------- scrollbar */

::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

::-webkit-scrollbar-thumb {
	background-color: #cccccc;
}

::-webkit-scrollbar-track {
	background-color: #fcfcfc;
}

* {
	scrollbar-width: thin;
	scrollbar-color: #cccccc #fcfcfc;
}

/* -------------------------------------------------------------- font */

@font-face {
	font-family: 'Caveat'; /* 自定义字体名称，如果有空格，请用引号包裹，如 'Noto Sans SC' */
	src: url('../font/sign/Caveat-Regular.eot'); /* 字体子集文件相对路径，当前路径表示：文件夹 font/sign 的 Caveat-Regular.eot 字体子集文件 */
	src: url('../font/sign/Caveat-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('../font/sign/Caveat-Regular.woff2') format('woff2'), /* Super modern browsers */
		url('../font/sign/Caveat-Regular.woff') format('woff'), /* Modern browsers */
		url('../font/sign/Caveat-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../font/sign/Caveat-Regular.svg#Caveat-Regular') format('svg'); /* Legacy iOS */
	font-weight: normal; /* 字体粗细，可选 */
	font-style: normal; /* 字体样式，可选 */
	font-display: swap; /* 字体显示，必选 */
}

.sign span:first-child a {
	font-family: 'Caveat', Helvetica, Arial, sans-serif; /* 如需更换签名字体，可将默认的 Caveat 替换为 @font-face 中自定义的 font-family 的值 */
	margin-left: -0.1em; /* 左偏移量 */
	margin-top: -0.65em; /* 下偏移量 */
	font-size: 3.8em; /* 签名字号 */
}

/* ------------------------------------------------------------- reset */

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-family: var(--font-family);
	font-size: 62.5%;
	font-weight: normal;
	line-height: 1.2;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	-webkit-overflow-scrolling: touch;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body,
main,
archive,
section,
aside,
footer,
div,
span,
img,
textarea,
input,
button {
	display: block;
}

a {
	text-decoration: none;
	outline: none;
}

a:hover,
a:focus,
a:active {
	outline-width: 0;
}

p {
	margin: 1.5em 0;
	line-height: 1.5;
}

p br {
	display: none;
}

ol,
ul {
	list-style: none;
}

img,
video {
	margin: 0 auto;
	width: 100%;
	height: auto;
}

/* -------------------------------------------------------------- base */

[hidden],
.hidden {
	display: none !important;
}

.clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-line-clamp: 1;
}

/* -------------------------------------------------------------- main */

body {
	position: relative;
	margin: 5em auto;
	margin-bottom: 11em;
	padding: 0;
	max-width: var(--body-width);
	min-height: calc(100vh - 13em);
	background-color: var(--body-color);
}

main {
	margin: 0;
	padding: 1em;
	background-color: var(--body-color);
}

/* ----------------------------------------------------------- overlay */

.overlay {
	position: -webkit-fixed;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: var(--overlay-color);
	visibility: hidden;
	opacity: 0;
	-webkit-transition: visibility 0.3s, opacity 0.3s;
	transition: visibility 0.3s, opacity 0.3s;
	z-index: 6;
}

.overlay.visible {
	visibility: visible;
	opacity: 1;
}

#message {
	position: -webkit-fixed;
	position: fixed;
	bottom: 3.5em;
	left: 50%;
	height: 48px;
	padding: 1em;
	color: var(--color-white);
	font-size: 1.6em;
	border-radius: 1em;
	background-color: var(--wrap-black);
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateX(-50%) translateY(20px);
	transform: translateX(-50%) translateY(20px);
	-webkit-transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s ease;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s ease;
	z-index: 6;
}

#message[style*="visibility: visible"] {
	-webkit-transform: translateX(-50%) translateY(0);
	transform: translateX(-50%) translateY(0);
	-webkit-transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s ease;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s ease;
}

.loading,
.error {
	padding: 1em;
	font-size: 1.4em;
	color: var(--color-c);
	text-align: center;
}

#entry-catalog .loading,
#entry-catalog .error {
	margin-top: 3.75em !important;
}

/* ------------------------------------------------------ list::before */

.article.index.list::before,
.archive .article::before,
#posts .list a::before,
#posts .list a .pin::before {
	display: block;
	content: '';
	position: absolute;
	top: 50%;
	left: -1.5em;
	width: 0.5em;
	height: 0.15em;
	background-color: #cccccc;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

#posts .list a[id^="isPin"]::before {
	content: none;
}

#posts .list a .pin::before {
	width: 24px;
	height: 24px;
	background-size: 18px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-color: transparent;
	background-image: url('data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjcyIiBoZWlnaHQ9IjcyIiB2aWV3Qm94PSIwIDAgNzIgNzIiPgo8dGl0bGU+cGluPC90aXRsZT4KPHBhdGggZD0iTTUwLjE4NyAxMi44MTNjLTEuMTY3LTEuMTczLTMuMDYzLTEuMTc5LTQuMjQyLTAuMDEyLTAuMzEyIDAuMzEyLTAuNTI4IDAuNjgxLTAuNjc1IDEuMDY1LTIuNDk2IDUuMjA4LTUuMjQ0IDguMTQ1LTguNzEyIDkuODc5LTMuODkxIDEuOTItOC4zNTggMy4yNTUtMTUuNTU4IDMuMjU1LTAuMzkgMC0wLjc4IDAuMDc1LTEuMTQ2IDAuMjI4LTAuNzM1IDAuMzA2LTEuMzE3IDAuODkxLTEuNjIzIDEuNjIzLTAuMzAzIDAuNzMyLTAuMzAzIDEuNTYgMCAyLjI5MiAwLjE1MyAwLjM2OSAwLjM3MiAwLjcwMiAwLjY1MSAwLjk3OGw5LjcyOSA5LjcyOS0xMy42MTEgMTguMTUgMTguMTUtMTMuNjExIDkuNzI2IDkuNzI2YzAuMjc2IDAuMjgyIDAuNjA5IDAuNDk4IDAuOTc4IDAuNjUxIDAuMzY2IDAuMTUzIDAuNzU2IDAuMjM0IDEuMTQ2IDAuMjM0czAuNzgtMC4wODEgMS4xNDYtMC4yMzRjMC43MzUtMC4zMDYgMS4zMi0wLjg4NSAxLjYyMy0xLjYyMyAwLjE1My0wLjM2MyAwLjIzMS0wLjc1NiAwLjIzMS0xLjE0MyAwLTcuMiAxLjMzMi0xMS42NjcgMy4yNDktMTUuNDk4IDEuNzMxLTMuNDY4IDQuNjY4LTYuMjE2IDkuODc5LTguNzEyIDAuMzg3LTAuMTQ3IDAuNzUzLTAuMzYzIDEuMDYyLTAuNjc1IDEuMTY3LTEuMTc5IDEuMTYxLTMuMDc1LTAuMDEyLTQuMjQybC0xMS45OTEtMTIuMDYweiI+PC9wYXRoPgo8L3N2Zz4K');
	opacity: 0.15;
}

/* ------------------------------------------------------- index(list) */

main.index {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	margin: 0 1em;
}

main.index .article.index:not(.list) {
	margin: 0;
}

main.index > h1 {
	margin-left: 0.75em;
	margin-bottom: 1em;
	font-size: 2.8em;
	font-weight: bold;
	color: var(--color-3);
}

main.index .title.index a {
	color: var(--color-3);
}

main.index .title.index a:hover {
	color: var(--color-9);
}

main.index .article.index.list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	margin: 0;
	margin-left: 1em;
	padding: 0.75em 1em;
	min-height: 48px;
}

main.index .article.index.list:hover {
	background-color: var(--wrap-e);
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}

main.index .title.index.list {
	margin-bottom: 0;
	font-size: 1.6em;
	font-weight: normal;
}

main.index .title.index.list a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	padding-left: 0.5em;
	padding-right: calc(75px + 1em);
	width: 100%;
	height: 100%;
	color: var(--color-3);
	line-height: 48px;
	font-weight: normal;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

main.index .article.index.list .date {
	flex-shrink: 0;
	width: 75px;
	font-size: 1.2em;
	color: var(--color-c);
	text-align: right;
}

main.index .article.index.list:hover .date {
	color: var(--color-9);
}

/* ---------------------------------------------------- index & single */

.article.index,
.article.single {
	margin: 5em 1em;
}

.title.index,
.title.single {
	margin-bottom: 1.5em;
	font-size: 2.8em;
	font-weight: bold;
	color: var(--color-3);
}

.content {
	font-size: 1.8em;
	text-align: justify;
	word-break: break-all;
}

.content p:has(img) {
	margin: 2em auto;
}

.content a {
	color: var(--color-cyan);
}

 .content {
  color: #617172; /* 深灰色 */
}


img.foto {
	border-radius: 0.5em;
	opacity: 0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}

img.foto.loaded {
	opacity: 1;
}

.escaped {
	margin-top: 1em;
	font-size: 62.5%;
	text-align: justify;
	color: var(--color-9);
}

.escaped span.clamp {
	-webkit-line-clamp: 3;
}

.content p a.glightbox:hover .escaped {
	color: var(--color-3);
}

[id^="fotos-"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25em;
}

[id^="fotos-"] > span {
	position: relative;
	flex: 1 1 calc((100% - 1em) / 3);
	padding-top: calc((100% - 1em) / 3);
	border-radius: 0.25em;
	background-color: transparent;
}

[id^="fotos-"] > span img {
	margin-left: auto !important;
	width: 100% !important;
	height: 100%;
	max-width: none !important;
	border-radius: 0.25em;
	object-fit: cover;
}

[id^="fotos-"] > span .escaped {
	position: absolute;
	bottom: 0;
	left: 0;
	margin-top: auto;
	padding: 0.25em;
	width: 100%;
	color: var(--color-black);
	text-align: center;
}

[id^="fotos-"] > span .escaped span {
	position: relative;
	opacity: 0;
	-webkit-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
	z-index: 1;
}

[id^="fotos-"] > span .escaped::after {
	display: block;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5em;
	background: -webkit-linear-gradient(to bottom,
		rgb(255 255 255 / 0%) 0%,
		rgb(255 255 255 / 10%) 10%,
		rgb(255 255 255 / 20%) 20%,
		rgb(255 255 255 / 30%) 30%,
		rgb(255 255 255 / 40%) 40%,
		rgb(255 255 255 / 50%) 50%,
		rgb(255 255 255 / 60%) 60%,
		rgb(255 255 255 / 70%) 70%,
		rgb(255 255 255 / 80%) 80%,
		rgb(255 255 255 / 90%) 90%,
		rgb(255 255 255 / 100%) 100%
	);
	background: linear-gradient(to bottom,
		rgb(255 255 255 / 0%) 0%,
		rgb(255 255 255 / 10%) 10%,
		rgb(255 255 255 / 20%) 20%,
		rgb(255 255 255 / 30%) 30%,
		rgb(255 255 255 / 40%) 40%,
		rgb(255 255 255 / 50%) 50%,
		rgb(255 255 255 / 60%) 60%,
		rgb(255 255 255 / 70%) 70%,
		rgb(255 255 255 / 80%) 80%,
		rgb(255 255 255 / 90%) 90%,
		rgb(255 255 255 / 100%) 100%
	);
	opacity: 0;
	-webkit-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
	z-index: 0;
}

.content p a.glightbox:hover .escaped span,
.content p a.glightbox:hover .escaped::after {
	opacity: 1;
	-webkit-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
}

.profile {
	display: flex;
	align-items: flex-end;
	gap: 2em;
	margin-top: 11.5em;
	padding-bottom: 0.75em;
}

.avatar img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	-webkit-transition: transform 0.3s ease;
	transition: transform 0.3s ease;
}

.avatar a:hover img {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}

.sign {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.sign span:first-child a {
	display: block;
	color: var(--color-blue);
}

.sign span:first-child a:hover {
	color: var(--color-red);
}

.sign span:last-child {
	font-size: 1.2em;
	color: var(--color-3);
}

/* --------------------------------------------------------- glightbox */

.gscrollbar-fixer {
	margin-right: auto !important;
}

a.glightbox {
	display: block;
	position: relative;
	cursor: pointer;
}

a.glightbox:hover {
	margin-bottom: auto;
	color: transparent;
	border-bottom: 0;
}

a.glightbox::before {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: -0.5em;
	width: calc(100% + 1em);
	height: 100%;
	background-color: transparent;
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
	pointer-events: none;
}

[id^="fotos-"] a.glightbox::before {
	left: 0;
	width: 100%;
}

a.glightbox:hover::before {
	background-color: rgb(255 255 255 / 15%);
}

[id^="fotos-"] a.glightbox {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

#glightbox-body .goverlay {
	background: var(--body-color);
}

.glightbox-clean .gslide-media {
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

.gslide-image img {
	border-radius: 0.25em;
}

.gclose svg,
.gnext svg,
.gprev svg {
	width: 16px !important;
	height: 16px !important;
	filter: brightness(0);
}

.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
	width: 48px !important;
	height: 48px !important;
	line-height: 1.5;
	border-radius: 35% !important;
	background-color: transparent !important;
}

.glightbox-clean .gclose:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover {
	background-color: var(--wrap-e) !important;
	-webkit-transition: background-color 0.3s ease !important;
	transition: background-color 0.3s ease !important;
}

/* --------------------------------------------------------- protected */

.protected {
	display: flex;
	flex-direction: column;
	gap: 1em;
	font-size: 62.5%;
}

.protected p {
	margin: 0;
}

.protected .word {
	font-size: 1.2em;
	color: var(--color-c);
}

.protected p:last-child {
	position: relative;
	flex: 1 1 100%;
	width: auto;
	max-width: calc(var(--body-width-base) - 2 * 2em);
}

.protected input[type="password"] {
	margin: 1em 0;
	padding: 1em 0.75em;
	padding-right: calc(48px + 1.5em);
	width: 100%;
	height: calc(48px + 1.25em);
	font-size: 1.6em;
	color: var(--color-3);
	text-align: center;
	border: 0;
	outline: none;
	border-radius: 24px;
	background-color: var(--wrap-f5);
}

.protected .submit {
	position: absolute;
	top: 50%;
	right: 0.75em;
	margin: 0;
	padding: 0;
	width: 48px;
	height: 48px;
	font-size: 1.4em;
	border: none;
	border-radius: 35%;
	background-color: transparent;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	cursor: pointer;
}

.protected .submit:hover {
	background-color: var(--wrap-e);
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}

#protected-err {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 1em;
	width: 100%;
	height: calc(48px + 1.25em);
	font-size: 1.6em;
	color: var(--color-red);
	border-radius: 24px;
	background-color: var(--wrap-e);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	cursor: no-drop;
}

/* ---------------------------------------------------------- markdown */

abbr[title] {
	text-decoration: none;
	border-bottom: 0.01em dashed;
}

mark {
	margin: 0 0.15em;
	padding: 0;
	color: var(--color-3);
	padding: 0.15em 0.25em;
	border-radius: 0.15em;
	background-color: var(--color-yellow);
}

hr {
	margin: 3em 0;
	padding: 0;
	width: 3em;
	border: 0.01em dashed var(--border-color);
	border-width: 0.01em 0 0 0;
}

p small {
	color: var(--color-9);
	line-height: 1.4;
}

center {
	display: block;
	text-align: center;
}

p right {
	display: block;
	text-align: right;
}

code,
kbd,
samp {
	font-family: var(--code-family);
	text-indent: 0;
	word-break: break-all;
}

p code,
ol code,
ul code {
	margin: 0 0.15em;
	padding: 0.15em 0.25em;
	font-size: 87.5%;
	color: var(--color-9);
	border-radius: 0.15em;
	background-color: var(--wrap-f5);
}

p code:hover,
ol code:hover,
ul code:hover {
	background-color: var(--wrap-e);
}

pre {
	margin: 1em 0;
	padding: 1em;
	max-height: 20em;
	color: var(--color-9);
	border-width: 0 0.01em;
	border-radius: 0.15em;
	background-color: var(--wrap-f5);
	overflow: auto;
}

pre:hover {
	background-color: var(--wrap-e);
}


pre code {
	font-size: 87.5%;
	color: var(--color-9);
}

blockquote {
	display: inline-block;
	position: relative;
	margin: 1em 0;
	padding: 1em;
	width: auto;
	font-size: 87.5%;
	text-align: justify;
	line-height: 1.4;
	color: var(--color-6);
	border-radius: 0.15em 0.5em 0.5em 1em;
	background-color: var(--wrap-f5);
}

blockquote:hover {
	background-color: var(--wrap-e);
}

blockquote::before {
	display: block;
	content: '';
	position: absolute;
	top: -0.5em;
	left: -0.5em;
	width: 1.25em;
	height: 1.25em;
	background-size: 1em;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjY3IiBoZWlnaHQ9IjcyIiB2aWV3Qm94PSIwIDAgNjcgNzIiPgo8cGF0aCBkPSJNMzAuODU3IDM4LjU3MXYxNS40MjljMCA0LjI1OS0zLjQ1NSA3LjcxNC03LjcxNCA3LjcxNGgtMTUuNDI5Yy00LjI1OSAwLTcuNzE0LTMuNDU1LTcuNzE0LTcuNzE0di0yOC4yODZjMC0xMS4zMyA5LjI0MS0yMC41NzEgMjAuNTcxLTIwLjU3MWgyLjU3MWMxLjQwNiAwIDIuNTcxIDEuMTY1IDIuNTcxIDIuNTcxdjUuMTQzYzAgMS40MDYtMS4xNjUgMi41NzEtMi41NzEgMi41NzFoLTIuNTcxYy01LjY2NSAwLTEwLjI4NiA0LjYyMS0xMC4yODYgMTAuMjg2djEuMjg2YzAgMi4xMjkgMS43MjggMy44NTcgMy44NTcgMy44NTdoOWM0LjI1OSAwIDcuNzE0IDMuNDU1IDcuNzE0IDcuNzE0ek02Ni44NTcgMzguNTcxdjE1LjQyOWMwIDQuMjU5LTMuNDU1IDcuNzE0LTcuNzE0IDcuNzE0aC0xNS40MjljLTQuMjU5IDAtNy43MTQtMy40NTUtNy43MTQtNy43MTR2LTI4LjI4NmMwLTExLjMzIDkuMjQxLTIwLjU3MSAyMC41NzEtMjAuNTcxaDIuNTcxYzEuNDA2IDAgMi41NzEgMS4xNjUgMi41NzEgMi41NzF2NS4xNDNjMCAxLjQwNi0xLjE2NSAyLjU3MS0yLjU3MSAyLjU3MWgtMi41NzFjLTUuNjY1IDAtMTAuMjg2IDQuNjIxLTEwLjI4NiAxMC4yODZ2MS4yODZjMCAyLjEyOSAxLjcyOCAzLjg1NyAzLjg1NyAzLjg1N2g5YzQuMjU5IDAgNy43MTQgMy40NTUgNy43MTQgNy43MTR6Ij48L3BhdGg+Cjwvc3ZnPgo=');
	opacity: 0.15;
}

blockquote p {
	margin: 0.5em;
}

.content ol,
.content ul {
	margin: 1.5em 0;
	margin-left: 0.5em;
	padding: 0;
	padding-left: 1em;
	font-size: 87.5%;
	color: var(--color-9);
}

.content ol {
	list-style: decimal;
}

.content ul {
	list-style: circle;
}

.content ol li,
.content ul li {
	margin: 0.25em 0;
}

.content h1 {
	color: var(--color-3);
	font-size: 175%;
}

.content h2 {
	color: var(--color-3);
	font-size: 150%;
}

.content h3 {
	color: var(--color-3);
	font-size: 125%;
}

.content h4 {
	color: var(--color-3);
	font-size: 100%;
}

.content h5 {
	color: var(--color-3);
	font-size: 87.5%;
}

table {
	display: flex;
	flex-direction: column;
	margin: 1em 0;
	padding: 0;
	border-radius: 0.15em;
	border: 0.01em solid var(--border-color);
	background-color: var(--wrap-f5);
}

tr {
	display: flex;
	color: var(--color-9);
}

th,
td {
	flex: 1 1 0%;
	padding: 1em;
	text-align: left;
	border: 0.01em solid var(--border-color);
}

table tr:hover {
	background-color: var(--wrap-e);
}

sup[id*="fnref-"] {
	margin: 0;
	padding: 5em 0.15em 0.15em;
}

sup[id*="fnref-"] a,
.footnotes li[id*="fn-"] a {
	border-bottom: 0 !important;
}

.footnotes li[id*="fn-"]::marker {
	font-style: italic;
}

.footnotes li[id*="fn-"]:first-child {
	margin-top: -5em !important;
}

.footnotes li[id*="fn-"] {
	margin-bottom: -5em;
	padding: 5em 0.5em 1em;
	font-size: 87.5%;
	color: var(--color-9);
}

.footnotes li[id*="fn-"]:last-child {
	margin-bottom: 0 !important;
}

sup[id*="fnref-"]:target a,
.footnotes li[id*="fn-"]:target,
.footnotes li[id*="fn-"]:target a {
	color: var(--color-orange);
}

sup[id*="fnref-"]:target a:hover,
.footnotes li[id*="fn-"]:target a:hover {
	color: var(--color-3);
}

/* ---------------------------------------------------------- comments */

#entry-comments {
	max-width: var(--body-width-base) !important;
}

.comment-head {
	display: flex;
	align-items: center;
	position: -webkit-fixed;
	position: fixed;
	top: 0;
	left: 50%;
	padding: 0 1.75em;
	width: 100%;
	margin: 0 auto !important;
	height: calc(3em + 48px);
	background-color: var(--body-color);
	box-shadow: 0 0.5em 1em 0 transparent;
	opacity: 0;
	-webkit-transform: translate(-50%, -100%);
	transform: translate(-50%, -100%);
	-webkit-transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
	transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
	z-index: 1;
}

.comment-head.fixed {
	box-shadow: 0 0.5em 1em 0 var(--border-color);
	opacity: 1;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

.comment-head > div,
.comment-head.fixed > div {
	display: flex;
	align-items: center;
	gap: 1em;
	margin: 0 auto;
	padding: 0 1.75em;
	width: 100%;
	height: calc(1em + 48px);
	max-width: var(--body-width-base);
}

.comment-head .title {
	font-size: 1.8em;
	font-weight: bold;
	color: var(--color-3);
	-webkit-line-clamp: 2;
}

ol.comment-list {
	display: flex;
	flex-direction: column;
	gap: 5em;
}

.comment-body {
	display: flex;
	flex-direction: column;
	margin-bottom: 2em;
	padding-top: 1em;
}

.comment-children {
	padding-left: 0.5em;
	border-left: 0.15em solid var(--border-color);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 1em;
	font-style: normal;
}

.comment-avatar img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
}

.comment-info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.25em;
	width: calc(100% - 36px - 1em);
	height: 36px;
}

.comment-name {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 1.4em;
	color: var(--color-9);
}

.comment-name a {
	color: var(--color-9);
	font-weight: bold;
}

.comment-name a:hover {
	color: var(--color-3);
}

.comment-name,
.comment-name a {
	overflow: hidden;
}

.comment-admin {
	flex-shrink: 0;
	padding: 0.25em 0.5em;
	font-size: 62.5%;
	color: var(--color-white);
	border-radius: 1em;
	background-color: var(--color-orange);
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: 1em;
}

.comment-date {
	flex-shrink: 0;
	font-size: 1.2em;
	color: var(--color-c);
	word-break: break-all;
}

.comment-date:hover {
	color: var(--color-9);
}

.comment-content {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1em 0;
    margin-right: auto;
    padding: 1em 1.5em;
    font-size: 1.4em;
    color: var(--color-6);
    /* 修改圆角为对角线不对称 */
    border-radius: 2.25em 0.75em 2.25em 0.75em;
    background-color: var(--wrap-f5);
    /* 添加过渡动画 */
    transition: 
        border-radius 0.3s ease,
        background-color 0.3s ease;
}

/* 子评论特殊样式 */
.comment-children .comment-content {
    border-radius: 0.75em 2.25em 0.75em 2.25em; /* 反向圆角 */
}

.comment-content:hover {
    background-color: var(--wrap-e);
    /* 悬停时圆角变化 */
    border-radius: 1.5em 0.5em 1.5em 0.5em !important;
}

/* 移动端适配 */
@media (max-width: 640px) {
    .comment-content {
        border-radius: 1.25em 0.5em 1.25em 0.5em !important;
    }
    .comment-content:hover {
        border-radius: 1em 0.25em 1em 0.25em !important;
    }
}

/* 以下保持原有样式不变 */
.comment-content > p {
    margin: 0.5em 0;
}

.comment-content img {
    margin-left: auto !important;
    width: 100%;
    height: auto;
    max-width: 100% !important;
    max-height: var(--max-height);
    border-radius: 0.5em;
}

.comment-content img:not(.foto) {
    width: auto;
}

.comment-reply {
    position: absolute;
    top: -12px;
    right: -24px;
}

.comment-content:hover {
	background-color: var(--wrap-e);
}

.comment-content > p {
	margin: 0.5em 0;
}

.comment-content img {
	margin-left: auto !important;
	width: 100%;
	height: auto;
	max-width: 100% !important;
	max-height: var(--max-height);
	border-radius: 0.5em;
}

.comment-content img:not(.foto) {
	width: auto;
}

.comment-reply {
    position: absolute;
    top: -12px;
    right: -12px;
    border-radius: 50%;
    background-color: var(--body-color);
}

.go-form,
.reply-icon {
	background-color: transparent !important;
	opacity: 0.3;
}

.go-form {
	width: 36px !important;
	height: 36px !important;
	background-size: 24px !important;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAABLJJREFUeF7lnFvIVUUUx3+flCIEPoSCCiZEGORDBWViF80iQ1MLtIcwtQi1gi7eCH2wxFvkhdKKKBWNEPGKJiqVmZKoYJeHwgcRERIfwhdF8CX545zcbPbZZ2bvmTnn7L3g8PHxzVqz5rfnrJm91szXQ33lDuBhYBQwEOhnPoOBIeazoqdGfO4DHjJQRhgwd+aM/xNgftUBPQiMByYAjzlMhleBrWpfRUD3GygCM8YBSqOpdH5u/FIlQM8Dc4AXCkBpqEh3f1K/CoD0xAVmSgkwUp0FfJW20c2ARhow00qCkfqHwJIsO90ISEvwYuAND2BkYkfe7Os2QK+Yp32vJzh/A88BF5vZ6xZAAwyY2Z7ANMwosB/Ms9kNgF4CPgIe8AxnHrC6lc1OB7QSWNhqEAX+vgl4zUavUwH1B9YDU20G4djmFDAOuGKj14mAHgE2APrpW64ZOMdtDXcaIM0YzRzNoBAyF1jjYriTACnWKOaEksNmSXey3ymAtJq87+S5e+OngF9c1ToB0EZgpqvjju2Xmd23o1r70x17gEnOXrspnAY0e667qd1q3c4ZdAQYXcRpR53JwF5Hnf+btwtQLDifA28VhdOuGfQZ8HYZpy11zwFPAv9Yts9sFnsGzQC0zY8hSod8XbajmIAUC3aXddhS/wfgWcu2uc1iAVIwVtyJJapifO+jsxiAVHrRzBnqw2ELGyrXqGzjRUIDUrVSCSmXmlSZgd0AlKs+U8ZIUjc0oG9s8y6eBvSx7/xRSEB6c1b5NpZcMLPnks8OQwFSrveAT0ctbL0HrLNo59QkBKB7TNxRCTiWHDObQu/9hQC0E1CiPaYohXooRIe+Ac0HFChjytqQuSSfgB4HfgR6R6Tzl/lq/RuqT1+Aehk4MdIXSRaqtH4XCo7s+gK0HPggpKMZtrcA00P36QOQ3nv2hXY0Zf+yyRKeDd1vWUCKNyfMub/QvibtvwN8GqPDsoAWAKtiOJroYzvwcqw+ywDShlCzR0doY4leJ8YCyhZGkTKAtP94N4qXtzsJvmqlx1MUkNIXmj0xRTFHsSeqFAW0LWYcAE4CzwBXo9IpuA96EdgV2VHB0S49uhSZQUdDvTk3Gf3rgMrTbRFXQG+aszuxnLU6JhfSGRdAd5vArEshoUV19EWAVsq2igugpUVPSDiO8CfTT+xVMtNNW0DDzey5y3GwLs11wOnbxi0bF8WQbW0BfQHknVHW8qsEfdrefxYr5R/AnzF3xy5AbQANA34D+uYY1mWSL1067pa2NoBa5Xp+Nbf3umXMTn62AqQrAJo9g3Ks6s6nIFVSWgFqlYTX10pfr8pKHiDdCv49546EArNSHdHfj2I+jTxA2uLnHUCqbGBOPoA8QDpT/ESTp1XpwGwDSJVRVUibSaUDsw0gHZud2IRO5QNzK0C6Raz3oSypRWBuBWhzTkGuFoE5D5COrOiia5bUJjDnAVL5WK8WWVKbwJwHSMnxRzPo1CowNwP0dJPEeO0CczNAugqZdfGjdoE5C1Afk7DSf19KSi0DcxYglXSV7kxLLQNzFiAVAlUQTEptA3MakO5QnE/BqXVgTgPKOhFf68CcBqT6U/KySe0DcxLQTZGGpc8kjlNOAAAAAElFTkSuQmCC');
}

.reply-icon {
	width: 24px !important;
	height: 24px !important;
	background-size: 12px !important;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAAA/hJREFUeF7t21nIDlEcx/HvW66kKC7IhRvJnlL2skRJSAh3siTiTiIpXMiSS2tCuZIs2XIhJdkuUJa4ILJmKyRLSumneXg8Zp4zZ5Yz8555Tk29Pc+Zec583v9Z5pwzbfiZhgN3gG9pb68t7QVKfP5GYH3a8vkMNA8YCKxLg+QzkFyuAoeAPUmRfAdaABwAxgKXkiD5DiSTG8AHYFILKFxgC7AaWANstUWqQgRNAc4CX4KqdtMGqQpA8ngHdANOAjNaQP8LHAVmBR9PA87ERapKBNV6M7mcBqa3gP4V6Aq8r/sodhRVJYJk8xHoHCDFjqIqAT0EetdF0RjgiqmqVQnoGjCiDmQ7sKoF9FfgFKC2p5YUUf2An82QqhRBeiZTb1af1PUfLzNQf+C+Kcwz+n5bSJXSk/78sgIJZw6wISMA02V2A0sbMj0DepURSDhHAI1wXQGpxxoVgjEIuBeFVEQbVMMZAGha1BXQZ6BTCMRC4GBZgOpxVCZXQIOB2xEImm1cVgagRhyXQMuBHREIGh+FVb3f2V1VsTAcl0CHgbkRQE0bahdAUTiugIYG065RtUgDxQ5FVbFmOK6A9gJLDGOA7sCbsDx5RpAJxwXQaOCyaYAEKMpuuQSKg+MCSFOscSbHRgLXXQHFxckbSOOb/TGiR1lU5gcugGxw8gRaDOyLiaNsPYFXeQPZ4uQFtBbYZIGjrBpha1nov5RVI50EJ2sgrX+tBCZY4nwCuuTZzSfFyQpIs4SqUossYWrZtag4NS+gNDhpgSYHczna5pImqUpuzgMoLY4t0BBgHDAsGLf0SaNSd66q5rmsgbLAqQFdDCmclon7BofmjfV3x4xAGi/TA3idJVBWODndr9VlTwAzm51h24v5hCMXzUdrXjoy2QD5hvMyWPbRTGNqIN9wBLITWGGqkHEiyEecF8FmqsdpgXzEkYmWfzRPZEzNIshXnGPAbKNMkCEKyFecp8H6/N00QL7iaO55IhA2MLXqxXwFGm+LI7WqVLFEOM2A9J0PkaQ1d80PaRtwomQaB7VnpKZLynG1TEDtMZIULbuy2hQRB6i9IOntQj0+COdJ3Agx5YsLVGakt8E2OuFE7vMxQUR9bwNUJiRBXADOB8ePpACm82yBikB6FESGRr+C0XaV56Yby+r7JEBZImkD1deGQ22JDr0EJ5TvWd1skuskBcoKydUOsyQ2v89JA5QFkvdAaZEqAZQGqTJASZEqBZQEqXJAtkiVBLJBqixQXKRKA8VBqjyQCakFFIzxi34VobBHDZsfLvJlFpty/pM37bOY7Q8X9TqUbTn/5HcN1NgmtdqgiH9dLZJcvpKZKIqKiKBaQYXk8qXeREC/AEgHzElMV7nVAAAAAElFTkSuQmCC');
}

.go-form:hover,
.reply-icon:hover {
	opacity: 1;
}

.comment-close {
	margin-top: 5em !important;
	font-size: 1.4em;
	color: var(--color-c);
}

.comment-awaiting-moderation {
	flex-shrink: 0;
	color: var(--color-c);
}

.respond {
	margin-top: 3em;
}

#comment-form {
	display: flex;
	flex-direction: column;
	gap: 1em;
	width: 100%;
	max-width: calc(var(--body-width-base) - 2em);
	font-size: 1.4em;
}

#comment-form * {
	outline: none;
	border: 0;
}

/* 同时作用于表单元素和已发布评论气泡 */
#comment-form textarea,
#comment-form input,
#comment-form button,
.comment-bubble { /* 添加评论气泡选择器 */
    transition: 
        border-radius 0.3s ease,
        box-shadow 0.3s ease; /* 可选添加投影动画 */
}

#comment-form textarea,
#comment-form input,
#comment-form button {
    font-family: var(--font-family);
    padding: 1em;
    border-radius: 2.25em 0.75em 2.25em 0.75em; /* 左上 右上 右下 左下 */
    background-color: var(--wrap-e);
}
#comment-form textarea,
#comment-form input,
#comment-form button {
    transition: border-radius 0.3s ease;
}
#comment-form textarea:focus,
#comment-form input:focus {
    border-radius: 1.125em !important;
}

#comment-form textarea {
	width: 100%;
}

.comment-submit {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5em;
	margin-bottom: 3em;
}

.comment-submit > * {
	width: 100%;
}

#comment-form button {
	color: var(--color-black);
	background-color: var(--wrap-e);
	transition: background-color 0.3s ease, color 0.3s ease;
	cursor: pointer;
}

#comment-form button:hover {
	color: var(--color-white);
	background-color: var(--wrap-black);
}

.cancelreply {
	margin-top: 1em;
}

.comment-logout {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.cancelreply a,
.comment-logout a {
	color: var(--color-cyan);
}

.cancelreply a:hover,
.comment-logout a:hover {
	color: var(--color-3);
}

/* -------------------------------------------------------------- mood */

.mood {
	display: inline-block;
	margin-top: 0.5em;
	width: auto;
	max-width: calc(var(--body-width-base) - 48px - 2em);
	border-radius: 0.5em 1em 1em 2em;
	background-color: var(--highlight-background);
}

.mood:hover {
	background-color: var(--highlight-background-hover);
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}

.mood a {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 1.25em;
	color: var(--highlight-color);
}

.mood span.diff {
	font-size: 1.2em;
}

.mood span.clamp {
	font-size: 1.4em;
}

.mood .diff {
	flex-shrink: 0;
	padding: 0.5em 0.75em;
	color: var(--color-3);
	font-weight: bold;
	border-radius: 2em;
	background-color: var(--highlight-background-hover);
}

.moodpage .comment-content a.glightbox::before {
	left: 0;
	width: 100%;
}

.moodpage .lopwon.icon {
	display: inline-block;
	margin: 0 0.15em;
	margin-bottom: -0.15em;
	width: 1.25em;
	height: 1.25em;
}

.moodpage .lopwon.icon img {
	-webkit-transition: transform 0.3s ease;
	transition: transform 0.3s ease;
}

.moodpage .lopwon.icon:hover img {
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

.moodpage #comment-form {
	max-width: none;
}

.moodpage .go-form {
	position: -webkit-fixed;
	position: fixed;
	left: calc(50% + var(--body-width) / 2 + 48px);
	bottom: 5.75em;
	width: 48px !important;
	height: 48px !important;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.moodpage .go-form:hover {
	background-color: var(--wrap-e) !important;
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}

/* ------------------------------------------------------------- aside */

#aside-chat,
#aside-index {
	position: -webkit-fixed;
	position: fixed;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background-color: var(--body-color);
	opacity: 0;
	-webkit-transition: left 0s ease, opacity 0.1s ease;
	transition: left 0s ease, opacity 0.1s ease;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 8;
}

#entry-comments,
#entry-catalog {
	display: flex;
	flex-direction: column;
	gap: 5em;
	margin: calc(48px + 2em) auto;
	padding: 1em;
	max-width: var(--body-width);
	opacity: 0;
	-webkit-transition: opacity 0.2s ease;
	transition: opacity 0.2s ease;
}

#entry-comments > *,
#entry-catalog > div {
	margin: 0 1em;
}

#entry-catalog .title {
	margin-bottom: 1em;
	font-size: 1.8em;
	font-weight: bold;
	color: var(--color-3);
}

#entry-catalog .list a {
	color: var(--color-3);
}

#entry-catalog .list:not(#posts .list) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	font-size: 1.2em;
}

#entry-catalog .list:not(#posts .list) a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.75em 1em;
    /* 基础不对称圆角（左上/右下大，右上/左下小） */
    border-radius: 1.6em 1.6em 1.6em 1.6em;
    background-color: var(--wrap-f5);
    /* 平滑过渡 */
    transition: all 0.3s ease;
}

/* 悬停时反转圆角方向 */
#entry-catalog .list:not(#posts .list) a:hover {
    background-color: var(--wrap-e);
    /* 反转方向（右上/左下大，左上/右下小） */
    border-radius: 2em 2em 2em 2em;
}

/* 当前选中项使用第三种方向 */
#entry-catalog .list:not(#posts .list) .current {
    /* 上边大，下边小 */
    border-radius: 1.5em 1.5em 1em 1.5em;
}

#entry-catalog .list:not(#posts .list) a:hover {
	background-color: var(--wrap-e);
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}

#entry-catalog .list:not(#posts .list) .current {
	color: var(--highlight-color);
	font-weight: bold;
	background-color: var(--highlight-background-hover);
}

#entry-catalog .list:not(#posts .list) .current:hover {
	background-color: var(--highlight-background-hover);
}

#pages a,
#links a {
	height: 48px;
}

#pages a img,
#links a img {
	width: 24px;
	height: 24px;
}

#pages a img,
#links a img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: transform 0.3s ease;
	transition: transform 0.3s ease;
}

#pages a:hover img,
#links a:hover img {
	-webkit-transform: scale(1.25);
	transform: scale(1.25);
}

#posts .list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.5em;
	max-height: var(--max-height);
	overflow-x: hidden;
	overflow-y: auto;
}

#posts .list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	position: relative;
	margin-left: 2em;
	margin-right: 0.5em;
	padding: 0.75em 1em;
	min-height: 32px;
}

#posts .list a:hover {
	background-color: var(--wrap-e);
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}

#posts .list span:first-child {
	flex-grow: 1;
	font-size: 1.6em;
	line-height: 1.6em;
}

#posts .list span:last-child {
	flex-shrink: 0;
	width: 75px;
	font-size: 1.2em;
	color: var(--color-c);
	text-align: right;
}

#posts .list a:hover span:last-child {
	color: var(--color-9);
}

#posts a.current span:first-child {
	color: var(--highlight-color);
	font-weight: bold;
}

/* ----------------------------------------------------------- archive */

main.archive {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	margin: 0 1em;
}

main.archive .h1,
.archive .article {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

main.archive .h1 {
	margin-left: 1em;
	margin-bottom: 1em;
	font-size: 1.8em;
	font-weight: bold;
	color: var(--color-3);
}

main.archive .article:hover	{
	background-color: var(--wrap-e);
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}

main.archive .article {
	position: relative;
	margin-left: 1em;
	padding: 1em;
	min-height: 48px;
}

main.archive .title.archive {
	font-size: 1.6em;
	font-weight: normal;
}

main.archive .title.archive a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	padding-left: 0.5em;
	padding-right: calc(75px + 1em);
	width: 100%;
	height: 100%;
	color: var(--color-3);
	line-height: 48px;
	font-weight: normal;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

main.archive .article .date {
	font-size: 1.2em;
	color: var(--color-c);
}

main.archive .article:hover .date {
	color: var(--color-9);
}

main .article .notice {
	font-size: 1.4em;
	color: var(--color-c);
}

main.archive article.article:not(.archive) {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: 1em;
}

main.archive article.article:not(.archive):hover {
	background-color: transparent;
}

main.archive article.article:not(.archive)::before {
	content: none;
}

/* ------------------------------------------------------------ search */

.search {
	position: relative;
	flex: 1 1 100%;
	width: 100%;
	max-width: calc(var(--body-width-base) - 2 * 2em);
}

.search input[type="text"] {
	margin: 1em 0;
	padding: 1em 0.75em;
	padding-right: calc(48px + 1.5em);
	width: 100%;
	height: calc(48px + 1.25em);
	font-size: 1.6em;
	color: var(--color-3);
	text-align: center;
	border: 0;
	outline: none;
	border-radius: 24px;
	background-color: var(--wrap-f5);
}

#entry-catalog .list input[type="text"] {
	margin: 0;
}

.search .submit {
	position: absolute;
	top: 50%;
	right: 0.75em;
	margin: 0;
	padding: 0;
	width: 48px;
	height: 48px;
	line-height: 1.5;
	border: none;
	border-radius: 35%;
	background-color: transparent;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.search .submit:disabled * {
	cursor: no-drop;
}

.search .search-icon {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 35%;
	background-size: 28px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAFDElEQVR4Ae3Zb2xVdx3H8dUytSB2zLVZBmgZ2dhiFGT8YcA0c2XBmSmDMSE1K07JQocoavwzp9PpjDGxbjKzBSNtH9itEwvDLOiCbJISbCd/ZqpxTmAKgq6kRGnvIrVcXw/mk5NzL/euPedX9LyTV76Pzyc56c1pRT6fvyircNlA2UDZQNlA2UDZQNlA2UDZQEWqqKi4aBSq5p3MYjpTmMyVXMwRTnCcY/RyiBMklucPOlAt9SxgEbMpp6M8SxfPcfR/ZaBxrONTTGc0+ittPETfhTzQUr7MYpLoMM20kruQBqrlOzSSRvto4tCFMNAC2riaNDvNWn46lgdaSQsTKKdBcgxwjolU4ZbdBjaNxYGWspNSGmY/v2Evh/k7f+EcU6mljsVcxxyqKKX1/GAsDVRHN7Wcrx+zmV9zllKbxyo+wUSKNUw9zxF8oPHs4nqKtYd72ctIupKNrKdYr3AzL4QeaDNrKVYzX2WQ0Wotj1JJoX7PYk6HGmgJz1CoftbzOEl0Iz9iGoV6iI0hBqpkH3Mp1Ao6SbL57GY8cf2bRfSkPdA9PEKhHuB+0uhjbKFQT3Eb+bQGquEAU4hrD0s4S1o9yUoK9WF2pDXQatop1Hx6SLNpHOAS4upgVVoDFfvL1U4DIfo2XyCul5lHX9IDTXK6uYpoQ9xANyGaQi/VxHUTu5MeaJHTRVy9LGCQEFWwleXE9XW+lvRAG5yHiesx1hGyRlqJaye3MpzkQM0Ffnjl+SjthOwKephMtG7eTy7JgTqcO4iW40Z6CN0hZhLtRRbSn+RAe52FROtjLn8mdM8zh2ineDcnkxzopHM50Y4ygyFCt4cbiDbM1RxJcqA+5zKiHWYGw4TuV7yXuK7iT0kO1O3MI9orXMdxQtfDXKK9ygyOJTnQNmcZ0QZ5H/sJ3UFmEe0UMzmR5ECbCnzNy3M7nYTsUvZTR7QjzOdUkgN9yfkWcTXzWUK2jK1UEm0Hy5P+oXiL8zRxdbOQc4SqhTXEdR8PouQGuszZz9uJlmM+vQFfr99xOXHdws40Pne00lj0G3CYPsN3iesY8/hbGgOtoYW4BriW46TZBHqpI64W7kLJDzSVF5hEXI/SRJrdxzfGxidX6UHuJa6z3E0raVRPJxOJaw8fIJfmQJM4yDuI6xwf5Ock2Uy6eMt5BvxliH8c3s1jFOpl7uB5kmgqncyhUF/hmyj9gcbRw3so1Bk+zRZGs+tpp45ibeZznEl/IGk2u6mmWI9zPy8xkqq5hy8ykVLaTgO59AeSVrCV89XPD9nCHymnOpbTxHTKbRur+Vf6A0mf5PuUUj+7+AXPcJy4aqhnKTcxmZG0gwYG0h9IauIRKii1Y/QzxKvkqeJiqpnGaLadOzmT/kDSzbTzNsZq2/gIQ+kPJL2LDq5lrPYzVjOY/kBSDZ9nI5Uk1QPUsI5ye4pG/pHqQJEWs4GVjGZdfI9O3kgHy0byuqU+UKQV3M4sruH19BJdPE0nef7bW2l7nSO1cFewgSLVMps5LORSLsH1qkg5BhngD+zjIAc4QaGqeIIPUW4Nnr89+ECRKnkzb3pNFW/gLEOvOc0wpTaOJ7mNctrl+ZcEGShA1bSW+bqd9PxXBBsoQON5glsppRc9/zVBBwpQJT8p8XVr8/xrwg80dl+3BZ6/O/xAYZrAw3ycaP+kke3h/8yH705WMYscz7KJ35b/SzorGygbKBsoGygbKBvo/2egrP8AACSbjwOTqUwAAAAASUVORK5CYII=');
	cursor: pointer;
}

.search .search-icon:hover {
	background-color: var(--wrap-e);
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}

/* --------------------------------------------------------- navigator */

.page-navigator,
.post-navigator {
	display: none;
	margin: 0 auto;
	padding: 1em 0.75em;
}

.post-navigator li {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0.25em;
	width: auto;
	height: 48px;
	font-size: 1.6em;
	color: var(--color-c);
	background-color: var(--wrap-f5);
	cursor: no-drop;
}

.post-navigator li:hover {
	color: var(--color-9);
	 background-color: var(--wrap-e);
}

.page-navigator li a {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0.5em;
	padding: 1em;
	width: 32px;
	height: 32px;
	font-size: 1.2em;
	color: var(--color-c);
	border-radius: 35%;
}

.page-navigator li a:hover {
	color: var(--color-9);
	background-color: var(--wrap-e) !important;
}

.post-navigator li a {
	display: -webkit-box;
	padding: 0 1em;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 48px;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.post-navigator li a {
	color: var(--color-3);
	cursor: pointer;
}

.post-navigator li#theNext {
	border-radius: 1em 0 0 1em;
}

.post-navigator li#thePrev {
	border-radius: 0 1em 1em 0;
}

.page-navigator li.current a {
	color: var(--color-3);
	background-color: var(--wrap-f5);
}

.page-navigator li.prev a,
.page-navigator li.next a {
	width: 48px;
	height: 48px;
	color: var(--color-3);
	background-color: var(--wrap-f5);
}

.post-navigator li a,
.post-navigator li span {
	display: -webkit-box;
	padding: 0 1em;
	height: 100%;
	text-align: center;
	line-height: 48px;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.page-navigator li.prev .prev,
.page-navigator li.next .next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	line-height: 1.5;
	border-radius: 35%;
	background-size: 24px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.page-navigator li.prev .prev {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAAAwRJREFUeF7tmsurTlEYxn9nYkYSUpiRAUaYuAxcc0m5TUQZSAoTJqSYYHCUKJdSRhgo14H/g/wRwshIzPTU+nRS9n6+vfZlZb/v+Nn77Od3nrW+9a61ZoiqJDATfKoJBKCahASgAJQ3iUSCIkGRoDwCkaA8fjEHRYIiQXkEIkF5/GIOigT93wlaA5wF9gA/gffAbeBHnm3/6ZKH2BHgMbD4LzsfgL3AN99mc2WpgPYDb4F5/7D2GjjW3Lb/ZImAdiQ4CypsfAWW+TabK0sDtDnBWVpj6TOwvLlt/8mSAG1IcFYan/8OOGzosiWlAFqb4Kw2HH0HtgMfDW22pARAq4A3wHrTzXHghanNlg0NaEWCs8l0cgp4ampbkQ0JaAmgn+ttppMzwBNT25psKEDzE5zdppPzwCNT26psCEBa/L0CDppOLgL3TG3rsiEAvZxiFXw59V6tG3df2DegZ8BJ8+OuATdNbWeyPgFpgj1tOrkBXDe1ncr6AvQA0ETr1CxwxRH2oekD0B3gkmnm7hRa85V5sq4B3QKump/4ELhganuTdQlIZu+bTjQ/aSFYXHUFaFFqJp3OXK2DWogiqytAJ4DnhmM1nWo+i62uAB1K2xd1xkcLaCHwCYghVhGRmKTrxg8wzc+8unV3MWn86XYkXc1Bc79umoWiunZ178VUH4BkVovAc6ZrnZyqiy+i+gIks9M0q+ri1c0PXn0CklmtjbRGckrdvLr6QatvQDKr3cSjpmt19eruB6shAGnLVcc8B0zX2glQlz9IDQFIRrVpL0i7TNej2rSfMNGxjyBtNSGN6thnwkStiCBtNCGN6uBwwkRHz7oLtM6ENKqj5wkTwVGS4vJCRUri+osxhLak4aYJvKpGe8NMUHam4VZ1BW+UN8zmJqbuEqcmdd2C7byGWig6xqquAQvgF+cluZqSAcmbLpJrFb0P+JX6uLhInvtfb/P50hPUptdG7wpANdgCUABqNLL+PBQJigRFgvIIRILy+MUcFAmKBOURiATl8Ys5KBKUl6DfT/pcSXra44EAAAAASUVORK5CYII=');
}

.page-navigator li.next .next {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAAAw1JREFUeF7tmsurT1EUxz/XSEZGyP9A/B8GnmXgGinlUaQYYEKJCRNu6UYpMvEqXclz4DHBCAOPGUpIYmakb21103X22mefs8/mrDX9fc+55/s566y7195rAo9GAhPOp5mAA4pkiANyQHlFxDPIM8gzKI+AZ1AeP69BnkGeQXkEPIPy+HkN8gz6tzJoAbAXWAXMB24Bp4FXeTb6u7rkJ7YIuAms/MPOF2ArcKU/m+3vXBLQJWDdXx71J7AGuNHeSj9XlgT0EVjcYON7gHSvH6vt7loS0AdgaeQxPwVIj9vZ6f6qkoCuAqsNFt4FSM8M2t4lJQGtAO4DCw2u3gRILw3aXiUlAcnIRuCi0dFzYC3w1qjvRVYakExsBs4Z3TwJkN4b9Z3LhgAkE1uAaaObB2F58Nmo71Q2FCCZ2AacMrq5HSD9MOo7kw0JSCZ2ASeMbq4D6wEtKovF0IBkVL3ZMaNjrcY3GLWdyGoAJCMHgMNGR+eBSaM2W1YLIBk5BBw0OjoTCr1R3l5WEyC5OArsM9pRgd9h1LaW1QZIRo4Du42OpN1j1LaS1QhIRk4C242OjgD7jdpkWa2AZEQLSS0oLbEzQLVokzQ1A5IRtSRqTWKhHQA1w19jwtTfawckP2pu1eTGYhNwISZK/f1/AqQt22upAGL62gGlfGLLgW8xw6m/1wzIi3TD29QiUN2+JUb3b17dvbp8S4xuoaiuXt29JaYSFpOW+82pqakGqZtXV2+J0TWr6uLVzVtCax2teYpEDRmk7l1dvCUuh11Fi7YTzdCA1LWr0FpiJpxwjGbLNWXT/k6AM5pN+5Rjn4cBzmiOfVIODp8GOOrWB4nSNSjl6PlFOJ8fzdFz6vCCzuUFadAomUE+/hJ51bEJM12uQqx9nUeDps2sP14yg2ITZhrB02d1txY4eo6SgDTFquyYK3yIE1gSplh9DLjhE/k9SL4MmAe8Bs76IHlNRSXxWUrWoMRHq0PugCLvwQE5oLxP1TPIM8gzKI+AZ1AeP69BnkGeQXkEPIPy+HkN8gzKy6BfAlBuSYZMZ3sAAAAASUVORK5CYII=');
}

.navigator-container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: -webkit-fixed;
	position: fixed;
	bottom: 4.75em;
	left: 50%;
	width: auto;
	border-radius: 24px;
	background-color: var(--wrap-white);
	visibility: hidden;
	opacity: 0;
	-webkit-transition: visibility 0.3s, opacity 0.3s;
	transition: visibility 0.3s, opacity 0.3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 7;
}

.navigator-container.visible {
	visibility: visible;
	opacity: 1;
}

.page-navigator.navigator-container {
	width: auto;
	max-width: calc(var(--body-width-base) - 2 * 2em);
}

.post-navigator.navigator-container {
	width: calc(var(--body-width) - 2 * 2em);
	max-width: calc(var(--body-width-base) - 2 * 2em);
}

/* ----------------------------------------------------------- options */

.options-pannel {
	display: none;
	margin: 0 auto;
	padding: 1em 0.75em;
}

.options-pannel label {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0.25em;
	padding: 1em;
	width: auto;
	height: 48px;
	font-size: 1.2em;
	color: var(--color-3);
	border-radius: 1.75em;
	background-color: transparent;
	cursor: pointer;
}

.options-pannel label:hover {
	background-color: var(--wrap-e);
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}

.options-pannel label > * {
	flex-shrink: 0;
}

.options-pannel input[type="radio"] {
	margin-right: 0.25em;
	cursor: pointer;
	appearance: none;
	width: 16px;
	height: 16px;
	border: 0.25em solid var(--color-c);
	border-radius: 35%;
}

.options-pannel label:hover input[type="radio"] {
	border-color: var(--color-cyan);
	-webkit-transition: border-color 0.3s ease;
	transition: border-color 0.3s ease;
}

.options-pannel input[type="radio"]:checked {
	border-color: var(--color-cyan);
	background-color: var(--color-cyan);
}

.options-container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: -webkit-fixed;
	position: fixed;
	bottom: 4.75em;
	left: 50%;
	width: auto;
	border-radius: 24px;
	background-color: var(--wrap-white);
	visibility: hidden;
	opacity: 0;
	-webkit-transition: visibility 0.3s, opacity 0.3s;
	transition: visibility 0.3s, opacity 0.3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 7;
}

.options-container.visible {
	visibility: visible;
	opacity: 1;
}

.options-pannel.options-container {
	width: auto;
	max-width: calc(var(--body-width-base) - 2 * 2em);
}

/* -------------------------------------------------------------- tool */

#tool {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25em;
	position: -webkit-fixed;
	position: fixed;
	left: calc(50% + var(--body-width) / 2 + 48px);
	bottom: 11.75em;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	opacity: 0.15;
	-webkit-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
	z-index: 5;
}

#tool:hover {
	opacity: 1;
}

.go-form,
.reply-icon,
#close-comments,
#close-catalog,
#go-comments,
#go-catalog,
#go-html,
#comments-index,
#comments,
#catalog,
#options,
#page-of {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	line-height: 1.5;
	border-radius: 35%;
	background-color: var(--wrap-255-85);
	background-size: 32px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	cursor: pointer;
}

#close-comments,
#close-catalog,
#go-comments,
#go-catalog,
#page-of {
	position: -webkit-fixed;
	position: fixed;
	left: calc(50% + var(--body-width) / 2 + 48px);
	bottom: 5.75em;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

#close-comments,
#close-catalog {
	top: -5em;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAABDRJREFUeF7tmlmoVlUUx38SBPqUvaigL4KiCGYUoiDkgIJDzhXkLJQDiuIAKjgGKjigKJoKDpWCNmipBYkTCIkoDiCKQi8G2ov2lCBI8r/t68O997tnnbP3OfcT1n79/mvttf7f/6yzz1q7Hb5aZaCd89M6A05QhkKcICcoroi4glxBrqA4BlxBcfx5DXIFuYLiGHAFxfHnNcgV5AqKY8AVFMdfWTVoNvAh0Bu4DZwCLsWF2sx6MDAeeA+4B1wHDibegzIIOgp83kKg64F1iRKQn7Ut+DoGTEm0R4Ob1ASNAU63EuBcYF9kAnOAr1vx8TFwJnKP1+apCToBfJIR3Djgl4IJjAV+zrD9Hvi0oP9mZqkJ+s8Q2D/A8FAzDPDXENW0c8A7BqNkeSVzFIK2KEjQ+8AQ4IkhWUE6AxeBXgZ8XSvoyxw1RgkPNSQsyIVAqAWuGrXfArRgUitIe+p1+4Flc8Dy1qn1VmxpixvheGHcPhtWBkH9w7mnS/b2DYitwPIa2C3AMqOfx+FcdM2IN8HKIEgbjwwkvW2KAhYDO5tgFwE7jPYvAjm/GfFmWFkEKYCpwLfmSP4/HvwQ8JMBFVvrmgZ8ZwXnwZVJkOLIo4KXwKAQ/BXgLWMiLanPaJoNK5sgRbABWJ0dSgPiUcB1M+K/AtYYsYVgVRCkwPYA8wpFWNtoLzA/sc9m7qoiSBsfT/gJoAPpZ2WTI/9VEtQxFN5hkYmdD997zyL9mMyrJEgB9QD07/czRdccdCuo8GFB+9xmVROkAAcEkqyFuDEpFXB9pV/NnWWEQVsQpHBHB5I6GGP/N5Bz1ohPBmsrgtRY06PW3pjJ80BQskaYcd9Ki3RjTAMDOV2tQQbcX4GkP3LaRcGrVlDP8CbrWzDqO+EN9qCgfW6zKgl6N3xrqVEWs9RH0rfa0xgnVtsqCdKH6CRrYBm4HwNJidzVdlMVQZpkqNuYcqlrqO5hqasKgjYBK4xZ5P1Y3QysNPouBCuboCXANmNkRdsdS4Htxj1yw8okaDpwJEdEqk8/BfxEQHXGumYA31jBeXBlETQKOAlYW64Lgd1NAl8A7DImo5brBOBXI94MK4MgNe01/dQsy7JUo1bVAG7MUWM0Y9PUtu6b9nnGPnoEZ2aweBjQI2RZdT/2yTM41Bh5hCVr4PcwrrbA63pwqBqgkU/WuguocfZ3FjD83glQo6yPAa/Rj2pgkpW6BlkvL2jkfDNnBu+HEfQbfXnhkKGmqNVRtK+jPlJWy0M1a1ZO8mvCUyso6wKVatSByOC/yLicUNcXqJS7DmyadDZdVVzB0yRXB9RkK7WCGgNTkB8B3cNdII18yrjEqdGP7gz9CVwu4zRdFkHJ/sG2duQEZfwDTpATFPeQuoJcQa6gOAZcQXH8eQ1yBbmC4hhwBcXx5zXIFeQKimPAFRTHn9egDP5eAZcekEkPBdJIAAAAAElFTkSuQmCC');
	-webkit-transition: top 0.3s ease;
	transition: top 0.3s ease;
	z-index: 9;
}

#close-comments.tip::before,
#close-comments.tip::after,
#close-catalog.tip::before,
#close-catalog.tip::after {
	content: none !important;
}

#go-comments,
#go-catalog {
	bottom: 11.75em;
	z-index: 9;
}

#go-comments,
#go-catalog,
#go-html {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAAA0FJREFUeF7tmTusjFEQx3+3UUiICCo6okBCREFoJAoSjSgQoUDhEfFIEO93kHgkXgUKxKOhoyJRUBBCQSF0GgmFEAqJRIa5Hnt398x35ny7W8w0t9j/nDPnt/+db853+4hoS6Av+LQnEIASDglAAcjXRMJB4aBwkI9AOMjHL3pQOCgc5CMQDvLxix4UDgoH+QiEg3z8ogeFg8JBPgLhIB+/XupBw4G5wFfgAfDJd7Qy2b0CaB2wBRijx3oHHAPOlDlm/iq9AOgQsL3FEQ4DO/KP58/sNqDjwKbEMU4Am/1HzVuhm4Dk57PWWPa5ClrjkjZZtwBdBFbYSvyjugSsrJjjlncD0FVgaWbl1xy5WVt2EtAgQA64MKvSv0m3gCXAd+c6pvROARqicOabqkqL7gCLgS9pqU/RCUAjFc4cX6kDsu+pkz4UXve/5eoGNBq4DswyHuKm6hYZ9Q8VkgyWtUSdgMYqnGnGyq8Ay1V7GVhmzHuqP7e3Rn0lWV2AJgA3gEnGauSxv6pBe6HCY/2lQpK/RaMOQFMVzjhjpWcBuYs1C/lsjXGdNwrpmVFvkpUGNAOQPtJ/6UwVcdJw1RDNhtRC+rn0Inm6PTLqk7KSgGarc0Yld/0tOApsq6CV274l5KkmkO5bxClNKUDzFM7Q1Ib6+QFgt1HbL5OcncaczwrprlHfUlYC0AKFI5OyJXYBBy3CJhrJ3W/MlUlbnHTbqG8q8wIaD8gsMsJYxFZ9EWaUN5XJGkeMC3wEZgKvjfoBMi8geVez0bi56E4ZtSmZrCV7W+I0sN4ibKbxApK5Q2aeVMh7H3mnUzLk8S9jQCpkgLSOHMUdJFOszD3tQgZAGQTrCHk/JANlu3gFTMzd3OugvcCeNpvL1UGuEHWGXEnkatIqpMZ9uQV4AQ3WJj2loQD5l81qHRpza6uSJ5fb88CwhqTn2qS/VVnsX60XkKwlg6H0F3la/ACe6Df2IreozLzJ6ubpWsdjvaa8z1zvV1oJQJ79ez43ACW+ogAUgHy/4nBQOCgc5CMQDvLxix4UDgoH+QiEg3z8ogeFg8JBPgLhIB+/6EHhoHCQj0A4yMcvelA4KBzkIxAO8vGLHhQO8jnoJ/U9Y0nxRq7iAAAAAElFTkSuQmCC');
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

#comments-index,
#comments {
	position: relative;
	background-size: 24px;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAAArtJREFUeF7tm72uTFEUx3+j8AYUCrmdQkShErzDzQ06JBoNEhGiQ+W+gk6UJF4CpUokdAoVD0FWzOSeDPf+19lfZ5+ZNdVkZu/18dv/tc46ZzILDl4vgUvA2cFn2/j2C/ARuGPJL5YEfm8jCUfOCwP0AnjiWLyNS/YN0FfgzDZm78j5mwGK8jqCVAASMgpAAcjRaaLE0iF5S2w1L6V76nOnvEAFoEI9KBTkANlnkeRFFSUm+AWgABQllkcgFJTHr2kPks7ychm92zOayJhLDorS2egU8zYEoAKzmzzUUJCDsqQ4eLh/lDmPnbyiGbc7Ssxx+AqpPNQoMQdlSTFKTAnx4AfG6EGHEPA0PI25vxWyekr2oP7S1xEFoLhZ1SrJ6pslS+xZXqyjdltpqL7oiadpiUlnoxDkL1YAzYOMuaSCpLP8nEdZCECOIVgRlYcaCnJQlhQdDdFVz+o4C38fJeY4fMVciiNKzEFZUowSU0LUQ5lZeLpmZr0HDIe7ww7F0zd0tH9XdDcoegPvaZ2snpI9qKfEvbEEoLib92rl/+tCQaGgUFAegVBQHr9iPeh5YhyeYc1M3wZOJ/rI2bY+3P5jyzsHpQRhUBWgi8BjYDfFQYs9UwE6CTxYwjnWItFUH1MAugU8mst/Y2sCsvIa9q4rwH3gauppTrHPAP0ETlRwvgJ0CrgLPASOV/BT0+QvA/QeuFzBiwH6AdwDzlew38LkBwN0A3hdwds7YK+C3ZYmb64eUF0D3rT0PANf14G3wyd454ALwI4zeDlkOe3YslfA9+X61KeKnp+jPSFZHJ+Az7Y4NRjrLyUAWTB2pTNAXb6mBGRQDM5KOQFoSaB71QxPqrWCZqGaKQDNSjWtAc1ONa0AzVY1LQDNWjU1AW2EamoB2hjVlAa0caopCWgjVVMKkCmn23uoUvctfwBtFLmAJXj3/QAAAABJRU5ErkJggg==');
}

#catalog {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAAAb1JREFUeF7tmjFKBEEQRd9ewEi9gYKew9TEwNBbeAtvYSIYCIaCgYlXUAQTQ8HIC8hEJm53FTW7MjPPuLraefv6N930Cv+aBFbyaRMQUMcQAQmoFiIapEEaVCOgQTV+ZpAGaVCNgAbV+JlBIxt0CJwA+42+z8BDZ95In9pP//foD+AJeI82zxp0D5wGmg8QHxt10T6BqdIld8BZdFQW0CewF2h+AVw36qJ9AlOlS76A3eioDKAD4C3Y+BK4WlOb6ROcLl12DLxERglo5JCOLo1FLrGBdTRcFxvSke150dt8JNdmVZMJ6Vl9ePRjBDTyLhYFP5s6DdKgmswapEEaVCOgQTV+2QyawlHjFbipYfkdnQU0lcPqLXA+BqQsoKlcdwwWHW0bUOYm8L9vFL+BHQGtJ/AvgIZ/xyXW0dKQ7gBymx8j2ObUI7vNz+nbQ98iIM9iIVHWFmmQBmlQjYAG1fiZQRq0XYOmcNRoEfGNYsAX3yh2IPlGMWCRbxQ7kDYCaEo3ii0+G1tiw6RTuVFsAdpoSLvNBwJuUSUeNTxq1ITXIA3SoBoBDarxM4M0SINqBDSoxs8M0iANqhHojP4BURNkSV4FT4QAAAAASUVORK5CYII=');
}

#options {
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPgo8c3ZnIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiPg0KICA8cGF0aCBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTE1IDEyYTMgMyAwIDEgMS02IDAgMyAzIDAgMCAxIDYgMFoiLz4NCiAgPHBhdGggc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0xMC40NyA0LjMyYy42MDItMS4zMDYgMi40NTgtMS4zMDYgMy4wNiAwbC4yMTguNDczYTEuNjg0IDEuNjg0IDAgMCAwIDIuMTEyLjg3NWwuNDktLjE4YzEuMzQ4LS40OTggMi42Ni44MTQgMi4xNjIgMi4xNjNsLS4xOC40ODlhMS42ODQgMS42ODQgMCAwIDAgLjg3NSAyLjExMmwuNDc0LjIxOGMxLjMwNS42MDIgMS4zMDUgMi40NTggMCAzLjA2bC0uNDc0LjIxOGExLjY4NCAxLjY4NCAwIDAgMC0uODc1IDIuMTEybC4xOC40OWMuNDk4IDEuMzQ4LS44MTQgMi42Ni0yLjE2MyAyLjE2MmwtLjQ4OS0uMThhMS42ODQgMS42ODQgMCAwIDAtMi4xMTIuODc1bC0uMjE4LjQ3M2MtLjYwMiAxLjMwNi0yLjQ1OCAxLjMwNi0zLjA2IDBsLS4yMTgtLjQ3M2ExLjY4NCAxLjY4NCAwIDAgMC0yLjExMi0uODc1bC0uNDkuMThjLTEuMzQ4LjQ5OC0yLjY2LS44MTQtMi4xNjMtMi4xNjNsLjE4MS0uNDg5YTEuNjg0IDEuNjg0IDAgMCAwLS44NzUtMi4xMTJsLS40NzQtLjIxOGMtMS4zMDUtLjYwMi0xLjMwNS0yLjQ1OCAwLTMuMDZsLjQ3NC0uMjE4YTEuNjg0IDEuNjg0IDAgMCAwIC44NzUtMi4xMTJsLS4xOC0uNDljLS40OTgtMS4zNDguODE0LTIuNjYgMi4xNjMtMi4xNjNsLjQ4OS4xODFhMS42ODQgMS42ODQgMCAwIDAgMi4xMTItLjg3NWwuMjE4LS40NzRaIi8+DQo8L3N2Zz4=');
}

#comments-index sup,
#comments sup {
	position: absolute;
	top: -0.5em;
	right: -0.5em;
}

#page-of {
	bottom: 5.75em;
	padding: 0 1em;
	width: auto;
	min-width: 48px;
	color: var(--color-3);
	border-radius: 1.75em;
	background-color: transparent;
}

#page-of span {
	flex-shrink: 0;
	white-space: nowrap;
}

.go-form:hover,
.reply-icon:hover,
#close-comments:hover,
#close-catalog:hover,
#go-comments:hover,
#go-catalog:hover,
#go-html:hover,
#comments-index:hover,
#comments:hover,
#catalog:hover,
#options:hover,
#page-of:hover {
	background-color: var(--wrap-e);
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}

#page-of:empty:hover {
	background-color: transparent;
	cursor: default;
}

/* ------------------------------------------------------------ footer */

footer {
	display: flex;
	gap: 2em;
	position: absolute;
	right: 1em;
	bottom: -11em;
	margin: 0 1em;
	padding: 1em;
}

footer > * {
	font-size: 1.2em;
}

footer a {
	color: var(--color-c);
}

footer a:hover {
	color: var(--color-9);
}

/* ------------------------------------------------------------- media */

@media (max-width: 1170px) {

	#close-comments,
	#close-catalog,
	#go-comments,
	#go-catalog,
	#tool,
	#page-of,
	.moodpage .go-form {
		left: auto;
		right: 2em;
		-webkit-transform: none;
		transform: none;
	}

}

@media (max-width: 960px) {

	.article.index,
	.article.single {
		margin-top: 1em;
	}

}

@media (max-width: 640px) {

	body {
		margin-top: 3em;
	}

	.content ol, .content ul {
		margin-left: auto;
	}

	.page-navigator.navigator-container,
	.post-navigator.navigator-container,
	.options-pannel.options-container {
		max-width: calc(100vw - 2 * 2em);
	}

	.post-navigator.navigator-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 1em;
	}

	.post-navigator li {
		border-radius: 1em !important;
	}

	.comment-head {
		padding: 0 1em;
	}

	.comment-head.fixed > div {
		padding: 0 1em;
		padding-right: calc(3em + 48px);
	}

	.mood {
		max-width: calc(100% - 48px - 2em);
	}

	.mood a {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1em;
	}

	.mood span {
		-webkit-line-clamp: 3;
	}

	.mood span.diff {
		font-size: 1em;
	}

	#tool {
		opacity: 0.7;
	}

	#options {
		display: none;
	}

	.search .submit::before,
	.search .submit::after,
	.go-form::before,
	.go-form::after,
	.reply-icon::before,
	.reply-icon::after,
	#close-comments::before,
	#close-comments::after,
	#go-comments::before,
	#go-comments::after,
	#close-catalog::before,
	#close-catalog::after,
	#go-catalog::before,
	#go-catalog::after,
	#go-html::before,
	#go-html::after,
	#comments-index::before,
	#comments-index::after,
	#comments::before,
	#comments::after,
	#catalog::before,
	#catalog::after,
	#options::before,
	#options::after,
	#page-of::before,
	#page-of::after {
		display: none;
	}

}

@media (max-width: 480px) {

	main.index,
	main.archive {
		gap: 1em;
	}

	main.index h1,
	main.archive .h1 {
		margin-left: 0;
	}

	.article.index.list::before,
	.archive .article::before {
		display: none;
	}

	main.index .article.index.list,
	main.archive .article {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		gap: 0;
		margin-left: 0;
		padding: 0;
		min-height: 42px;
	}

	main.index .article.index.list:hover,
	main.archive .article:hover {
		background-color: transparent;
		-webkit-transform: none;
		transform: none;
	}

	main.index .title.index.list a,
	main.archive .title.archive a {
		padding-left: 0;
		padding-right: 0;
		min-height: 1.6em;
		line-height: 1.6em;
	}

	main.index .article.index.list .date,
	main.archive .article .date {
		width: auto;
		text-align: left;
	}

	main .article .notice {
		margin-left: 0;
	}

	#posts .list {
		gap: 1em;
	}

	#posts .list a {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		margin-left: 0;
		padding: 0;
		min-height: 42px;
	}

	#posts .list a:hover {
		background-color: transparent;
		-webkit-transform: none;
		transform: none;
	}

	#posts .list a .pin::before {
		top: 0;
		left: auto;
		right: 0;
		-webkit-transform: none;
		transform: none;
	}

	#posts .list a::before {
		display: none;
	}

	#posts .list span.pin {
		margin-right: 1.5em;
	}

	#posts .list span:first-child {
		min-height: 1.6em;
		line-height: 1.6em;
	}

	#posts .list span:last-child {
		width: auto;
		text-align: left;
	}

	.comment-head.fixed > div {
		padding-left: 0;
	}

	#entry-comments > * {
		margin: 0;
		margin-right: 1em;
	}

	.comment-content {
		padding: 0.75em 1em;
	}

	.comment-submit {
		grid-template-columns: auto;
	}

	footer {
		flex-direction: column;
		gap: 0.5em;
		left: 0;
		right: auto;
	}

}