/***********************************************************************
 * color scheme
 ***********************************************************************/

:root {
	--accent-hue:		212;
	--warning-hue:		0;

	/* light */
	--bg-0-l:			hsl(var(--accent-hue) 15% 75%);
	--bg-1-l:			hsl(var(--accent-hue) 15% 80%);
	--bg-2-l:			hsl(var(--accent-hue) 15% 85%);
	--bg-3dim-l:		hsl(var(--accent-hue) 15% 87.5%);
	--bg-3-l:			hsl(var(--accent-hue) 15% 90%);
	--bg-4dim-l:		hsl(var(--accent-hue) 15% 92.5%);
	--bg-4-l:			hsl(var(--accent-hue) 15% 95%);

	--bg-accent-0-l:	hsl(var(--accent-hue) 70% 55%);
	--bg-accent-1-l:	hsl(var(--accent-hue) 70% 60%);

	--bg-warning-0-l:	hsl(var(--warning-hue) 70% 55%);
	--bg-warning-1-l:	hsl(var(--warning-hue) 70% 60%);

	--fg-0-l:			hsl(var(--accent-hue) 10% 10%);
	--fg-1-l:			hsl(var(--accent-hue) 10% 20%);
	--fg-2-l:			hsl(var(--accent-hue) 10% 30%);

	--fg-accent-0-l:	hsl(var(--accent-hue) 100% 30%);
	--fg-accent-1-l:	hsl(var(--accent-hue) 100% 40%);

	/* dark */
	--bg-0dim-d:		hsl(var(--accent-hue) 10% 7.5%);
	--bg-0-d:			hsl(var(--accent-hue) 10% 10%);
	--bg-1dim-d:		hsl(var(--accent-hue) 10% 12.5%);
	--bg-1-d:			hsl(var(--accent-hue) 10% 15%);
	--bg-2-d:			hsl(var(--accent-hue) 10% 20%);
	--bg-3-d:			hsl(var(--accent-hue) 10% 25%);
	--bg-4-d:			hsl(var(--accent-hue) 10% 30%);

	--bg-accent-0-d:	hsl(var(--accent-hue) 50% 45%);
	--bg-accent-1-d:	hsl(var(--accent-hue) 50% 50%);

	--bg-warning-0-d:	hsl(var(--warning-hue) 50% 45%);
	--bg-warning-1-d:	hsl(var(--warning-hue) 50% 50%);

	--fg-0-d:			hsl(var(--accent-hue) 20% 70%);
	--fg-1-d:			hsl(var(--accent-hue) 20% 80%);
	--fg-2-d:			hsl(var(--accent-hue) 20% 90%);

	--fg-accent-0-d:	hsl(var(--accent-hue) 100% 70%);
	--fg-accent-1-d:	hsl(var(--accent-hue) 100% 80%);

	/* color scheme irrelevant */
	--fg-over-color-dim:			hsl(0 0% 90%);
	--fg-over-color:				hsl(0 0% 100%);

	--thumbnail-info-bg:			hsl(0 0% 0% / 50%);
	--thumbnail-info-bg-warning:	hsl(var(--warning-hue) 80% 60%);
}

html.light, html.auto {
	--bg-standout: var(--bg-4-l);
	--bg: var(--bg-3-l);
	--division: var(--fg-2-l);
	--widget-bg-dim:				var(--bg-3dim-l);
	--widget-bg:					var(--bg-2-l);
	--widget-bg-hovered:			var(--bg-1-l);
	--widget-bg-standout-dim:		var(--bg-4dim-l);
	--widget-bg-standout:			var(--bg-3-l);
	--widget-bg-standout-hovered:	var(--bg-2-l);
	--widget-bg-switch:				var(--bg-1-l);
	--widget-bg-switch-hovered:		var(--bg-0-l);
	--widget-bg-accent:				var(--bg-accent-1-l);
	--widget-bg-accent-hovered:		var(--bg-accent-0-l);
	--widget-bg-warning:			var(--bg-warning-1-l);
	--widget-bg-warning-hovered:	var(--bg-warning-0-l);
	--fg-dim:						var(--fg-2-l);
	--fg:							var(--fg-1-l);
	--fg-lit:						var(--fg-0-l);
	--fg-accent:					var(--fg-accent-1-l);
	--fg-accent-lit:				var(--fg-accent-0-l);
	color-scheme: light;
}

html.dark {
	--bg: var(--bg-0-d);
	--bg-standout: var(--bg-1-d);
	--division: var(--fg-0-d);
	--widget-bg-dim:				var(--bg-0dim-d);
	--widget-bg:					var(--bg-1-d);
	--widget-bg-hovered:			var(--bg-2-d);
	--widget-bg-standout-dim:		var(--bg-1dim-d);
	--widget-bg-standout:			var(--bg-2-d);
	--widget-bg-standout-hovered:	var(--bg-3-d);
	--widget-bg-switch:				var(--bg-3-d);
	--widget-bg-switch-hovered:		var(--bg-4-d);
	--widget-bg-accent:				var(--bg-accent-1-d);
	--widget-bg-accent-hovered:		var(--bg-accent-0-d);
	--widget-bg-warning:			var(--bg-warning-1-d);
	--widget-bg-warning-hovered:	var(--bg-warning-0-d);
	--fg-dim:						var(--fg-0-d);
	--fg:							var(--fg-1-d);
	--fg-lit:						var(--fg-2-d);
	--fg-accent:					var(--fg-accent-0-d);
	--fg-accent-lit:				var(--fg-accent-1-d);
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	html.auto {
		--bg: var(--bg-0-d);
		--bg-standout: var(--bg-1-d);
		--division: var(--fg-0-d);
		--widget-bg-dim:				var(--bg-0dim-d);
		--widget-bg:					var(--bg-1-d);
		--widget-bg-hovered:			var(--bg-2-d);
		--widget-bg-standout-dim:		var(--bg-1dim-d);
		--widget-bg-standout:			var(--bg-2-d);
		--widget-bg-standout-hovered:	var(--bg-3-d);
		--widget-bg-switch:				var(--bg-3-d);
		--widget-bg-switch-hovered:		var(--bg-4-d);
		--widget-bg-accent:				var(--bg-accent-1-d);
		--widget-bg-accent-hovered:		var(--bg-accent-0-d);
		--widget-bg-warning:			var(--bg-warning-1-d);
		--widget-bg-warning-hovered:	var(--bg-warning-0-d);
		--fg-dim:						var(--fg-0-d);
		--fg:							var(--fg-1-d);
		--fg-lit:						var(--fg-2-d);
		--fg-accent:					var(--fg-accent-0-d);
		--fg-accent-lit:				var(--fg-accent-1-d);
	}
}

/***********************************************************************
 * page structure
 ***********************************************************************/

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--bg);
	font-family: sans-serif;
	color: var(--fg);
}

nav {
	background-color: var(--bg-standout);
	height: 4rem;
	--widget-bg: var(--widget-bg-standout);
	--widget-bg-hovered: var(--widget-bg-standout-hovered);
}

nav.shadow {
	box-shadow: 0 0 1rem rgba(0, 0, 0, .5);
}

nav .container {
	height: 100%;
	padding: 0 1rem;
	box-sizing: border-box;
	max-width: 80rem;
	margin: auto;
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}

nav .banner {
	display: flex;
	gap: .5rem;
	align-items: center;
}

nav .banner img {
	width: 2rem;
	height: 2rem;
}

nav .banner span {
	font-size: 1.25rem;
	font-weight: bold;
}

nav .searchbar {
	flex: 0 1 16rem;
}

nav .toolbar {
	display: flex;
	gap: .5rem;
}

nav .toolbar a {
	border-radius: 100%;
	box-sizing: border-box;
	width: 2.5rem;
	height: 2.5rem;
	line-height: 2.5rem;
	text-align: center;
	transition: background-color .2s, color .2s;
}

nav .toolbar a:hover {
	background-color: var(--widget-bg);
}

nav .toolbar svg {
	width: 1.25rem;
	height: 1.25rem;
	vertical-align: -.2rem;
}

main {
	width: 100%;
	word-break: break-word;
}

main.middle {
	margin-top: auto;
}

main .container {
	box-sizing: border-box;
	max-width: 48rem;
	margin: auto;
	padding: 0 1rem;
}

main .container-big {
	max-width: 64rem;
}

main .container-small {
	max-width: 28rem;
}

footer {
	margin-top: auto;
}

footer span, footer a {
	color: var(--fg-dim);
}

footer .container {
	padding: .5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
	justify-content: center;
	align-items: center;
}

/***********************************************************************
 * widgets
 ***********************************************************************/

:focus-visible {
	outline: 2px solid var(--fg-accent)
}

.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a {
	color: var(--fg);
	text-decoration: none;
	transition: color .2s;
}

a:hover {
	color: var(--fg-lit);
}

.accent {
	color: var(--fg-accent);
	transition: color .2s;
}

.accent:hover {
	color: var(--fg-accent-lit);
}

a.external > svg {
	margin-left: .2rem;
	height: .75rem;
	vertical-align: 0;
}

hr {
	border: none;
	height: 1px;
	margin: 0;
	background-color: var(--widget-bg-hovered);
}

h1, h2 {
	color: var(--fg-lit);
}

.card {
	background-color: var(--bg-standout);
	border-radius: 1rem;
	margin: 1rem 0;
	padding: 0 1rem;
	overflow: hidden;
	box-shadow: 0 0 .5rem rgba(0, 0, 0, .2);
	--widget-bg-dim: var(--widget-bg-standout-dim);
	--widget-bg: var(--widget-bg-standout);
	--widget-bg-hovered: var(--widget-bg-standout-hovered);
}

.card .bleed {
	margin-left: -1rem;
	width: calc(100% + 2rem);
}

.card h1 {
	font-size: 1.5rem;
}

.card h2 {
	font-size: 1.25rem;
}

.sign {
	text-align: center;
	margin: 8rem 0;
}

.sign > div {
	margin: 1rem 0;
}

.sign > div > svg {
	width: 100%;
	height: 100%;
	max-width: 10rem;
	max-height: 10rem;
}

.button, button, details > summary {
	color: var(--fg);
	background-color: var(--widget-bg);
	margin: 1rem 0;
	padding: .5rem 1.5rem;
	border-radius: 100vw;
	font-weight: bold;
	transition: background-color .2s;
}

.button:hover, button:hover, details > summary:hover {
	color: var(--fg-lit);
	background-color: var(--widget-bg-hovered);
}

.button {
	display: inline-block;
}

button {
	cursor: pointer;
	border: none;
	font-size: 1rem;
}

details {
	text-align: center;
}

details > summary {
	display: inline-block;
	cursor: pointer;
	list-style: none;
}

details > summary::-webkit-details-marker {
	display: none;
}

details[open] > summary {
	display: none;
}

input[type=text], textarea {
	width: 100%;
	color: var(--fg);
	background-color: var(--widget-bg);
	padding: .5rem 1rem;
	border: none;
	border-radius: 100vw;
	box-sizing: border-box;
	transition: background-color .2s;
}

input[type=text]:hover, textarea:hover {
	background-color: var(--widget-bg-hovered);
}

input[type=text]:focus, textarea:focus {
	background-color: var(--widget-bg);
	outline: 2px solid var(--widget-bg-accent);
}

label[for] {
	cursor: pointer;
}

.switch {
	appearance: none;
	width: 4rem;
	height: 2rem;
	background-color: var(--widget-bg-switch);
	border-radius: 100vw;
	cursor: pointer;
	margin: 0;
	transition: background-color .2s;
}

.switch:hover {
	background-color: var(--widget-bg-switch-hovered);
}

.switch:checked {
	background-color: var(--widget-bg-accent);
}

.switch:checked:hover {
	background-color: var(--widget-bg-accent-hovered);
}

.switch::after {
	content: '';
	position: relative;
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	top: .25rem;
	left: .25rem;
	border-radius: 100vw;
	background-color: var(--fg-over-color);
	transition: left 0.3s;
}

.switch:checked::after {
	left: calc(100% - 1.75rem);
}

select {
	color: var(--fg-lit);
	background-color: var(--widget-bg);
	border: none;
	padding: 0 1rem;
	border-radius: 100vw;
	cursor: pointer;
	text-align: center;
	height: 2rem;
	transition: background-color .2s;
	max-width: 12rem;
	text-overflow: ellipsis;
}

select:hover {
	background-color: var(--widget-bg-hovered);
}

option {
	background-color: var(--bg);
}

svg {
	vertical-align: -.125rem;
}

img {
	color: var(--fg-dim);
	object-fit: cover;
	vertical-align: bottom;
}

.img-wrapper {
	background-color: var(--widget-bg-dim);
	border-radius: .5rem;
	overflow: hidden;
	flex: 0 0 auto;
}

.img-wrapper img {
	color: transparent;
	width: 100%;
	height: 100%;
}

.img-wrapper img::before {
	color: var(--fg-dim);
}

.avatar {
	width: 3rem;
	height: 3rem;
	border-radius: 100vw;
}

.avatar img {
	object-position: center top;
}

.paginator {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .5rem;
	align-items: center;
	justify-content: center;
	line-height: 2.5rem;
}

.paginator > a {
	box-sizing: border-box;
	background-color: var(--widget-bg);
	min-width: 2.5rem;
	text-align: center;
	padding: 0 .5rem;
	border-radius: 100vw;
	font-weight: bold;
	transition: background-color .2s, color .2s;
}

.paginator a:hover, .paginator a.selected {
	background-color: var(--widget-bg-hovered);
}

.paginator a.selected {
	color: var(--fg-lit);
	cursor: default;
}

.paginator > a.disabled {
	cursor: default;
	background-color: var(--widget-bg-dim);
}

.paginator a.disabled:hover {
	background-color: var(--widget-bg-dim);
}

.grid {
	margin: 1rem 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, 10rem);
	gap: 1rem;
	text-align: left;
	justify-content: space-evenly;
}

@media (max-width: 45rem) {
	.grid {
		grid-template-columns: repeat(2, minmax(0px, 14rem));
	}
}

.grid > div {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.thumbnail {
	position: relative;
	aspect-ratio: 1;
	transition: opacity .2s;
}

.thumbnail:hover {
	opacity: .8;
}

.thumbnail .extra-info {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	padding: 4px;
	display: flex;
	gap: .25rem;
	font-size: .75rem;
	font-weight: bold;
	line-height: 1.25rem;
	color: var(--fg-over-color);
	pointer-events: none;
}

.thumbnail .content-warning {
	background-color: var(--thumbnail-info-bg-warning);
	padding: 0 .3rem;
	border-radius: .5rem;
}

.thumbnail .aigc {
	background-color: var(--thumbnail-info-bg);
	padding: 0 .5rem;
	border-radius: .5rem;
	backdrop-filter: blur(4px);
}

.thumbnail .page-count {
	margin-left: auto;
	background-color: var(--thumbnail-info-bg);
	padding: 0 .5rem;
	border-radius: 100vw;
	backdrop-filter: blur(4px);
}

.thumbnail svg {
	width: .75rem;
	height: .75rem;
	vertical-align: -.1rem;
}

.thumbnail .hidden {
	width: 25%;
	height: 25%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.thumbnail .hidden svg {
	width: 100%;
	height: 100%;
}

.grid .title {
	font-weight: bold;
}

.grid .author {
	display: none;
	gap: 0 .3rem;
	align-items: center;
}

.grid.show-author .author {
	display: flex;
}

.grid .avatar {
	width: 1.5rem;
	height: 1.5rem;
}

.expand-checkbox {
	display: none;
}

.truncated {
	max-height: 8rem;
	overflow: hidden;
	mask-image: linear-gradient(
		black 25%,
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		black 25%,
		transparent 100%
	);
}

.expand-checkbox:checked + .truncated {
	max-height: inherit;
	mask-image: none;
	-webkit-mask-image: none;
}

.expand-button, .collapse-button {
	text-align: center;
	user-select: none;
	font-weight: bold;
}

.collapse-button {
	margin-top: 1rem;
}

.expand-button > svg, .collapse-button > svg {
	margin-right: .25rem;
}

.expand-button, .expand-checkbox:checked ~ .collapse-button {
	display: block;
}

.collapse-button, .expand-checkbox:checked ~ .expand-button {
	display: none;
}

/***********************************************************************
 * /artworks
 ***********************************************************************/

.artwork-images {
	text-align: center;
	background-color: var(--widget-bg-dim);
}

.artwork-images a {
	display: block;
	margin-top: 1rem;
}

.artwork-images > a:first-child {
	margin-top: 0;
}

.artwork-images details:not([open]) {
	background-color: var(--bg-standout);
}

.artwork-images summary {
	margin-bottom: 0;
}

.artwork-images img {
	display: inline-block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 95vh;
}

.artwork-images.manga img {
	max-height: inherit;
}

.artwork-video {
	text-align: center;
	background-color: var(--widget-bg-dim);
}

.artwork-video video {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 95vh;
	vertical-align: bottom;
}

.artwork-info {
	max-width: 36rem;
	margin: 2rem auto;
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1rem 0;
}

.tags a {
	background-color: var(--widget-bg);
	padding: .3rem .75rem;
	border-radius: 100vw;
	font-size: .9rem;
	transition: background-color .2s, color .2s;
}

.tags a:hover {
	background-color: var(--widget-bg-hovered);
}

.tags a small {
	color: var(--fg);
}

.tags a:hover small {
	color: var(--fg-lit);
}

.tags .warning {
	background-color: var(--widget-bg-warning);
	color: var(--fg-over-color);
	font-weight: bold;
}

.tags .warning:hover {
	background-color: var(--widget-bg-warning-hovered);
	color: var(--fg-over-color-dim);
}

.tags .special {
	background-color: var(--widget-bg-accent);
	color: var(--fg-over-color);
	font-weight: bold;
}

.tags .special:hover {
	background-color: var(--widget-bg-accent-hovered);
	color: var(--fg-over-color-dim);
}

.stats {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	margin: 1rem 0;
}

.stats div, .stats a {
	color: var(--fg-dim);
	display: flex;
	gap: .5rem;
}

.stats a:hover {
	color: var(--fg-lit);
}

.artwork-info .author {
	display: flex;
	gap: 0 .5rem;
	align-items: center;
}

.artwork-info .author .username {
	font-weight: bold;
}

.artwork-info > .button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center
}

.artwork-info > .sign {
	margin: 4rem 0;
}

.artwork-info > .sign > div > svg {
	width: 5rem;
	height: 5rem;
}

.comment {
	display: flex;
	gap: 0 .5rem;
	margin-bottom: 1rem;
}

.comment > :first-child {
	flex: 0 0 auto;
}

.comment-info {
	display: flex;
	flex-wrap: wrap;
	gap: 0 .5rem;
	align-items: center;
}

.comment-info a {
	font-weight: bold;
}

.comment-content {
	margin: .3rem 0;
}

.comment .button {
	margin: 0 -.5rem;
}

.emoji {
	width: 1.25rem;
	margin: 0 .25rem;
}

.stamp {
	width: 6rem;
	height: 6rem;
}

@media (max-width: 32rem) {
	.container.optimize-card {
		padding: 0;
	}

	.container.optimize-card .card {
		background-color: transparent;
		border-radius: 0;
		margin: 0;
		box-shadow: inherit;
		--widget-bg-dim: inherit;
		--widget-bg: inherit;
		--widget-bg-hovered: inherit;
	}

	.container.optimize-card .artwork-images,
	.container.optimize-card .artwork-video {
		margin-left: inherit;
		width: inherit;
		background-color: inherit;
		margin: 1rem 0;
	}

	.container.optimize-card .artwork-images img,
	.container.optimize-card .artwork-video video {
		border-radius: 1rem;
		background-color: var(--widget-bg-dim);
	}

	.container.optimize-card .artwork-images details:not([open]) {
		background-color: inherit;
	}

	.container.optimize-card .artwork-info {
		margin: 1rem auto;
	}

	.container.optimize-card + .container {
		border-top: 1px solid var(--widget-bg-hovered);
	}
}

/***********************************************************************
 * /users
 ***********************************************************************/

.user-background {
	display: block;
	width: 100%;
	height: 30rem;
	mask-image: linear-gradient(
		black 20%,
		rgba(0, 0, 0, .125) 80%,
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		black 20%,
		rgba(0, 0, 0, .125) 80%,
		transparent 100%
	);
	position: relative;
	z-index: -1;
	margin-bottom: -12rem;
}

.user-info {
	display: flex;
	margin: 2rem 0;
	gap: 0 1.5rem;
}

.user-info .avatar {
	width: 6rem;
	height: 6rem;
}

.user-info h1 {
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}

.user-info .expand-button, .user-info .collapse-button {
	text-align: left;
}

@media (max-width: 45rem) {
	.user-background {
		height: 20rem;
		margin-bottom: -8rem;
	}

	.user-info {
		flex-direction: column;
		align-items: center;
	}

	.user-info h1 {
		margin-top: 1rem;
		text-align: center;
	}
	
	.user-info .expand-button, .user-info .collapse-button {
		text-align: center;
	}
}

#categories {
	width: 100%;
	display: flex;
	overflow-x: scroll;
	scrollbar-width: thin;
}

#categories a {
	border-top: 2px solid var(--widget-bg);
	padding: 1rem .5rem;
	flex: 1 1 auto;
	transition: color .2s, border-top .2s;
	font-weight: bold;
	display: flex;
	gap: 0.5rem .5rem;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
}

#categories a:hover {
	border-top: 2px solid var(--widget-bg-hovered);
}

#categories a.selected {
	border-top: 2px solid var(--fg-accent);
	color: var(--fg-lit);
}

.tag-selector {
	display: flex;
	gap: .5rem;
	margin: 1rem 0;
	overflow-x: scroll;
	scrollbar-width: thin;
	padding-bottom: .5rem;
}

.tag-selector a {
	background-color: var(--widget-bg);
	padding: .3rem 1rem;
	border-radius: .5rem;
	font-size: .9rem;
	font-weight: bold;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: background-color .2s, color .2s;
}

.tag-selector a:hover {
	background-color: var(--widget-bg-hovered);
}

.tag-selector a small {
	font-weight: normal;
	color: var(--fg);
}

.tag-selector a:hover small {
	color: var(--fg-lit);
}

/***********************************************************************
 * /tags
 ***********************************************************************/

.tag-info {
	display: flex;
	margin: 2rem 0;
	gap: 0 1.5rem;
	align-items: center;
}

.tag-info .tag-img {
	width: 6rem;
	height: 6rem;
}

.tag-info h1 {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.5rem;
}

.tag-info h1 small {
	margin-left: .5rem;
	font-weight: normal;
	font-size: 1.25rem;
	color: var(--fg-dim);
}

.tag-info p {
	margin-top: 1rem;
	margin-bottom: 0;
}

@media (max-width: 45rem) {
	.tag-info {
		flex-direction: column;
		text-align: center;
	}

	.tag-info h1 {
		margin-top: 1rem;
	}

	.tag-info h1 span {
		display: block;
		line-height: normal;
	}

	.tag-info h1 small {
		margin-left: 0;
	}
}

/***********************************************************************
 * /settings
 ***********************************************************************/

.settings h1 {
	text-align: center;
}

.settings .notice {
	background-color: var(--widget-bg-dim);
	padding: 1rem;
	border-radius: 1rem;
	font-size: .85rem;
}

.settings .notice svg {
	width: .85rem;
	height: .85rem;
	margin-right: .3rem;
}

.options > div {
	margin: 1rem 0;
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}

.options > div :last-child {
	flex-shrink: 0;
}

.settings button {
	display: block;
	width: 100%;
}

/***********************************************************************
 * /about
 ***********************************************************************/

.project-banner {
	text-align: center;
}

.project-banner img {
	max-width: 16rem;
	max-height: 16rem;
}

.license pre {
	font-size: 1rem;
	margin: 1rem 0;
	max-height: 20rem;
	white-space: pre-wrap;
	overflow-y: scroll;
}

.third-party h3 {
	margin-bottom: .5rem;
}

.third-party ul {
	margin-top: 0;
	padding-left: 1rem;
}

.third-party li {
	list-style: none;
	display: flex;
	gap: .25rem;
}