popup.css

/* Global */
html,
body {
	box-sizing: border-box;
	cursor: default;
	display: flex;
	flex-direction: column;
	font: caption;
	margin: 0;
	padding: 0;
	user-select: none;
}

html {
	background: transparent;
	color: #222426;
}

html.theme-dark {
	background: #27272a;
	color: #f8f8f2;
}

body * {
	box-sizing: border-box;
	text-align: start;
	font-size: 1.25rem;
}

h2 {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: .5rem;
}

/* Code */

code {
	display: inline-block;
	font-size: .875em;
	color: #d63384;
	word-wrap: break-word;

	transition: all 0.1s ease;
	cursor: pointer;
}

.theme-dark code {
	color: #ff79c6;
}

code.hl {
	color: #ffffff;
	background-color: #d63384;
}

.popup-page {
	padding: .5rem;
}

.popup-page div {
	margin: 1rem 0;
}

/* Buttons */
button {
	appearance: none;
	min-height: 24px;
	padding: 4px 6px;
	margin: 4px 1px;
	color: #222426;
	background-color: color-mix(in srgb, currentColor 6%, transparent);

	border: 1px solid #a1a1aa;
	border-radius: 3px;
	transition: background-color .15s, border-color .15s;
}
.theme-dark button {
	color: #f8f8f2;
	border-color: #44475a;
}

button:not([disabled],[open],:active):is(:hover,:focus-visible) {
	background-color: color-mix(in srgb, currentColor 30%, transparent);
}

button:not([disabled]):is([open],:hover:active) {
	background-color: color-mix(in srgb, currentColor 60%, transparent);
	box-shadow: 0 1px 0 hsla(210, 4%, 10%, .03) inset;
}