@import "quill/dist/quill.snow.css";
@import "prismjs/themes/prism-tomorrow.min.css";
@import "open-props/index.css";
@import "open-props/palette.css";
@import "open-props/normalize.css";
@import "open-props/buttons.css";
@import "open-props/forms.css";
@import "open-props/animations.css";
@import "open-props/utilities.css";

:root {
	--pageBackground: unset;
	--dockEdgePadding: var(--size-4);
	--second: 1s;
	--minute: calc(var(--second) * 60);
	--hour: calc(var(--minute) * 60);
	--screenSize: "large";
}

@media (max-width: 768px) {
	:root {
		--screenSize: "medium";
	}
}

@media (max-width: 576px) {
	:root {
		--screenSize: "small";
	}
}

[data-theme="light"],
.light {
	--surface-1: white;
	--surface-2: var(--color-1);
	--surface-3: var(--color-3);
	--surface-document: var(--color-4);
	--well-1: var(--color-5);
	--well-2: var(--color-6);
	--text-1: var(--color-16);
	--text-2: var(--color-12);

	button {
		--_ink-shadow: var(--_ink-shadow-light);
		--_bg: var(--_bg-light);
	}
	#documentStatus.saved div {
		background-color: rgb(34, 139, 34);
	}
	#documentStatus.saving div {
		background-color: rgb(255, 165, 0);
	}
	#documentStatus.unsaved div {
		background-color: rgb(220, 20, 60);
	}
}
[data-theme="dark"],
.dark {
	--surface-1: var(--color-11);
	--surface-2: var(--color-12);
	--surface-3: var(--color-13);
	--surface-document: var(--color-14);
	--well-1: var(--color-15);
	--well-2: var(--color-16);
	--text-1: var(--color-1);
	--text-2: var(--color-5);

	--link: oklch(90% 80% var(--palette-hue));
	--link-visited: oklch(90% 80% calc(var(--palette-hue) * 1.2));

	button {
		--_ink-shadow: var(--_ink-shadow-dark);
		--_bg: var(--_bg-dark);
	}
	button[type="submit"] {
		--_bg: var(--surface-3);
	}
	dialog {
		background-color: var(--surface-2);
	}
	pre:has(code) {
		background: #2d2d2d;
	}
}

body::before {
	background: var(--pageBackground);
	background-size: cover;
	opacity: 0.4;
	content: " ";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
/* idk what is this in open-props. this cause the page larger then full height. */
body::after {
	display: none;
}

html,
body,
main {
	height: 100%;
	font-size: 100%; /* Reset font size for Chrome web extension, see https://stackoverflow.com/a/72050395 */
}

button:disabled {
	cursor: not-allowed !important;
}

main {
	opacity: var(--uiOpacity);
	line-height: 1.5;
	font-family:
		"IBM Plex Sans", "Punctuation SC", "Inter", ui-sans-serif, system-ui,
		"PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", "Heiti SC",
		"Microsoft YaHei", "DengXian", sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	overflow-x: hidden;
	display: grid;
	grid-template-rows: var(--size-8) calc(100% - var(--size-8));
	/* grid-template-columns: repeat(1, 1fr); */
}

h1 {
	font-size: var(--font-size-6);
}
h2 {
	font-size: var(--font-size-5);
}
h3 {
	font-size: var(--font-size-4);
}
h4 {
	font-size: var(--font-size-3);
}
h5 {
	font-size: var(--font-size-2);
}
h6 {
	font-size: var(--font-size-1);
}

#documentStatus {
	margin-inline-end: auto;
	display: flex;
	align-items: center;
	gap: var(--size-2);

	/* Vertical bar between save button and status */
	hr {
		width: var(--border-size-1);
		margin-inline-end: var(--size-1);
		height: 0.8lh;
		background-color: var(--surface-1);
	}
	div {
		border-radius: 50%;
		transition: background-color 0.5s var(--ease-elastic-in-out-5);
		width: var(--size-2);
		height: var(--size-2);
	}
	span {
		font-size: var(--font-size-0);
		padding-inline: var(--size-2);
		border-radius: var(--radius-3);
		background-color: var(--surface-3);
	}
}
#documentStatus.saved div {
	background-color: rgb(148, 216, 45);
}
#documentStatus.saving div {
	background-color: rgb(252, 196, 25);
}
#documentStatus.unsaved div {
	background-color: rgb(255, 107, 107);
}

#navbar {
	padding-inline: var(--size-3);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--size-2);
	padding-bottom: var(--border-size-1);
	border-bottom: var(--border-size-1) solid var(--surface-3);
	box-shadow: var(--shadow-1);

	button {
		padding: 0;
		outline-color: unset;
		background: unset;
		border: unset;
	}

	#documentStatus button,
	label,
	#themeToggle,
	#settingsBtn {
		border-radius: var(--radius-2);
		padding: var(--size-1);
	}
	#documentStatus button:hover,
	label:hover,
	#themeToggle:hover,
	#settingsBtn:hover {
		background-color: var(--surface-2);
	}
}

#addStickyDropdownContainer {
	position: relative;

	div:first-child {
		display: grid;
		grid-template-columns: 2fr 1fr;
		border-radius: calc(var(--radius-2) + 0.15em);
		border-style: solid;
		border-width: var(--border-size-2);
		border-color: transparent;

		button {
			/* background-color: var(--surface-2); */
			padding-block: var(--size-1);
		}
		button:hover {
			background-color: var(--surface-2);
		}
		button:nth-child(1) {
			border-radius: var(--radius-2) 0 0 var(--radius-2);
		}
		button:nth-child(2) {
			border-radius: 0 var(--radius-2) var(--radius-2) 0;
		}
	}
	div:first-child:has(button:hover) {
		border-color: var(--surface-2);
	}

	.dropdownButtons {
		position: absolute;
		margin-top: var(--size-1);
		display: grid;
		background-color: var(--surface-2);
		border: var(--border-size-1) solid var(--surface-3);
		border-radius: var(--radius-conditional-2);
		box-shadow: var(--shadow-2);
		padding-block: var(--size-1);
		z-index: var(--layer-important);

		button {
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;
			border-radius: var(--radius-conditional-1);
			font-size: 0.9rem;
			white-space: nowrap;
			padding-inline: var(--size-2);
			padding-block-start: var(--size-1);
			padding-block-end: calc(
				var(--size-1) +
				0.052em
			); /* 0.052em is the myth value from https://tonsky.me/blog/centering/ */
		}
		button:hover {
			background-color: var(--surface-3);
		}
	}
}

/* Dummy sticky for getting "actual" size of css variables */
#stickySizeDummy {
	width: calc(var(--size-fluid-4) + var(--size-fluid-9));
	height: 0;
}
/* Sticky skeleton */
.sticky {
	position: absolute;
	cursor: default;
	min-width: var(--size-fluid-6);
	min-height: var(--size-fluid-6);
}
/* Sticky look and feel */
.stickyShell {
	background-color: var(--surface-2);
	color: var(--text-2);
	box-shadow: var(--shadow-2);
	border-radius: var(--radius-2);
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	border: var(--border-size-1) solid var(--well-1);
	overflow: hidden;
}
.ghost {
	.stickyShell {
		background-color: unset;
		border-color: transparent;
		color: none;
		box-shadow: none;
	}
	.resizeHandle {
		pointer-events: none;
	}
	.stickyHeader {
		opacity: 0;
		pointer-events: none;
	}
	.markdown textarea::placeholder {
		opacity: 0;
	}
}
.peakGhost.ghost {
	.sticky:not(.pin) {
		.resizeHandle,
		.stickyHeader {
			opacity: 0.5;
			pointer-events: initial;
		}
	}
}
.peakGhost .sticky.ghost:not(.pin) {
	.resizeHandle,
	.stickyHeader {
		opacity: 0.5;
		pointer-events: initial;
	}
}

.resizeHandle {
	position: absolute;
	background-color: transparent;
}
/* top */
.resizeHandle.t {
	top: var(--size-00);
	left: var(--size-00);
	right: var(--size-00);
	height: var(--size-2);
	cursor: n-resize;
}
/* right */
.resizeHandle.r {
	top: var(--size-00);
	right: var(--size-00);
	bottom: var(--size-00);
	width: var(--size-2);
	cursor: e-resize;
}
/* bottom */
.resizeHandle.b {
	bottom: var(--size-00);
	left: var(--size-00);
	right: var(--size-00);
	height: var(--size-2);
	cursor: s-resize;
}
/* left */
.resizeHandle.l {
	top: var(--size-00);
	left: var(--size-00);
	bottom: var(--size-00);
	width: var(--size-2);
	cursor: w-resize;
}
/* top-left */
.resizeHandle.t.l {
	bottom: unset;
	right: unset;
	width: var(--size-2);
	height: var(--size-2);
	cursor: nw-resize;
}
/* top-right */
.resizeHandle.t.r {
	bottom: unset;
	left: unset;
	width: var(--size-2);
	height: var(--size-2);
	cursor: ne-resize;
}
/* bottom-left */
.resizeHandle.b.l {
	top: unset;
	right: unset;
	width: var(--size-2);
	height: var(--size-2);
	cursor: sw-resize;
}
/* bottom-right */
.resizeHandle.b.r {
	top: unset;
	left: unset;
	width: var(--size-2);
	height: var(--size-2);
	cursor: se-resize;
}

.maximized {
	/* height: 100% !important; */
	/* width: 100% !important; */
	/* left: 0 !important; */
	/* top: 0 !important; */
	transition: all 0.1s var(--ease-out-5);

	.stickyShell {
		border-radius: unset;
	}

	.resizeHandle {
		pointer-events: none;
	}
}
.arranging .sticky {
	transition: all 0.1s var(--ease-out-5);
}

.pin {
	.stickyHeader,
	.resizeHandle {
		pointer-events: none;
	}
	.stickyControls {
		opacity: 0.5;
	}
}
/* 感覺這邊還是有點BUG */
.innerCrate:not(.ghost:not(.peakGhost)) .pin.sticky:not(.ghost) .stickyShell {
	outline: var(--border-size-3) solid var(--well-1);
}

.deleted {
	animation: var(--animation-scale-down), var(--animation-fade-out);
	animation-timing-function: var(--ease-elastic-in-out-4);
}

.stickyHeader {
	background-color: var(--surface-3);
	padding-bottom: var(--border-size-1);
	cursor: grab;
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: calc(var(--size-2) / 2);
}
.stickyHeader,
.resizeHandle {
	touch-action: none; /* prevent mobile device pinching */
}

.stickyControls {
	min-width: fit-content;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--size-1);

	button,
	label {
		background: unset;
		cursor: pointer;
		color: var(--text-2);
		padding: 0;
	}
	button:hover,
	label:hover {
		color: var(--text-1);
	}
}

.stickyBody {
	flex-grow: 1;
}

.markdown.editMode.splitView .stickyBody {
	display: flex;
	overflow: auto;

	.preview,
	textarea {
		display: initial;
		width: 50%;
	}
	.divider {
		width: var(--size-1);
		background-color: var(--well-1);
		cursor: col-resize;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.divider::after {
		content: "⋮";
		color: var(--text-1);
	}
	textarea:focus {
		outline: unset;
	}
}

/* Not edit mode */
.markdown {
	textarea {
		display: none;
	}
	.divider {
		display: none;
	}
	.preview {
		height: 100%;
		overflow-y: auto;
		padding-inline: var(--size-2);
		padding-block: var(--size-1);

		pre {
			max-inline-size: unset;
			overflow: auto;

			code {
				border-radius: var(--radius-conditional-2);
			}
		}
	}
}
.markdown.editMode {
	textarea {
		display: initial;
	}
	.preview {
		display: none;
	}
}

.markdown {
	.stickyBody:has(.preview:not([hidden])) {
		overflow: auto;
	}
	.preview:has(iframe) {
		padding: 0;
	}
	.stickyBody textarea {
		border: none;
		background-color: inherit;
		color: inherit;
		border-radius: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		box-shadow: none;
		resize: none;
		min-block-size: unset;
		min-inline-size: unset;
		max-inline-size: unset;
		min-block-size: unset;
		max-block-size: unset;
	}
}

.iframe {
	min-width: var(--size-fluid-8);
	iframe {
		width: 100%;
		height: 100%;
	}
	.addressBar {
		height: var(--size-5);
		background-image: var(--icon-url);
		background-position: calc(100% - 1.5ch);
		padding-inline: var(--size-2);
	}
	.addressBar:focus-visible {
		outline: unset;
	}
}
.dragging iframe,
.resizing iframe {
	/* prevent dragging, resizing interrupted when cursor accidentally captured by iframe */
	pointer-events: none;
}

.image .stickyBody {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1ch;
}

.spotify iframe {
	/* Fix spotify jagged whitespace corner problem */
	/* Overwriting open-props normalize.css settings */
	color-scheme: unset;
}
.ghost .spotify .stickyShell,
.ghost.spotify .stickyShell {
	overflow: unset;
}

.ghost .youtube iframe,
.ghost.youtube iframe {
	border-radius: 12px;
}

.ghost .iframe iframe,
.ghost.iframe iframe {
	border-radius: var(--radius-2);
}

.ghost .markdown .divider,
.ghost.markdown .divider {
	opacity: 0;
}
.peakGhost .ghost .markdown .divider,
.peakGhost .ghost.markdown .divider {
	opacity: 0.5;
}

.innerCrate {
	position: absolute;
	transform-origin: 0 0;
	/* for zooming debugging */
	/* background-color: deepskyblue; */
}

.workspace {
	overflow: hidden;
	width: 100%;
	height: 100%;
	position: absolute;
}

#mainSection:has(#settings:not(.none)) {
	#viewport {
		display: none;
	}
}

#viewport {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
#viewport.patternBg {
	background-image: radial-gradient(
		color-mix(in oklab, white 10%, transparent) 1px,
		transparent 0
	);
	background-size: 10px 10px;
	background-repeat: repeat;
}

/* @commandPalette start */
#commandPalette {
	position: fixed;
	top: 35%;
	left: 50%;
	transform: translateX(-50%);
	width: var(--size-content-3);
	background-color: var(--surface-1);
	border-radius: var(--radius-2);
	border: var(--border-size-1) solid var(--well-1);
	box-shadow: var(--shadow-3);
	padding: var(--size-3);
	z-index: var(--layer-important);
}
#searchBar {
	display: flex;
	gap: var(--size-2);
}
#commandArg {
	place-content: center;
	flex: 1;
	text-wrap: nowrap;
	padding-inline: var(--size-2);
	border: var(--border-size-2) solid var(--surface-2);
	border-radius: var(--radius-conditional-2);
}
#searchInput {
	width: 100%;
	padding: var(--size-1) var(--size-1) var(--size-1) var(--size-8);
	border: none;
	border-radius: var(--radius-conditional-2);
	background-color: var(--surface-3);
	color: var(--text-1);
}
#commandList {
	list-style-type: none;
	padding: 0;
	max-height: 300px;
	overflow-y: auto;

	li {
		padding: var(--size-2);
		border-radius: var(--radius-conditional-1);
		max-inline-size: unset; /* Reverts open-props normalize */
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	li:hover,
	li[aria-selected="true"] {
		background-color: var(--surface-3);
	}
	kbd {
		font-size: var(--font-size-0);
		margin-right: var(--size-2);
	}
}
#commandList:not(:empty) {
	margin-top: var(--size-3);
}
/* @commandPalette end */

/* @uploadDialog start */
/* @uploadDialog end */

/* @settings start */
#settings {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "main";

	nav {
		display: none;
		grid-area: nav;
		align-self: start;
		overflow-y: auto;
		top: 0;
		position: sticky;

		h2 {
			padding-block-start: var(--size-fluid-3);
			padding-block-end: var(--size-fluid-2);
			padding-inline-start: var(--size-6);
			display: block;
		}
		ul {
			padding-inline-start: 0;
			list-style-type: none;
		}
		li {
			a {
				padding-block: var(--size-2);
				text-decoration: none;
				padding-inline-start: var(--size-8);
				display: block;
			}
			a,
			a:visited {
				color: var(--text-1);
			}
			a:hover {
				color: var(--link-visited);
			}
			cursor: pointer;
		}
	}

	/* The main area of settings */
	> div {
		grid-area: main;
		padding: 0 var(--size-fluid-3) var(--size-fluid-1) var(--size-fluid-3);
		display: flex;
		flex-direction: column;
		overflow: auto;

		header {
			padding-bottom: var(--size-3);
		}

		section {
			padding-block-start: var(--size-fluid-3);
		}
		:target {
			h2 {
				color: var(--link);
			}
			h2::before {
				content: "#";
				transform: translateX(-1.2ch);
			}
		}
		hr {
			margin-block-start: var(--size-fluid-4);
		}
	}
}
#settingsBtnGroup {
	padding-block-end: var(--size-fluid-4);
}
#langDropdown {
	min-width: var(--size-fluid-8);
}
#appearancePref {
	img {
		max-width: var(--size-content-2);
	}
	h3 {
		padding-block: var(--size-3);
	}
	#hueWheel {
		touch-action: none;
		background: conic-gradient(
			from 90deg,
			hsl(0, 100%, 50%),
			hsl(60, 100%, 50%),
			hsl(120, 100%, 50%),
			hsl(180, 100%, 50%),
			hsl(240, 100%, 50%),
			hsl(300, 100%, 50%),
			hsl(360, 100%, 50%)
		);
		box-shadow: inset 0 0 var(--size-3) var(--surface-3);
		grid-area: wheel;
	}
	#hueWheel:active {
		cursor: crosshair;
	}
	label:has(.huePreview) {
		justify-items: start;
		gap: var(--size-3);
	}
	.huePreview {
		display: grid;
		width: var(--size-content-1);
		grid-template-columns: 3fr 1fr;
		grid-template-areas:
			"wheel div1"
			"wheel div2"
			"wheel div3";
		column-gap: var(--size-2);

		div {
			aspect-ratio: var(--ratio-square);
			display: flex;
			justify-content: center;
			align-items: center;
		}
		:nth-child(2) {
			font-size: var(--font-size-5);
			background-color: var(--surface-1);
			grid-area: div1;
		}
		:nth-child(3) {
			font-size: var(--font-size-3);
			background-color: var(--surface-2);
			grid-area: div2;
		}
		:nth-child(4) {
			background-color: var(--surface-3);
			grid-area: div3;
		}
	}
	#uiOpacityInput {
		max-width: var(--size-fluid-8);
	}
	#uiOpacityInput::-webkit-slider-thumb,
	#uiOpacityInput::-moz-range-thumb {
		opacity: var(--uiOpacity);
	}

	label:not(:has([type="checkbox"])) {
		display: grid;
		gap: var(--size-1);
	}

	#dockAppearanceList {
		list-style: none;
		padding-inline-start: 0;
		li {
			padding-inline-start: 0;
		}
	}
}
.backgroundPresetContainer {
	display: grid;
	grid-auto-flow: column;
	gap: var(--size-2);
	scroll-snap-type: x mandatory;
	/* padding-inline: var(--gap); */
	/* scroll-padding-inline: var(--size-8); */
}
/* .backgroundPresetContainer button { */
/*   padding: var(--size-5); */
/* } */
.dropzone {
	border-width: var(--border-size-2);
	border-style: dashed;
	border-radius: var(--radius-conditional-3);
	background-size: cover;
	padding: var(--size-5);
	aspect-ratio: var(--ratio-widescreen);
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--size-3);
	cursor: pointer;
}
.dropzone.active,
.dropzone[active] {
	background-color: var(--surface-2);
}
.formGroupHorizontal {
	display: flex;
	align-items: flex-start;
	gap: var(--size-2);
}
.formGroup {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--size-3);
}
#shortcutList {
	display: grid;
	gap: var(--size-3) var(--size-4);

	label {
		display: flex;
		flex-wrap: wrap;
		gap: var(--size-2);
		span {
			width: 100%;
		}
		input {
			font-family: var(--font-mono);
		}
	}
}
#storagePref {
	display: grid;
	gap: var(--size-3);
	label:not(:has([type="checkbox"])) {
		display: grid;
		gap: var(--size-1);
	}
}
#customJsTextArea,
#customCssTextArea {
	resize: both;
	max-inline-size: 100%;
	block-size: var(--size-content-2);
	display: block;
	margin-block-start: var(--size-2);
	white-space: pre;
}
/* @settings end */

.icon {
	background-repeat: no-repeat;
	background-image: var(--icon);
	background-position: 50%;
	background-size: auto, 2.25ch;
	min-block-size: 1lh;
	min-inline-size: 1lh;
}
.contextMenu {
	position: fixed;
	display: flex;
	flex-direction: column;
	background-color: var(--surface-1);
	border: var(--border-size-1) solid var(--surface-3);
	border-radius: var(--radius-conditional-2);
	box-shadow: var(--shadow-2);
	padding-block: var(--size-1);
	z-index: var(--layer-important);

	.menuItem {
		position: relative;
		box-shadow: unset;
		block-size: unset;
		border: none;
		display: grid;
		gap: var(--size-1);
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "iconL text iconR";
		justify-content: stretch;
		align-items: stretch;
		border-radius: var(--radius-conditional-1);
		background: unset;
		font-size: 0.9rem;
		white-space: nowrap;
		padding-inline: var(--size-2);
		padding-block-start: var(--size-1);
		padding-block-end: calc(
			var(--size-1) +
			0.052em
		); /* 0.052em is the myth value from https://tonsky.me/blog/centering/ */

		.icon.right:not(.used) {
			min-block-size: unset;
			min-inline-size: unset;
		}

		.icon.left {
			grid-area: iconL;
		}

		span {
			grid-area: text;
			text-align: left;
		}

		.icon.right {
			grid-area: iconR;
		}
	}
	.menuItem:hover,
	.menuItem[data-sub-item-active="on"] {
		background-color: var(--surface-2);
	}

	hr {
		margin-block: var(--size-1);
		border: none;
		border-top: var(--border-size-1) solid var(--surface-3);
	}
}

[data-sub-item-active="on"] > .subItem {
	display: flex;
}
[data-sub-item-active="off"] > .subItem {
	display: none;
}
.subItem {
	position: absolute;
	left: calc(100% - var(--size-1));
	top: calc((var(--size-1) + var(--border-size-1)) * -1);
}
.expandLeft {
	left: unset;
	right: calc(100% - var(--size-1));
}
.expandTop {
	top: unset;
	bottom: calc((var(--size-1) + var(--border-size-1)) * -1);
}

#newStickyBtn {
	padding: 0;
	background: unset;
}
#newStickyBtn:hover {
	background: unset;
}

/* HTML hidden attribute failed when the display has been set. So I add this
 * class for the convenience. */
.none {
	display: none !important;
}
/* brings back the power of hidden attribute */
[hidden] {
	display: none !important;
}

data {
	display: none;
}

ul {
	padding-inline-start: var(--size-7);
}

#bookmarkDialog {
	border-radius: var(--radius-conditional-3);
	box-shadow: var(--shadow-3);

	form {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"input"
			"preview"
			"button";
		gap: var(--size-4);

		.gaInput {
			grid-area: input;
			display: flex;
			flex-direction: column;
			gap: var(--size-2);
			align-items: stretch;

			label:not(:has([type="checkbox"])) {
				display: flex;
				gap: var(--size-1);
				flex-direction: column;
			}
		}
		.gaButtonGroup {
			grid-area: button;
		}
		.gaPreview {
			grid-area: preview;
		}

		.colorInputBox {
			display: flex;
			justify-content: start;
			input[type="color"] {
				inline-size: var(--size-11);
				block-size: 90%;
				border-radius: var(--radius-2);
			}
			button {
				padding-inline: 1ex;
			}
		}
	}
}

.pureBtn {
	box-shadow: unset;
	--_icon-size: unset;
	border: unset;
	font-weight: unset;
	svg {
		filter: unset;
	}
}

hr {
	margin-block: var(--size-fluid-1);
}

.dock {
	position: absolute;
}

.dock[data-placement="center"] {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.dock[data-placement="top"] {
	top: var(--dockEdgePadding);
	left: 50%;
	transform: translateX(-50%);
}

.dock[data-placement="right"] {
	right: var(--dockEdgePadding);
	top: 50%;
	transform: translateY(-50%);
}

.dock[data-placement="bottom"] {
	bottom: var(--dockEdgePadding);
	left: 50%;
	transform: translateX(-50%);
}

.dock[data-placement="left"] {
	left: var(--dockEdgePadding);
	top: 50%;
	transform: translateY(-50%);
}

.dock[data-placement="topLeft"] {
	top: var(--dockEdgePadding);
	left: var(--dockEdgePadding);
}

.dock[data-placement="topRight"] {
	top: var(--dockEdgePadding);
	right: var(--dockEdgePadding);
}

.dock[data-placement="bottomLeft"] {
	bottom: var(--dockEdgePadding);
	left: var(--dockEdgePadding);
}

.dock[data-placement="bottomRight"] {
	bottom: var(--dockEdgePadding);
	right: var(--dockEdgePadding);
}

.dock[data-grow="horizontal"] {
	width: calc(100% - 2 * var(--dockEdgePadding));
}

.dock[data-grow="vertical"] {
	height: calc(100% - 2 * var(--dockEdgePadding));
}

.alwaysOnTop {
	z-index: var(--layer-important);
}

.contextMenuBtn {
	padding-block: 0;
	padding-inline: var(--size-1);
	position: absolute;
	transform: translateY(-100%);
	right: 0;
}
.contextMenuBtn:hover {
	background-color: var(--surface-2);
}

.dummyScreen {
	aspect-ratio: var(--ratio-widescreen);
	width: var(--size-content-3);
	overflow: hidden;
	margin-bottom: var(--size-2);
	position: relative;
}
#dockAppearanceDialog:has(.active[data-placement="center"]) {
	opacity: 50%;
}
#dockAppearanceDialog {
	width: var(--size-fluid-10);
	padding-inline: var(--size-fluid-6);
	#dockPlacementSelector {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, 1fr);
		gap: var(--size-4);
		width: 100%;
		aspect-ratio: 1 / 1;

		button {
			/*background-color: #e9ecef;*/
			border-radius: var(--radius-2);
			cursor: pointer;
			position: relative;
			/*transition: background-color 0.2s;*/
		}

		button.active {
			background-color: var(--color-4);
		}

		button.grow {
			background-color: var(--color-6);
		}

		button.grow::after {
			font-family: var(--font-mono);
			position: absolute;
			transform-origin: center;
			transform: rotate(90deg);
			content: "↕";
			font-size: var(--font-size-5);
		}

		button.grow[data-placement="left"]::after,
		button.grow[data-placement="right"]::after {
			transform: unset;
		}
	}
}

#dockAppearanceDialog::backdrop {
	backdrop-filter: none;
}

#youtubeDialog {
	label:not(:has([type="checkbox"])) {
		display: flex;
		gap: var(--size-1);
		flex-direction: column;
	}
}
#spotifyDialog,
#iframeDialog {
	label:not(:has([type="checkbox"])) {
		display: flex;
		gap: var(--size-1);
		flex-direction: column;
	}
}
.gaButtonGroup {
	text-align: end;
	button + button {
		margin-inline-start: var(--size-2);
	}
}

dialog {
	padding-block: var(--size-5);
	padding-inline: var(--size-7);
}

#generalDialog {
	.dialogButtonGroup {
		margin-inline-start: var(--size-9);
		text-align: end;
		button + button {
			margin-inline-start: var(--size-2);
		}
	}
}

/* 
 * The [data-tooltip] classes contains a modified version of the hint.css
 * library originally authored by  Kushagra Gour.
 *
 * Credits: https://github.com/chinchang/hint.css
 * */
[data-tooltip]:before,
[data-tooltip]:after {
	position: absolute;
	transform: translate3d(0, 0, 0);
	visibility: hidden;
	opacity: 0;
	z-index: var(--layer-important);
	pointer-events: none;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:active:before,
[data-tooltip]:active:after {
	visibility: visible;
	opacity: 1;
}
[data-tooltip]:hover:before,
[data-tooltip]:before {
	/* Bubble triangle */
	content: "";
	position: absolute;
	background: transparent;
	border: 6px solid transparent;
	background-color: var(--well-1);
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}
[data-tooltip]:after {
	/* Help content */
	content: attr(data-tooltip);
	border-radius: var(--border-size-3);
	background-color: var(--well-1);
	color: var(--text-1);
	padding: 8px 10px;
	font-size: 1rem;
	max-inline-size: 28ch;
	inline-size: max-content;
}
[data-tooltip] {
	--rotation: -135deg;
	position: relative;
	display: inline-block;
}
[data-tooltip]:before {
	margin-left: -5.5px;
	margin-top: -6px;
	transform: rotate(var(--rotation));
}
[data-tooltip]:after {
	margin-top: calc(-1 * (1rem + 16px) / 2);
}
[data-tooltip]:before,
[data-tooltip]:after {
	left: 100%;
	top: 50%;
}
[data-tooltip]:hover:before {
	transform: translateX(8px) rotate(var(--rotation));
}
[data-tooltip]:hover:after {
	transform: translateX(8px);
}

/* For screen that is larger then 640px, stole from Tailwind CSS
 * see also: https://tailwindcss.com/docs/responsive-design */
@media (min-width: 640px) {
	#bookmarkDialog {
		form {
			grid-template-columns: 2fr 1fr;
			grid-template-areas:
				"input preview"
				"input preview"
				"... button";
		}
	}

	.dummyScreen {
		width: var(--size-content-3);
	}

	#settings {
		grid-template-columns: 2fr 7fr;
		grid-template-areas: "nav main";

		nav {
			display: initial;
		}
	}

	dialog {
		padding-block: var(--size-6);
		padding-inline: var(--size-8);
	}

	#customJsTextArea,
	#customCssTextArea {
		inline-size: var(--size-content-3);
	}
}

.note.hideToolbar {
	.ql-toolbar {
		display: none;
	}
}
.note .stickyBody {
	display: flex;
	flex-direction: column;
	overflow: hidden;

	.ql-toolbar {
		flex: 0;
		padding: 4px;
	}

	.ql-container {
		height: unset;
		flex: auto;
		overflow: auto;
	}

	/* Fix toolbar stroke color */
	.ql-snow .ql-picker {
		color: var(--text-2);
	}
	.ql-snow .ql-stroke {
		stroke: var(--text-2);
	}
	.ql-snow .ql-fill,
	.ql-snow .ql-stroke.ql-fill {
		fill: var(--text-2);
	}
	.ql-toolbar button {
		box-shadow: unset;
		--_icon-size: unset;
		border: unset;
		font-weight: unset;
	}
	.ql-container.ql-snow {
		border: unset;
	}
	.ql-snow .ql-picker-options {
		background-color: var(--surface-2);
	}
	.ql-editor.ql-blank::before {
		color: var(--text-1);
		opacity: 50%;
	}
	.ql-toolbar.ql-snow {
		border: unset;
		border-bottom: 1px solid var(--text-1);
	}
	.ql-editor.ql-blank::before {
		color: var(--text-1);
		opacity: 0.5;
		font-size: var(--font-size-2);
	}
}

.clockDock {
	display: flex;
	gap: var(--size-2);
	.timeDisplay {
		text-align: right;
		align-self: center;
		.time {
			font-size: var(--font-size-3);
			color: var(--text-1);
			display: block;
		}
		.date {
			font-size: var(--font-size-0);
			color: var(--text-2);
		}
	}
}

.bookmarkDock {
	--bookmark-direction: column;
	--bookmark-gap: var(--size-2);
	--bookmark-margin-block-start: var(--size-2);
	--bookmark-margin-inline-start: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: var(--bookmark-direction);
	align-items: center;
	justify-items: center;

	.box {
		display: flex;
		flex-direction: var(--bookmark-direction);
		gap: var(--bookmark-gap);
		flex-wrap: wrap;
	}

	.box:not(:empty) + .addBookmarkBtn {
		margin-block-start: var(--bookmark-margin-block-start);
		margin-inline-start: var(--bookmark-margin-inline-start);
	}

	.addBookmarkBtn {
		block-size: var(--size-7);
		inline-size: var(--size-7);
		padding: var(--size-1);
	}

	[draggable="true"] {
		will-change: transform;
		transition: all 200ms;
		user-select: none;
	}
	[draggable="true"].dragOver,
	[draggable="true"]:has(.dragOver) {
		transform: scale(1.2, 1.2);
	}
}
[data-placement="top"] .bookmarkDock,
[data-placement="center"] .bookmarkDock,
[data-placement="bottom"] .bookmarkDock,
[data-grow="horizontal"] .bookmarkDock {
	--bookmark-direction: row;
	--bookmark-gap: var(--size-4);
	--bookmark-margin-block-start: 0;
	--bookmark-margin-inline-start: var(--size-4);
}

.bookmark {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: var(--text-1);
	transition: transform 0.2s;

	.iconBox {
		width: var(--size-8);
		height: var(--size-8);
		border-radius: var(--radius-2);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.2em;
		position: relative;
	}

	.iconBox.noBackground {
		background-color: transparent !important;
	}

	.iconBox:not(.noBackground) {
		box-shadow: 0 2px 4px oklch(0 0 0 / 0.1);
	}

	.letter {
		font-weight: bold;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.label {
		font-size: var(--font-size-0);
		text-align: center;
		max-width: var(--size-10);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.letter.singleChar {
		font-size: var(--font-size-5);
	}

	.letter.multiChar {
		font-size: var(--font-size-4);
	}
}

.bookmark:hover {
	transform: scale(1.1, 1.1);
}

pre:has(code) {
	border-radius: var(--radius-conditional-2);
	padding: var(--size-2);
}

.debug::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-image:
		linear-gradient(45deg, #ccc 25%, transparent 25%),
		linear-gradient(-45deg, #ccc 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #ccc 75%),
		linear-gradient(-45deg, transparent 75%, #ccc 75%);
	background-size: 20px 20px;
	background-position:
		0 0,
		0 10px,
		10px -10px,
		-10px 0px;
	opacity: 0.3;
}

.face {
	flex-grow: 1;
	width: var(--size-10);
	height: var(--size-10);
	border: var(--border-size-1) solid var(--well-2);
	border-radius: 50%;
	background-color: var(--well-1);
	margin: 0 auto;
	position: relative;
	transform: rotate(180deg);

	/* Clock hands */
	.second {
		--width: 2%;
		--height: 48%;
		--color: var(--surface-1);
	}

	.minute {
		--width: 2%;
		--height: 45%;
		--color: var(--surface-2);
	}

	.hour {
		--width: 4%;
		--height: 30%;
		--color: var(--surface-3);
	}

	.hand {
		position: absolute;
		top: 50%;
		left: calc(50% - var(--width) / 2);
		width: var(--width);
		height: var(--height);
		background-color: var(--color);
		transform-origin: center 0;
		border-radius: calc(var(--width) / 2);
	}

	/* Center dot */
	.centerDot {
		position: absolute;
		width: 5%;
		height: 5%;
		background-color: var(--surface-1);
		border-radius: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.second.hand {
		animation: rotate steps(60) var(--minute) infinite;
	}

	.minute.hand {
		animation: rotate linear var(--hour) infinite;
	}

	.hour.hand {
		animation: rotate linear calc(var(--hour) * 12) infinite;
	}
}

@keyframes rotate {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(1turn);
	}
}

icon-toggle:hover {
	cursor: pointer;
	color: var(--text-1);
}

#trayTipContainer {
	position: fixed;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: var(--size-2);
	max-width: 100%;
	top: var(--size-9);
	right: var(--size-3);

	.trayTip.info {
		--level-color: #1c86ed;
	}

	.trayTip.success {
		--level-color: #10b981;
	}

	.trayTip.warning {
		--level-color: #f59e0b;
	}

	.trayTip.error {
		--level-color: #ef4444;
	}

	.trayTip {
		position: relative;
		background-color: var(--surface-2);
		border-radius: var(--radius-conditional-2);
		width: var(--size-content-2);
		padding: var(--size-3);
		display: flex;
		flex-direction: column;
		gap: var(--size-2);
		overflow: hidden;
		border-left: 4px solid #ddd;
		opacity: 1;
		border-left-color: var(--level-color);

		.trayTipHeader {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 12px;

			.trayTipCloseBtn {
				background: none;
				border: none;
				cursor: pointer;
				padding: 4px;
				border-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.trayTipTitleWrapper {
			display: flex;
			align-items: center;
			gap: 8px;
			flex: 1;

			.trayTipTitle {
				font-weight: 600;
				font-size: 16px;
				margin: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.trayTipBody {
			font-size: 14px;
			line-height: 1.4;
			word-break: break-word;
		}

		.trayTipIcon {
			color: var(--level-color);
		}
	}
}

.slideOutTop {
	animation: slideOutTop 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@keyframes slideOutTop {
	/* ----------------------------------------------
 * Generated by Animista on 2025-4-20 20:57:27
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	100% {
		transform: translateY(-1000px);
		opacity: 0;
	}
}

/*@media (max-width: 576px) {*/
/*  .trayTipContainer {*/
/*    right: 0;*/
/*    left: 0;*/
/*    align-items: center;*/
/*  }*/
/**/
/*  .trayTip {*/
/*    width: calc(100% - 32px);*/
/*    margin: 0 16px;*/
/*  }*/
/*}*/
