/* catppuccin macchiato */
:root {
	--rosewater: #f4dbd6;
	--red: #ed8796;
	--yellow: #eed49f;
	--green: #a6da95;
	--text: #cad3f5;
	--subtext1: #b8c0e0;
	--subtext0: #a5adcb;
	--overlay1: #8087a2;
	--surface2: #5b6078;
	--surface1: #494d64;
	--surface0: #363a4f;
	--base: #24273a;
	--mantle: #1e2030;
	--crust: #181926;

	--link: #8af;
	--link-visited: #c09cd9;
	--accent: #58f;
	--favicon-bg: #ddd;
	--favicon-border: #ccc;
	--bar: #5bc0de;
	--rainbow-1: #ed8796;
	--rainbow-2: #f5a97f;
	--rainbow-3: #eed49f;
	--rainbow-4: #a6da95;
	--rainbow-5: #91d7e3;
	--rainbow-6: #8aadf4;
	--rainbow-7: #c6a0f6;
	--arrow: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon fill='%23cad3f5' points='128,192 256,320 384,192'/%3E%3C/svg%3E");

	color-scheme: dark;
}

/* the themes, in the variables above; macchiato is the default */
:root[data-theme="slate"] {
	--red: #e11f3d;
	--yellow: #f1d561;
	--text: #a1b2ba;
	--subtext1: #a1b2ba;
	--subtext0: #becad0;
	--overlay1: #667077;
	--surface2: #62757e;
	--surface1: #62757e;
	--surface0: #242731;
	--base: #17191e;
	--mantle: #17191e;
	--crust: #101215;
	--link: #7c91ff;
	--link-visited: #7166a9;
	--accent: #7c91ff;
	--favicon-bg: #ddd;
	--favicon-border: #ccc;

	color-scheme: dark;
}

:root[data-theme="dracula"] {
	--red: #f55b5b;
	--yellow: #f1d561;
	--text: #f8f8f2;
	--subtext1: #f8f8f2;
	--subtext0: lightgray;
	--overlay1: #9f9fa1;
	--surface2: #44475a;
	--surface1: #44475a;
	--surface0: #44475a;
	--base: #282a36;
	--mantle: #282a36;
	--crust: #1c1d26;
	--link: #f8f8f2;
	--link-visited: #bd93f9;
	--accent: hsl(250, 92%, 66%);
	--favicon-bg: #ddd;
	--favicon-border: #ccc;

	color-scheme: dark;
}

:root[data-theme="everforest"] {
	--red: #e67e80;
	--yellow: #dbbc7f;
	--text: #d3c6aa;
	--subtext1: #859289;
	--subtext0: #859289;
	--overlay1: #8c887a;
	--surface2: #475258;
	--surface1: #475258;
	--surface0: #3d484d;
	--base: #2d353b;
	--mantle: #343f44;
	--crust: #232a2e;
	--link: #7fbbb3;
	--link-visited: #d699b6;
	--accent: #7fbbb3;
	--favicon-bg: #ddd;
	--favicon-border: #ccc;

	color-scheme: dark;
}

:root[data-theme="frappe"] {
	--red: #e78284;
	--yellow: #e5c890;
	--text: #c6d0f5;
	--subtext1: #b5bfe2;
	--subtext0: #a5adce;
	--overlay1: #868daa;
	--surface2: #626880;
	--surface1: #51576d;
	--surface0: #414559;
	--base: #303446;
	--mantle: #292c3c;
	--crust: #232634;
	--link: #8af;
	--link-visited: #c09cd9;
	--accent: #58f;
	--favicon-bg: #ddd;
	--favicon-border: #ccc;

	color-scheme: dark;
}

:root[data-theme="gruvbox"] {
	--red: #fb4934;
	--yellow: #fe8019;
	--text: #d5c4a1;
	--subtext1: #d5c4a1;
	--subtext0: #d5c4a1;
	--overlay1: #8b816d;
	--surface2: #504945;
	--surface1: #3c3836;
	--surface0: #1d2021;
	--base: #282828;
	--mantle: #32302f;
	--crust: #1c1c1c;
	--link: #b8bb26;
	--link-visited: #d3869b;
	--accent: #fabd2f;
	--favicon-bg: #ddd;
	--favicon-border: #ccc;

	color-scheme: dark;
}

:root[data-theme="mono"] {
	--red: #f55b5b;
	--yellow: #f1d561;
	--text: #acacaf;
	--subtext1: #cfcfd1;
	--subtext0: lightgray;
	--overlay1: #717174;
	--surface2: #44475a;
	--surface1: #44475a;
	--surface0: #454549;
	--base: #232325;
	--mantle: #232325;
	--crust: #18181a;
	--link: #bfbbd8;
	--link-visited: #9185e0;
	--accent: #fff;
	--favicon-bg: #ddd;
	--favicon-border: #ccc;

	color-scheme: dark;
}

:root[data-theme="latte"] {
	--red: #d20f39;
	--yellow: #df8e1d;
	--text: #4c4f69;
	--subtext1: #5c5f77;
	--subtext0: #6c6f85;
	--overlay1: #9295a5;
	--surface2: #acb0be;
	--surface1: #bcc0cc;
	--surface0: #ccd0da;
	--base: #eff1f5;
	--mantle: #e6e9ef;
	--crust: #dce0e8;
	--link: #000bbb;
	--link-visited: #9822c3;
	--accent: #3050ff;
	--favicon-bg: #ddd;
	--favicon-border: #ccc;
	--arrow: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon fill='%234c4f69' points='128,192 256,320 384,192'/%3E%3C/svg%3E");

	color-scheme: light;
}

:root[data-theme="matcha"] {
	--red: #fc4138;
	--yellow: #f27835;
	--text: #ccd7d4;
	--subtext1: #abb9b6;
	--subtext0: #c7d0ce;
	--overlay1: #808988;
	--surface2: #222b2e;
	--surface1: #222b2e;
	--surface0: #222b2e;
	--base: #1b2224;
	--mantle: #171d1f;
	--crust: #1b2224;
	--link: #ccd7d4;
	--link-visited: #2eb398;
	--accent: #2eb398;
	--favicon-bg: #ddd;
	--favicon-border: #ccc;

	color-scheme: dark;
}

:root[data-theme="mocha"] {
	--red: #f38ba8;
	--yellow: #f9e2af;
	--text: #cdd6f4;
	--subtext1: #bac2de;
	--subtext0: #a6adc8;
	--overlay1: #82879f;
	--surface2: #585b70;
	--surface1: #45475a;
	--surface0: #313244;
	--base: #1e1e2e;
	--mantle: #181825;
	--crust: #11111b;
	--link: #8af;
	--link-visited: #c09cd9;
	--accent: #58f;
	--favicon-bg: #ddd;
	--favicon-border: #ccc;

	color-scheme: dark;
}

:root[data-theme="nord"] {
	--red: #bf616a;
	--yellow: #ebcb8b;
	--text: #d8dee9;
	--subtext1: #e5e9f0;
	--subtext0: #eceff4;
	--overlay1: #8f95a0;
	--surface2: #434c5e;
	--surface1: #434c5e;
	--surface0: #4c566a;
	--base: #2e3440;
	--mantle: #3b4252;
	--crust: #2e3440;
	--link: #88c0d0;
	--link-visited: #b48ead;
	--accent: #88c0d0;
	--favicon-bg: #ddd;
	--favicon-border: #ccc;

	color-scheme: dark;
}

:root[data-theme="sorbet"] {
	--red: #d9486e;
	--yellow: #d99a2b;
	--text: #3e2a3c;
	--subtext1: #553a52;
	--subtext0: #5e4259;
	--overlay1: #76586f;
	--surface2: #b78aa9;
	--surface1: #c9a3bb;
	--surface0: #ecd0e2;
	--base: #fff7fb;
	--mantle: #fbeaf3;
	--crust: #f4dcea;
	--link: #5230b8;
	--link-visited: #b24fae;
	--accent: #5646d8;
	--favicon-bg: #ddd;
	--favicon-border: #ccc;
	--arrow: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon fill='%233e2a3c' points='128,192 256,320 384,192'/%3E%3C/svg%3E");

	color-scheme: light;
}

:root[data-theme="sorbetnight"] {
	--red: #ff7a93;
	--yellow: #ffd479;
	--text: #f2e9fa;
	--subtext1: #d8c9ea;
	--subtext0: #bfaed6;
	--overlay1: #9a88b0;
	--surface2: #54456b;
	--surface1: #3d3050;
	--surface0: #2d2338;
	--base: #1d1626;
	--mantle: #17111f;
	--crust: #110c18;
	--link: #a9b8ff;
	--link-visited: #e29bd8;
	--accent: #b69cff;
	--favicon-bg: #ddd;
	--favicon-border: #ccc;
	--arrow: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon fill='%23f2e9fa' points='128,192 256,320 384,192'/%3E%3C/svg%3E");

	color-scheme: dark;
}

/* the rainbow of the home title, in each theme's own colours; the themes not listed use the default */
:root[data-theme="dracula"] {
	--rainbow-1: #ff5555;
	--rainbow-2: #ffb86c;
	--rainbow-3: #f1fa8c;
	--rainbow-4: #50fa7b;
	--rainbow-5: #8be9fd;
	--rainbow-6: #bd93f9;
	--rainbow-7: #ff79c6;
}
:root[data-theme="everforest"] {
	--rainbow-1: #e67e80;
	--rainbow-2: #e69875;
	--rainbow-3: #dbbc7f;
	--rainbow-4: #a7c080;
	--rainbow-5: #83c092;
	--rainbow-6: #7fbbb3;
	--rainbow-7: #d699b6;
}
:root[data-theme="frappe"] {
	--rainbow-1: #e78284;
	--rainbow-2: #ef9f76;
	--rainbow-3: #e5c890;
	--rainbow-4: #a6d189;
	--rainbow-5: #99d1db;
	--rainbow-6: #8caaee;
	--rainbow-7: #ca9ee6;
}
:root[data-theme="gruvbox"] {
	--rainbow-1: #fb4934;
	--rainbow-2: #fe8019;
	--rainbow-3: #fabd2f;
	--rainbow-4: #b8bb26;
	--rainbow-5: #8ec07c;
	--rainbow-6: #83a598;
	--rainbow-7: #d3869b;
}
:root[data-theme="latte"] {
	--rainbow-1: #d20f39;
	--rainbow-2: #fe640b;
	--rainbow-3: #df8e1d;
	--rainbow-4: #40a02b;
	--rainbow-5: #04a5e5;
	--rainbow-6: #1e66f5;
	--rainbow-7: #8839ef;
}
:root[data-theme="mocha"] {
	--rainbow-1: #f38ba8;
	--rainbow-2: #fab387;
	--rainbow-3: #f9e2af;
	--rainbow-4: #a6e3a1;
	--rainbow-5: #89dceb;
	--rainbow-6: #89b4fa;
	--rainbow-7: #cba6f7;
}
:root[data-theme="nord"] {
	--rainbow-1: #bf616a;
	--rainbow-2: #d08770;
	--rainbow-3: #ebcb8b;
	--rainbow-4: #a3be8c;
	--rainbow-5: #88c0d0;
	--rainbow-6: #81a1c1;
	--rainbow-7: #b48ead;
}
:root[data-theme="sorbet"] {
	--rainbow-1: #f2788e;
	--rainbow-2: #f7a26b;
	--rainbow-3: #f2cc5c;
	--rainbow-4: #7fcf8f;
	--rainbow-5: #6fcbe3;
	--rainbow-6: #7aa2f7;
	--rainbow-7: #b18cf5;
}

:root[data-theme="sorbetnight"] {
	--rainbow-1: #ff8fa3;
	--rainbow-2: #ffb48a;
	--rainbow-3: #ffe08a;
	--rainbow-4: #9be5a8;
	--rainbow-5: #86dcef;
	--rainbow-6: #8fb2ff;
	--rainbow-7: #c4a2ff;
}
:root[data-theme="slate"] {
	--rainbow-1: #9ad0ff;
	--rainbow-2: #86b8ff;
	--rainbow-3: #7c9bff;
	--rainbow-4: #7c91ff;
	--rainbow-5: #8f84ff;
	--rainbow-6: #a97cf5;
	--rainbow-7: #c283ee;
}
:root[data-theme="mono"] {
	--rainbow-1: #f5f5f7;
	--rainbow-2: #dcdce0;
	--rainbow-3: #c3c3c8;
	--rainbow-4: #aaaab0;
	--rainbow-5: #92929a;
	--rainbow-6: #7a7a84;
	--rainbow-7: #62626c;
}
:root[data-theme="matcha"] {
	--rainbow-1: #d9f2b0;
	--rainbow-2: #b7e8a0;
	--rainbow-3: #8fdca0;
	--rainbow-4: #66d0a8;
	--rainbow-5: #3fc2a8;
	--rainbow-6: #2eb398;
	--rainbow-7: #229a85;
}

html {
	font-family: sans-serif;
	font-size: 0.9em;
	line-height: 1.15;
}
input, button, select, textarea { font-family: inherit; line-height: 1.15; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.fav { flex: none; }

body {
	margin: 0;
	background: var(--base);
	color: var(--text);
}

a { color: var(--link); text-decoration: none; }
a:visited { color: var(--link-visited); }
a:hover { text-decoration: underline; }

svg:not(.icon, .logo, .fav, .sprite) { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.icon { display: block; flex: none; }

/* search box */

#search { width: 44rem; max-width: 100%; }

.search_box {
	position: relative;
	display: flex;
	width: 44rem;
	max-width: 100%;
	height: 3.1rem;
	background: var(--surface0);
	border-radius: 0.8rem;
	box-shadow: 0 2px 8px var(--crust);
}

#q {
	flex: 1;
	min-width: 0;
	padding: 0 1rem;
	background: transparent;
	border: 0;
	outline: 0;
	color: var(--text);
	font-size: 1.1rem;
}
#q::placeholder { color: var(--overlay1); }
#q::-webkit-search-cancel-button { display: none; }

#send_search {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 3.2rem;
	padding: 0;
	color: var(--text);
	background: transparent;
	border: 0;
	border-radius: 0 0.8rem 0.8rem 0;
	cursor: pointer;
}
#send_search svg { display: block; width: 1.3rem; height: 1.3rem; }
#search_back {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 3rem;
	padding: 0;
	color: var(--text);
	background: transparent;
	border: 0;
	cursor: pointer;
}
#search_back svg { width: 1.4rem; height: 1.4rem; }
#send_search:hover { color: var(--surface0); background: var(--accent); }

/* filters */

.search_filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	width: calc(45rem - 1em);
	margin: 0.6rem 0 0 calc(10rem + 0.5em);
	visibility: hidden;
}
body:has(#urls) .search_filters { visibility: visible; }
.search_filters select {
	appearance: none;
	min-width: 0;
	max-width: 16rem;
	padding: 0.3rem 1.4rem 0.3rem 0.2rem;
	color: var(--text);
	font-size: 0.9rem;
	text-overflow: ellipsis;
	background: transparent var(--arrow) no-repeat right 0 center / 1.4rem;
	border: 0;
	cursor: pointer;
}
.search_filters select:focus { outline: 0; }
.search_filters option { background: var(--surface0); color: var(--text); }
.search_filters button {
	padding: 0.3rem 0.8rem;
	color: var(--base);
	background: var(--accent);
	border: 0;
	border-radius: 0.4rem;
	cursor: pointer;
}

/* autocomplete */

.autocomplete {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	display: none;
	max-height: min(32rem, var(--room, 32rem));
	overflow: hidden auto;
	color: var(--subtext1);
	background: var(--surface0);
	border-radius: 0 0 0.8rem 0.8rem;
	box-shadow: 0 4px 8px var(--crust);
	clip-path: inset(0 -1rem -1rem -1rem);
	z-index: 5000;
}
.autocomplete.open:has(li) { display: block; }
.search_box:has(.autocomplete.open li) { border-radius: 0.8rem 0.8rem 0 0; }
.autocomplete ul { margin: 0; padding: 0 0 0.5rem; list-style: none; }
.autocomplete ul::before { content: ""; display: block; margin: 0 1rem 0.5rem; border-top: 1px solid var(--surface1); }
.autocomplete li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	padding: 0.375rem 0.75rem;
	cursor: pointer;
}
.autocomplete li.active, .autocomplete li:hover { background: var(--surface1); }
.autocomplete-icon-slot {
	position: relative;
	display: flex;
	flex: 0 0 2rem;
	align-items: center;
	justify-content: center;
	height: 2rem;
	overflow: hidden;
	background: color-mix(in srgb, var(--subtext1) 8%, transparent);
	border-radius: 0.25rem;
}
.autocomplete-icon-slot.is-trending { background: transparent; }
.autocomplete-icon-slot.is-entity::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0.05; }
.autocomplete-icon-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.autocomplete-icon-fallback, .autocomplete-icon-trending { display: grid; place-items: center; line-height: 0; }
.autocomplete-icon-fallback { color: var(--text); opacity: 0.32; }
.autocomplete-icon-fallback svg { width: 1rem; height: 1rem; }
.autocomplete-icon-trending { opacity: 0.55; }
.autocomplete-icon-trending svg { width: 1.25rem; height: 1.25rem; fill: currentColor; stroke: none; }
.autocomplete-content { display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; }
.autocomplete-text, .autocomplete-description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autocomplete-text { line-height: 1.2; color: var(--text); }
.autocomplete-text b { font-weight: 700; }
.autocomplete-description { font-size: 0.8125rem; line-height: 1.15; opacity: 0.62; }

/* index */

#main_index {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: inherit;
	padding: 0 1rem 14rem;
}
body:has(#footer) { position: relative; min-height: 100vh; min-height: 100dvh; }
#footer { position: absolute; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 0.375rem; padding: 0.75rem 1rem; color: var(--overlay1); background: var(--mantle); font-size: 0.75rem; }
#footer a { color: inherit; }
#footer nav { display: flex; gap: 1rem; }
#footer nav a + a { padding-left: 1rem; border-left: 1px solid var(--surface1); }
#footer a:hover { color: var(--text); }
#main_index #search { display: flex; flex-direction: column; align-items: center; width: min(44rem, 100%); }
#main_index #search_view { width: 100%; }
#main_index .title {
	margin: 0 0 3.5rem;
	padding: 0 0.06em 0.12em 0;
	color: var(--accent);
	background: linear-gradient(110deg, var(--rainbow-1) 0 22%, var(--rainbow-2) 0 34%, var(--rainbow-3) 0 46%,
		var(--rainbow-4) 0 58%, var(--rainbow-5) 0 70%, var(--rainbow-6) 0 82%, var(--rainbow-7) 0);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 7rem;
	line-height: 1.1;
	letter-spacing: -0.05em;
}
#main_index .title:has(+ .motd) { margin-bottom: 1rem; }
.motd { max-width: 44rem; margin: 0 0 1.75rem; color: var(--subtext0); text-align: center; }

/* calculator */

#calculator {
	grid-area: calc;
	margin: 0.5em;
	padding: 1.1em 1.2em 1.2em;
	background: var(--mantle);
	border-radius: 0.75em;
}
.calc-screen { padding: 0.15rem 0.25rem 1rem; text-align: right; }
.calc-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	min-height: 1.5rem;
	color: var(--subtext0);
	font-size: 1rem;
}
.calc-history { flex: 1; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-preview { flex: none; margin-inline-start: auto; color: var(--overlay1); }
.calc-input {
	display: block;
	width: 100%;
	padding: 0;
	color: var(--text);
	background: transparent;
	border: 0;
	outline: 0;
	font: inherit;
	font-size: 3rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-align: right;
}
.calc-input[data-size="s"] { font-size: 2.25rem; }
.calc-input[data-size="xs"] { font-size: 1.6rem; }
.calc-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.calc-sci, .calc-pad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
.calc-sci, .calc-pad { grid-auto-rows: 3.4rem; }
.calc-sci { align-content: end; }
.calc-wide { grid-column: span 2; }
.calc-more { display: none; }
.calc-key {
	min-width: 0;
	height: 100%;
	padding: 0;
	color: var(--text);
	background: var(--surface0);
	border: 0;
	border-radius: 0.6rem;
	font: inherit;
	font-size: 1.05rem;
	cursor: pointer;
	user-select: none;
	transition: background 0.12s, transform 0.06s;
}
.calc-key:hover { background: var(--surface1); }
.calc-key:active { transform: scale(0.95); }
.calc-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.calc-digit { background: var(--surface1); font-weight: 600; }
.calc-digit:hover { background: var(--surface2); }
.calc-fn { color: var(--subtext1); font-size: 0.95rem; }
.calc-op { color: var(--accent); font-size: 1.2rem; }
.calc-clear { color: var(--red); font-weight: 600; }
.calc-mode { color: var(--subtext0); background: transparent; box-shadow: inset 0 0 0 1px var(--surface1); font-size: 0.85rem; }
.calc-mode:hover { background: var(--surface0); }
.calc-mode[aria-pressed="true"] { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.calc-equals { color: var(--base); background: var(--accent); font-size: 1.3rem; font-weight: 700; }
.calc-equals:hover { background: var(--accent); filter: brightness(1.1); }
@media (prefers-reduced-motion: reduce) { .calc-key { transition: none; } .calc-key:active { transform: none; } }

#converter {
	grid-area: calc;
	margin: 0.5em;
	padding: 1.1em 1.2em 1.3em;
	background: var(--mantle);
	border-radius: 0.75em;
}
.convert-head { margin-bottom: 0.9rem; }
.convert-select {
	appearance: none;
	min-width: 0;
	padding: 0.55rem 2.2rem 0.55rem 0.8rem;
	color: var(--text);
	background: var(--surface0) var(--arrow) no-repeat right 0.5rem center / 1.2rem;
	border: 0;
	border-radius: 0.5rem;
	font: inherit;
	font-size: 0.95rem;
	text-overflow: ellipsis;
	cursor: pointer;
}
.convert-select:hover { background-color: var(--surface1); }
.convert-select:focus-visible, .convert-value:focus-visible, .convert-swap:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.convert-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 14rem); gap: 0.6rem; }
.convert-value {
	min-width: 0;
	padding: 0.5rem 0.9rem;
	color: var(--text);
	background: var(--base);
	border: 1px solid var(--surface1);
	border-radius: 0.5rem;
	font: inherit;
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.convert-value[aria-invalid="true"] { border-color: var(--red); }
.convert-middle { display: flex; justify-content: center; margin: 0.4rem 0; }
.convert-swap {
	padding: 0.1rem 0.9rem;
	color: var(--accent);
	background: transparent;
	border: 0;
	border-radius: 0.5rem;
	font-size: 1.4rem;
	cursor: pointer;
}
.convert-swap:hover { background: var(--surface0); }
.convert-formula { min-height: 1.2em; margin-top: 0.9rem; color: var(--subtext0); overflow-wrap: anywhere; }

#selfinfo {
	grid-area: calc;
	margin: 0.5em;
	padding: 1.1em 1.2em 1.2em;
	background: var(--mantle);
	border-radius: 0.75em;
}
#selfinfo .self-label { color: var(--subtext0); }
#selfinfo .self-ip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; margin: 0.2rem 0 1rem; }
#selfinfo .self-ip strong {
	min-width: 0;
	color: var(--accent);
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}
#selfinfo .self-ip .long { font-size: 1.7rem; }
#selfinfo .self-ip span {
	padding: 0.1rem 0.6rem;
	color: var(--accent);
	background: var(--surface0);
	border-radius: 1rem;
	font-size: 0.85rem;
	font-weight: 600;
}
#selfinfo dl {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0.7rem 1.4rem;
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--surface0);
}
#selfinfo dt { color: var(--subtext0); }
#selfinfo dd { margin: 0; overflow-wrap: anywhere; }

#colorpicker {
	grid-area: calc;
	margin: 0.5em;
	padding: 1.1em 1.2em 1.2em;
	background: var(--mantle);
	border-radius: 0.75em;
}
.color-top { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; gap: 1rem; }
.color-area {
	position: relative;
	height: 13rem;
	border-radius: 0.6rem;
	background:
		linear-gradient(to top, #000, transparent),
		linear-gradient(to right, #fff, hsl(var(--hue) 100% 50%));
	cursor: crosshair;
	touch-action: none;
}
.color-area.painted { background: none; }
.color-plane { display: block; width: 100%; height: 100%; border-radius: inherit; }
.color-area:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.color-thumb {
	position: absolute;
	top: calc((100 - var(--val)) * 1%);
	left: calc(var(--sat) * 1%);
	width: 1.4rem;
	height: 1.4rem;
	margin: -0.7rem 0 0 -0.7rem;
	background: var(--solid);
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.45);
	pointer-events: none;
}
.color-swatch {
	display: flex;
	align-items: flex-end;
	padding: 0.8rem 0.9rem;
	background:
		linear-gradient(var(--color), var(--color)),
		repeating-conic-gradient(#c8c8d0 0 25%, #fff 0 50%) 0 0 / 14px 14px;
	border-radius: 0.6rem;
	box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.25);
}
.color-swatch-text { color: var(--contrast); font-family: ui-monospace, monospace; font-size: 1.1rem; font-weight: 600; }
.color-sliders { display: grid; gap: 0.85rem; margin: 1.1rem 0.1rem 1rem; }
.color-slider {
	appearance: none;
	width: 100%;
	height: 0.9rem;
	margin: 0;
	border-radius: 0.45rem;
	outline: 0;
	cursor: pointer;
}
.color-hue {
	background: linear-gradient(to right, 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%));
}
.color-alpha {
	background:
		linear-gradient(to right, transparent, var(--solid)),
		repeating-conic-gradient(#c8c8d0 0 25%, #fff 0 50%) 0 0 / 12px 12px;
}
.color-slider::-webkit-slider-thumb {
	appearance: none;
	width: 1.4rem;
	height: 1.4rem;
	background: var(--thumb, #fff);
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.45);
}
.color-slider::-moz-range-thumb {
	width: 1.1rem;
	height: 1.1rem;
	background: var(--thumb, #fff);
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.45);
}
.color-hue { --thumb: hsl(var(--hue) 100% 50%); }
.color-alpha { --thumb: var(--color); }
.color-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.color-hex { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; }
.color-name { color: var(--subtext0); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; }
.color-input {
	min-width: 0;
	padding: 0.45rem 0.7rem;
	color: var(--text);
	background: var(--base);
	border: 1px solid var(--surface1);
	border-radius: 0.5rem;
	font-family: ui-monospace, monospace;
	font-size: 0.95rem;
}
.color-input:focus-visible, .color-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.color-input[aria-invalid="true"] { border-color: var(--red); }
.color-pick {
	display: flex;
	align-items: center;
	padding: 0.45rem 0.6rem;
	color: var(--accent);
	background: var(--surface0);
	border: 0;
	border-radius: 0.5rem;
	cursor: pointer;
}
.color-pick:hover { background: var(--surface1); }
.color-pick svg { width: 1.2rem; height: 1.2rem; }
.color-boxes { display: grid; grid-template-columns: 1fr 1.05fr 1.05fr 1.3fr; gap: 0.5rem; margin-top: 0.6rem; }
.color-box { display: grid; gap: 0.25rem; padding: 0.4rem 0.45rem 0.45rem; background: var(--surface0); border-radius: 0.5rem; }
.color-box .color-input { padding: 0.3rem 0.35rem; font-size: 0.82rem; }

/* header */

#search_header {
	display: grid;
	grid-template-columns: 3rem 44rem 1fr;
	grid-template-areas: "logo search ." "spacer categories categories";
	gap: 0.7rem 0.5em;
	padding: 1.5rem 2rem 0 7rem;
	background: var(--mantle);
}
#search_header #search { display: contents; }
.logo stop:nth-child(1), .logo stop:nth-child(2) { stop-color: var(--rainbow-1); }
.logo stop:nth-child(3), .logo stop:nth-child(4) { stop-color: var(--rainbow-2); }
.logo stop:nth-child(5), .logo stop:nth-child(6) { stop-color: var(--rainbow-3); }
.logo stop:nth-child(7), .logo stop:nth-child(8) { stop-color: var(--rainbow-4); }
.logo stop:nth-child(9), .logo stop:nth-child(10) { stop-color: var(--rainbow-5); }
.logo stop:nth-child(11), .logo stop:nth-child(12) { stop-color: var(--rainbow-6); }
.logo stop:nth-child(13), .logo stop:nth-child(14) { stop-color: var(--rainbow-7); }
#search_logo { grid-area: logo; display: flex; justify-content: center; align-items: center; padding: 0.5rem 10px 0; color: var(--accent); }
#search_logo svg { flex: 1; width: 30px; height: 30px; margin: 0.5rem 0 auto; }
#search_view { grid-area: search; min-width: 0; padding-top: 0.5rem; }

/* categories */

#categories { grid-area: categories; min-width: 0; overflow-x: auto; scrollbar-width: none; user-select: none; }
#categories::-webkit-scrollbar { display: none; }
#search_header #categories { padding: 4px 0 6px; }
#categories_container { display: flex; flex-wrap: nowrap; gap: 8px; }
.category_button {
	flex: none;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 0;
	padding: 8px;
	color: var(--subtext0);
	font-size: 0.9rem;
	line-height: 1;
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}
.category_button svg { width: 1.5rem; height: 1.5rem; }
.category_button:hover { color: var(--text); background: var(--surface0); }
.category_button.selected { color: var(--accent); background: var(--surface0); }

/* layout */

#results {
	display: grid;
	grid-template-columns: 45rem 25rem;
	grid-template-rows: min-content min-content min-content 1fr min-content;
	grid-template-areas:
		"calc sidebar"
		"answers sidebar"
		"urls sidebar"
		"urls sidebar"
		"pagination sidebar";
	column-gap: 5rem;
	margin: 1rem 0 2rem 10rem;
}

#answers { grid-area: answers; }
#urls { grid-area: urls; min-width: 0; }
#sidebar { grid-area: sidebar; min-width: 0; }
#pagination { grid-area: pagination; }

/* loading */

.loading {
	position: relative;
	z-index: 10;
	height: 3px;
	margin-bottom: -3px;
	overflow: hidden;
}
.loading::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	background: var(--accent);
	border-radius: 0 2px 2px 0;
	animation: progress 2.5s ease-in-out forwards;
}
/* reaches 90% at the search timeout, then creeps on while the last responses arrive */
@keyframes progress {
	0% { width: 0; }
	80% { width: 90%; }
	100% { width: 98%; }
}
.t1::before { animation-duration: 1.25s; } .t2::before { animation-duration: 2.5s; }
.t3::before { animation-duration: 3.75s; } .t4::before { animation-duration: 5s; }
.t5::before { animation-duration: 6.25s; } .t6::before { animation-duration: 7.5s; }
.t7::before { animation-duration: 8.75s; } .t8::before { animation-duration: 10s; }
.t9::before { animation-duration: 11.25s; } .t10::before { animation-duration: 12.5s; }
body:has(#urls) .loading { display: none; }

/* results */

article.result {
	margin: 0.5em;
	padding: 0.75em;
	background: var(--mantle);
	border-radius: 0.75em;
	overflow-wrap: anywhere;
}

.url_header {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
	color: var(--subtext1);
	font-size: 1rem;
}
.url_header:visited { color: var(--subtext1); }
.url_header:hover { text-decoration: none; }

.favicon { flex: none; display: flex; }
.favicon img, .favicon .fav {
	display: flex;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--favicon-bg);
	border: 1px solid var(--favicon-border);
	border-radius: 17%;
}

.url_wrapper { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.url_host { color: var(--subtext1); }

article.result h3 {
	margin: 0.4rem 0;
	font-size: 1.2rem;
	word-wrap: break-word;
}
article.result h3 a { font-size: 1.1em; font-weight: normal; }

article.result .content {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.24;
}
.content .highlight { color: var(--text); font-weight: bold; }
.content.empty_element { color: var(--overlay1); font-style: italic; }

.result_sub_header {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1rem;
	margin-bottom: 0.4rem;
	color: var(--subtext0);
	font-size: 0.8em;
}
.published_date { color: var(--overlay1); }

article.result .attributes { margin-top: 0.5rem; font-size: 0.85rem; line-height: 1.4; }
article.result .attributes span { color: var(--overlay1); }
article.result .attributes .links { margin-top: 0.3rem; }

.video_body { display: flex; align-items: flex-start; gap: 0.9rem; }
.video_body a.thumbnail_link { flex: none; float: none; width: 12rem; aspect-ratio: 16 / 9; margin: 0; }
.video_text { flex: 1; min-width: 0; }
.thumbnail_length {
	position: absolute;
	right: 0.3rem;
	bottom: 0.3rem;
	padding: 0.1rem 0.35rem;
	color: #fff;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	background: rgb(0 0 0 / 75%);
	border-radius: 0.3rem;
}

article.result .engines {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.3rem;
	clear: both;
	padding-top: 0.5rem;
}
.engines span {
	padding: 0.1rem 0.45rem;
	color: var(--subtext0);
	font-size: 0.7rem;
	line-height: 1.4;
	background: var(--surface0);
	border-radius: 0.35rem;
}

a.thumbnail_link {
	position: relative;
	display: block;
	float: right;
	width: 8rem;
	aspect-ratio: 4 / 3;
	margin: 0 0 0.5rem 0.5rem;
	overflow: hidden;
	background: var(--base);
	border-radius: 0.5rem;
}
img.thumbnail {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#answers {
	margin: 0.5em;
	padding: 1.1em 1.2em;
	background: var(--mantle);
	border-radius: 0.75em;
	overflow-wrap: anywhere;
}
.answer p { margin: 0; font-size: 1.05rem; line-height: 1.45; }
.answer + .answer { margin-top: 1em; padding-top: 1em; border-top: 1px solid var(--surface0); }

.definition .def-word { margin: 0 0 0.2rem; font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.def-class { display: flex; align-items: center; gap: 0.8rem; margin: 1rem 0 0.5rem; color: var(--accent); font-style: italic; }
.def-class::after { content: ""; flex: 1; height: 1px; background: var(--surface1); }
.definition ol { margin: 0; padding: 0 0 0 1.7rem; }
.definition li { margin: 0 0 0.6rem; padding-left: 0.4rem; line-height: 1.45; }
.definition li::marker { color: var(--overlay1); font-variant-numeric: tabular-nums; }
.definition .def-example { display: block; margin-top: 0.15rem; color: var(--subtext0); font-style: italic; }
.def-more summary { display: inline-flex; align-items: center; margin: 0.2rem 0 0.7rem; color: var(--accent); cursor: pointer; list-style: none; }
.def-more summary::-webkit-details-marker { display: none; }
.def-more[open] summary { display: none; }


.no-results { margin: 1.5em 0.5em; }
.no-results p { margin: 0.4em 0; }
.no-results p + p { color: var(--subtext0); font-size: 0.9em; }

/* pagination */

#pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 1.5rem 0.5em;
}
.previous_page, .next_page {
	padding: 0.6rem 1rem;
	background: var(--surface0);
	border-radius: 0.6rem;
	color: var(--text);
}
.previous_page:visited, .next_page:visited { color: var(--text); }
.next_page { order: 2; }
.numbered_pagination { display: flex; gap: 0.2rem; margin: 0 auto; }
.page_number, .page_number_current { padding: 0.5rem 0.7rem; border-radius: 0.4rem; }
.page_number_current { color: var(--base); background: var(--accent); font-weight: bold; }

.infinite_scroll #pagination { display: none; }
.infinite_loader { grid-area: pagination; display: flex; justify-content: center; height: 2rem; margin: 1.5rem 0.5em; }
.infinite_loader.active::before {
	content: "";
	width: 20px;
	height: 20px;
	border: 5px solid rgb(255 255 255 / 20%);
	border-left-color: transparent;
	border-radius: 50%;
	animation: spin 1.2s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* sidebar */

.infobox {
	margin: 0.5em 0;
	padding: 1.1em 1.2em;
	background: var(--mantle);
	border-radius: 0.75em;
	font-size: 0.9rem;
	overflow-wrap: anywhere;
}
.infobox .infobox_image {
	display: block;
	max-width: 100%;
	max-height: 12rem;
	margin: 0 auto 1rem;
	border-radius: 0.5rem;
}
.infobox h2 { margin: 0; font-size: 1.4rem; font-weight: 600; }
.infobox .description { margin: 0.2rem 0 0; color: var(--subtext0); font-size: 0.85rem; }
.infobox .extract { margin: 0.8rem 0 0; color: var(--subtext1); line-height: 1.45; }
.infobox .attributes { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; margin: 0.9rem 0 0; }
.infobox .attributes dt { color: var(--overlay1); }
.infobox .attributes dd { margin: 0; }

.infobox .also { margin-top: 1rem; }
.also_label { color: var(--overlay1); font-size: 0.8rem; }
.also ul { margin: 0.25rem 0 0 0.3rem; padding: 0; list-style: none; }
.also li { position: relative; padding: 0.3rem 0 0.3rem 1.1rem; line-height: 1.3; }
.also li::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	border-left: 1px solid var(--surface2);
}
.also li:last-child::before { bottom: auto; height: 0.95rem; }
.also li::after {
	content: "";
	position: absolute;
	top: 0.95rem;
	left: 0;
	width: 0.75rem;
	border-top: 1px solid var(--surface2);
}
.also li span { display: block; color: var(--subtext0); font-size: 0.8rem; }

.infobox .links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.infobox .links a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.6rem;
	color: var(--text);
	font-size: 0.8rem;
	background: var(--surface0);
	border-radius: 1rem;
}
.infobox .links a:hover { text-decoration: none; background: var(--surface1); }
.infobox .links img, .infobox .links .fav { width: 0.95rem; height: 0.95rem; border-radius: 3px; }
.infobox .source, .answer .source {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: 1rem;
	color: var(--overlay1);
	font-size: 0.8rem;
}
.answer .source { margin-top: 0.6rem; }
.infobox .source:visited, .answer .source:visited { color: var(--overlay1); }
.infobox .source:hover, .answer .source:hover { color: var(--subtext1); text-decoration: none; }
.source svg { width: 0.75rem; height: 0.75rem; }

#engines_msg {
	margin: 0.5em 0;
	padding: 0.8em 1em;
	background: var(--mantle);
	border-radius: 0.75em;
	font-size: 0.8rem;
}
.timings_header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
.timings_header svg { display: none; width: 1rem; height: 1rem; color: var(--overlay1); transition: transform 0.15s; }
#engines_msg .count { color: var(--overlay1); }
#engines_msg .limit { color: var(--overlay1); font-weight: normal; }
#engines_msg .total { margin-left: auto; font-weight: bold; font-variant-numeric: tabular-nums; }

.timings { margin: 0; padding: 0; list-style: none; }
.timings li {
	display: grid;
	grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) 2.2rem;
	align-items: center;
	column-gap: 0.6rem;
	padding: 0.15rem 0;
}
.timings .label { display: flex; align-items: center; gap: 0.4rem; min-width: 0; white-space: nowrap; }
.timings .label img, .timings .label .fav {
	flex: none;
	width: 1rem;
	height: 1rem;
	background-color: var(--favicon-bg);
	border: 1px solid var(--favicon-border);
	border-radius: 17%;
}
.timings .suspended .label img, .timings .suspended .label .fav { filter: grayscale(1); opacity: 0.5; }
.timings .name { flex: none; }
.timings .track { width: 100%; height: 3px; border-radius: 2px; }
.timings .track .bg { fill: var(--surface0); stroke: none; }
.timings .track .fill { fill: var(--c); stroke: none; }
.timings .time { color: var(--subtext0); text-align: right; font-variant-numeric: tabular-nums; }
.timings .ok { --c: var(--overlay1); }
.timings .timeout { --c: var(--yellow); }
.timings .error { --c: var(--red); }
.timings .suspended { --c: var(--overlay1); }
.timings .suspended .name, .timings .suspended .time { color: var(--overlay1); }

/* images */

#results.category-images { display: block; margin: 1.2rem 1.5rem 2rem; }
.category-images #urls {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
	grid-auto-flow: row dense;
	gap: 1rem 0.5rem;
}
.category-images #engines_msg { grid-column: -8 / -1; grid-row: 1; align-self: start; margin: 0; }
.category-images .no-results { grid-column: 1 / -1; grid-row: 1; }

article.result.result-images {
	display: flex;
	flex-direction: column;
	grid-column: span var(--s);
	min-width: 0;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
}
.s2 { --s: 2; } .s3 { --s: 3; } .s4 { --s: 4; } .s5 { --s: 5; } .s6 { --s: 6; }

.image_thumb {
	position: relative;
	display: block;
	height: 8rem;
	overflow: hidden;
	background: var(--surface0);
	border-radius: 0.6rem;
}
.image_thumb:focus { outline: none; }
.image_thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.image_resolution {
	position: absolute;
	right: 0.35rem;
	bottom: 0.35rem;
	padding: 0.15rem 0.4rem;
	color: #fff;
	font-size: 0.7rem;
	white-space: nowrap;
	background: rgb(0 0 0 / 65%);
	border-radius: 0.3rem;
	opacity: 0;
	transition: opacity 0.15s;
}
.result-images:hover .image_resolution, .result-images.selected .image_resolution { opacity: 1; }
.result-images.selected .image_thumb { outline: 3px solid var(--accent); outline-offset: 2px; }

.image_source { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; padding: 0.4rem 0.1rem 0; color: var(--text); }
.image_source:visited { color: var(--text); }
.image_site { display: flex; align-items: center; gap: 0.35rem; min-width: 0; color: var(--subtext0); font-size: 0.75rem; }
.image_site img, .image_site .fav {
	flex: none;
	width: 1rem;
	height: 1rem;
	background-color: var(--favicon-bg);
	border: 1px solid var(--favicon-border);
	border-radius: 17%;
}
.image_site span, .image_title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image_title { font-size: 0.85rem; }

.image_detail {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 6000;
	display: flex;
	flex-direction: column;
	width: min(38rem, 42vw);
	padding: 1rem 1.25rem 1.5rem;
	overflow-y: auto;
	background: var(--mantle);
	border-left: 1px solid var(--surface0);
	box-shadow: -4px 0 16px var(--crust);
}
.image_detail[hidden] { display: none; }
.image_detail_open #results.category-images { margin-right: calc(min(38rem, 42vw) + 1.5rem); }

.detail_header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.detail_site { display: flex; align-items: center; gap: 0.5rem; min-width: 0; color: var(--text); font-size: 0.9rem; }
.detail_site:visited { color: var(--text); }
.detail_site img {
	flex: none;
	width: 1.4rem;
	height: 1.4rem;
	background-color: var(--favicon-bg);
	border: 1px solid var(--favicon-border);
	border-radius: 17%;
}
.detail_site span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail_buttons { display: flex; gap: 0.4rem; margin-left: auto; }
.detail_buttons button {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	color: var(--text);
	background: var(--surface0);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.detail_buttons button:hover { background: var(--surface1); }
.detail_buttons button:disabled { opacity: 0.35; cursor: default; }
.detail_buttons button:disabled:hover { background: var(--surface0); }
.detail_buttons svg { width: 1.1rem; height: 1.1rem; }

.detail_image {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-height: 14rem;
	overflow: hidden;
	background: var(--crust);
	border-radius: 0.75rem;
}
.detail_image img { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; }
.detail_body { padding-top: 1rem; overflow-wrap: anywhere; }
.detail_body h3 { margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: normal; }
.detail_title, .detail_title:visited { color: var(--text); }
.detail_content { margin: 0 0 0.8rem; color: var(--subtext1); font-size: 0.9rem; }
.detail_content:empty { display: none; }
.detail_body dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; margin: 0; font-size: 0.85rem; }
.detail_body dt { color: var(--overlay1); }
.detail_body dd { margin: 0; }

/* tablet */

@media (max-width: 79.75em) {
	#search_header {
		grid-template-columns: 3rem minmax(0, 44rem);
		grid-template-areas: "logo search" "spacer categories";
		justify-content: center;
		padding: 1.5rem 0.5rem 0;
	}
	.search_filters { width: min(45rem, 100%); margin: 0.6rem auto 0; padding: 0 0.5em; }
	#results {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 46rem;
		margin: 1rem auto 2rem;
		padding: 0 0.5rem;
	}
	#sidebar { display: contents; }
	#calculator, #converter, #colorpicker, #selfinfo { order: 0; }
	#answers { order: 1; }
	#infoboxes { order: 2; margin: 0 0.5em; }
	#engines_msg { order: 3; margin: 0.5em; padding: 0.7em 1em; }
	#urls { order: 4; }
	#pagination, .infinite_loader { order: 5; }
	.timings_header { margin: 0; cursor: pointer; user-select: none; }
	.timings_header svg { display: block; }
	#engines_msg .timings { display: none; margin-top: 0.6rem; }
	#timings_toggle:checked ~ .timings { display: block; }
	#timings_toggle:checked + .timings_header svg { transform: rotate(180deg); }
	.category-images #engines_msg { grid-column: 1 / -1; grid-row: 1; margin: 0; }
	#results.category-images { display: block; max-width: none; margin: 1rem 0 2rem; padding: 0 1rem; }
	.image_detail_open #results.category-images { margin-right: calc(min(38rem, 42vw) + 1rem); }
}

/* narrow tablet: keep the labelled tabs on one line */

@media (max-width: 45em) {
	#categories_container { flex-wrap: nowrap; gap: 4px; }
	.category_button { padding: 8px 6px; }
}

/* each result runs in its own text's direction, whatever the interface language */
#results :is(h2, h3, p, dt, dd, li, .url_wrapper, .image_title) { unicode-bidi: plaintext; }

/* preferences */

#search_header { position: relative; }
/* same spot on every page, centred on the results page search bar */
#links { position: absolute; top: 2.35rem; right: 1.5rem; display: flex; gap: 0.25rem; }
:is(.page, #preferences) h1 { padding-inline-end: 5.5rem; }
[dir="rtl"] #links { right: auto; left: 1.5rem; }
/* on results they would run into the search bar, so they go once it gets close */
@media (max-width: 57.5em) { #search_header #links { display: none; } }
#links a { display: flex; padding: 0.5rem; color: var(--subtext0); border-radius: 0.5rem; }
#links a:hover { color: var(--text); background: var(--surface0); }
#links svg { width: 1.4rem; height: 1.4rem; }

.page { max-width: 46rem; margin: 2rem auto 4rem; padding: 0 1rem; line-height: 1.6; }
.page h1 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; font-size: 1.6rem; line-height: 1.2; }
.page h1 a { display: flex; padding: 0.3rem; color: var(--subtext0); border-radius: 0.5rem; }
.page h1 a:hover { color: var(--text); background: var(--surface0); }
.page h1 svg { width: 1.4rem; height: 1.4rem; }
[dir="rtl"] .page h1 svg { transform: scaleX(-1); }
.page h2 { margin: 1.5rem 0 0.4rem; font-size: 1.2rem; }
.page p { margin: 0.5rem 0; }
.page p, .page li { color: var(--subtext1); }
.page ul { padding-inline-start: 1.25rem; }
.page li { margin: 0.35rem 0; }
.page code { padding: 0.1rem 0.4rem; color: var(--text); font-size: 0.9em; background: var(--surface0); border-radius: 0.3rem; }
.page a:not(h1 a) { color: var(--accent); }
.page dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; margin: 0.75rem 0; }
.page dt { color: var(--text); }
.page dd { margin: 0; color: var(--subtext1); }
.page dl.stacked { display: block; }
.page dl.stacked dd { margin: 0.1rem 0 0.5rem; }

#preferences { max-width: 46rem; margin: 2rem auto 0; padding: 0 1rem; }
#preferences h1 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1.5rem; font-size: 1.6rem; }
#preferences h1 a { display: flex; padding: 0.3rem; color: var(--subtext0); border-radius: 0.5rem; }
#preferences h1 a:hover { color: var(--text); background: var(--surface0); }
#preferences h1 svg { width: 1.4rem; height: 1.4rem; }
[dir="rtl"] #preferences h1 svg { transform: scaleX(-1); }
#preferences h2 { margin: 2.25rem 0 0.25rem; font-size: 1.2rem; }
.pref {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--mantle);
}
.pref:not(.pref + .pref) { border-radius: 0.8rem 0.8rem 0 0; }
.pref:has(+ :not(.pref)) { border-radius: 0 0 0.8rem 0.8rem; }
.pref + .pref { border-top: 1px solid var(--surface0); }
.pref label { display: flex; flex-direction: column; gap: 0.2rem; }
.pref label span { color: var(--subtext0); font-size: 0.875rem; }
.pref select {
	appearance: none;
	flex: none;
	width: 20rem;
	min-width: 0;
	max-width: 20rem;
	padding: 0.55rem 2.2rem 0.55rem 0.8rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text);
	font-size: 0.95rem;
	background: var(--surface0) var(--arrow) no-repeat right 0.5rem center / 1.2rem;
	border: 0;
	border-radius: 0.5rem;
	cursor: pointer;
}
.engine_group { margin-bottom: 0.75rem; overflow: hidden; background: var(--mantle); border-radius: 0.8rem; }
.engine_group:first-of-type { margin-top: 1.5rem; }
.engine_group summary {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.9rem 1.25rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
	user-select: none;
}
.engine_group summary::-webkit-details-marker { display: none; }
.engine_group summary:hover { background: color-mix(in srgb, var(--surface0) 45%, transparent); }
.engine_group summary svg { flex: none; width: 1.15rem; height: 1.15rem; color: var(--subtext0); }
.engine_group summary .count { margin-inline-start: auto; color: var(--subtext0); font-size: 0.85rem; font-weight: 400; }
.engine_group summary svg:last-child { color: var(--subtext0); transition: transform 0.15s; }
.engine_group[open] summary svg:last-child { transform: rotate(180deg); }
.engine_group .table { overflow-x: auto; }
.engine_group table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.925rem; }
.engine_group th {
	padding: 0.4rem 0.5rem;
	color: var(--subtext0);
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
}
.engine_group td { padding: 0.5rem; border-top: 1px solid var(--surface0); }
.engine_group :is(th, td) { text-align: center; }
.engine_group :is(th, td):nth-child(2) { width: auto; text-align: start; overflow-wrap: anywhere; }
.engine_group td label { display: block; cursor: pointer; }
.engine_group :is(th, td):first-child { width: 4rem; padding-inline-start: 1rem; }
.engine_group :is(th, td):nth-child(3) { width: 6.5rem; }
.engine_group :is(th, td):nth-child(n + 4) { width: 6.5rem; }
.engine_group tbody tr:hover { background: color-mix(in srgb, var(--surface0) 45%, transparent); }
.engine_group td svg { display: block; width: 1.1rem; height: 1.1rem; margin: auto; }
.engine_group .yes { color: var(--accent); }
.engine_group .no { color: var(--surface2); }
.engine_group .other { color: var(--yellow); }
.engine_group code { padding: 0.1rem 0.4rem; color: var(--subtext1); font-size: 0.85rem; background: var(--surface0); border-radius: 0.3rem; }
.switch {
	position: relative;
	appearance: none;
	width: 2.25rem;
	height: 1.3rem;
	margin: 0;
	vertical-align: middle;
	background: var(--surface1);
	border-radius: 1rem;
	cursor: pointer;
	transition: background 0.15s;
}
.switch:checked::after { background: var(--crust); }
.switch::after {
	content: "";
	position: absolute;
	top: 0.15rem;
	left: 0.15rem;
	width: 1rem;
	height: 1rem;
	background: var(--text);
	border-radius: 50%;
	transition: transform 0.15s;
}
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(0.95rem); }
[dir="rtl"] .switch::after { left: auto; right: 0.15rem; }
[dir="rtl"] .switch:checked::after { transform: translateX(-0.95rem); }
.switch:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
#preferences .buttons {
	position: sticky;
	bottom: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	margin: 1.5rem -1rem 0;
	padding: 1rem;
	background: var(--base);
	border-top: 1px solid var(--surface0);
}
#preferences button[type="submit"] {
	padding: 0.6rem 1.75rem;
	color: var(--crust);
	font-size: 1rem;
	font-weight: 600;
	background: var(--text);
	border: 0;
	border-radius: 0.6rem;
	cursor: pointer;
}
#preferences button[type="submit"]:hover { background: var(--subtext1); }
#preferences .buttons a { color: var(--subtext0); }
#preferences .buttons a:hover { color: var(--text); }

/* not found */

#not_found {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 0 1rem;
	text-align: center;
}
#not_found h1 { margin: 0 0 0.75rem; font-size: 2rem; }
#not_found p { margin: 0; color: var(--subtext1); }
#not_found a { color: var(--accent); }

/* stats */

.stats { overflow-x: auto; background: var(--mantle); border-radius: 0.8rem; }
.stats table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.stats th { padding: 0.6rem 0.75rem; color: var(--subtext0); font-size: 0.8rem; font-weight: 600; text-align: start; white-space: nowrap; }
.stats td { padding: 0.5rem 0.75rem; border-top: 1px solid var(--surface0); color: var(--subtext1); }
.stats td:first-child { color: var(--text); white-space: nowrap; }
.stats td:first-child img {
	width: 1.1rem;
	height: 1.1rem;
	margin-inline-end: 0.5rem;
	vertical-align: -4px;
	background-color: var(--favicon-bg);
	border: 1px solid var(--favicon-border);
	border-radius: 17%;
}
.stats td:nth-child(2), .stats td:nth-child(3) { white-space: nowrap; }
.stats td:last-child { color: var(--subtext0); font-size: 0.85rem; overflow-wrap: anywhere; }
.stats .warn { color: var(--yellow); }
.stats .bad { color: var(--red); }

/* phone */

@media (max-width: 41.25em) {
	#search_header {
		grid-template-columns: 3rem minmax(0, 1fr);
		grid-template-areas: "logo search" "categories categories";
		gap: 0.4rem 0;
		padding: 0.6rem 0.6rem 0 0;
	}
	#search_logo { padding: 0; }
	#links { top: 1rem; right: 1rem; }
	#search_logo svg { flex: none; width: 1.4rem; height: 1.4rem; margin: 0; }
	#search_view { padding-top: 0; }
	.search_focus body { overflow: hidden; }
	.search_focus .search_box {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 6001;
		width: 100%;
		max-width: none;
		height: 3.6rem;
		background: var(--mantle);
		border-bottom: 1px solid var(--surface0);
		border-radius: 0;
		box-shadow: none;
	}
	.search_focus #search_back { display: flex; }
	.search_focus .autocomplete {
		position: fixed;
		top: 3.6rem;
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		max-height: none;
		margin: 0;
		background: var(--base);
		border-radius: 0;
		box-shadow: none;
		clip-path: none;
	}
	.search_focus .autocomplete ul::before { display: none; }
	.search_focus .search_box:has(.autocomplete.open li) { border-radius: 0; }
	.autocomplete li { padding: 0.35rem 1rem; }
	#categories { overflow-x: auto; scrollbar-width: none; }
	#categories::-webkit-scrollbar { display: none; }
	#search_header #categories { margin-right: -0.6rem; padding: 0.4rem 0.5em; }
	#categories_container { flex-wrap: nowrap; gap: 0.25rem; width: max-content; min-width: 100%; }
	.category_button { flex: 1 1 0; min-width: 2.75rem; padding: 0.6rem 0; }
	.search_filters { flex-wrap: nowrap; gap: 0; width: auto; margin: 0 10px; padding: 0.5rem 0; }
	.search_filters select { flex: 1 1 0; max-width: none; margin-right: 0.5rem; padding-top: 0.6rem; padding-bottom: 0.6rem; font-size: 0.85rem; }
	.search_filters select:last-of-type { margin-right: 0; }
	.engine_group summary { padding: 0.8rem 0.9rem; }
	.engine_group table { font-size: 0.875rem; }
	.engine_group th { font-size: 0.68rem; white-space: normal; line-height: 1.2; vertical-align: bottom; }
	.engine_group :is(th, td) { padding: 0.45rem 0.25rem; }
	.engine_group :is(th, td):first-child { width: 2.9rem; padding-inline-start: 0.7rem; }
	.engine_group :is(th, td):nth-child(3) { width: 3.2rem; }
	.engine_group :is(th, td):nth-child(n + 4) { width: 3.6rem; padding-inline: 0.15rem; }
	.engine_group td:nth-child(2) { padding-inline-start: 0.5rem; }
	.engine_group :is(th, td):last-child { padding-inline-end: 0.6rem; }
	.engine_group code { padding: 0.05rem 0.25rem; font-size: 0.75rem; }
	#preferences { margin-top: 1rem; }
	.pref select { width: 100%; max-width: none; }
	#results { margin: 0.25rem 0 2rem; padding: 0; }
	article.result, #answers, #calculator, #converter, #colorpicker, #selfinfo { margin: 0.5em; }
	#selfinfo .self-ip strong { font-size: 1.9rem; }
	#selfinfo .self-ip .long { font-size: 1.25rem; }
	#selfinfo dl { grid-template-columns: 1fr; gap: 0.15rem; }
	#selfinfo dd { margin-bottom: 0.6rem; }
	#selfinfo dd:last-child { margin-bottom: 0; }
	.color-top { grid-template-columns: 1fr; }
	.color-swatch { min-height: 4.5rem; }
	.color-area { height: 11rem; }
	.color-hex { grid-template-columns: 2.6rem minmax(0, 1fr) auto; }
	.color-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.convert-value { font-size: 1.35rem; }
	.convert-row { grid-template-columns: minmax(0, 1fr) minmax(0, 11rem); }
	.calc-keys { grid-template-columns: 1fr; gap: 0.5rem; }
	.calc-sci { display: none; }
	.sci-open .calc-sci { display: grid; }
	.calc-sci, .calc-pad { gap: 0.5rem; }
	.calc-sci, .calc-pad { grid-auto-rows: 3.4rem; }
	.calc-sci { grid-auto-rows: 2.7rem; }
	.calc-key { font-size: 1.25rem; border-radius: 1.7rem; }
	.calc-sci .calc-key { font-size: 1rem; border-radius: 1.35rem; }
	.calc-more {
		display: block;
		margin-inline-end: auto;
		padding: 0.2rem 0.7rem;
		color: var(--subtext0);
		background: transparent;
		border: 0;
		border-radius: 1rem;
		box-shadow: inset 0 0 0 1px var(--surface1);
		font: inherit;
		font-style: italic;
		cursor: pointer;
	}
	.calc-more[aria-expanded="true"] { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
	.calc-input { font-size: 2.4rem; }
	.calc-input[data-size="s"] { font-size: 1.8rem; }
	.calc-input[data-size="xs"] { font-size: 1.3rem; }
	.infobox .infobox_image { max-height: 9rem; }
	.infobox .extract {
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 5;
		-webkit-box-orient: vertical;
	}
	a.thumbnail_link { width: 6rem; }
	.video_body a.thumbnail_link { width: 8rem; }
	#results.category-images { margin: 0.5rem 0 2rem; padding: 0 0.5rem; }
	.category-images #urls { grid-template-columns: repeat(auto-fill, minmax(1.75rem, 1fr)); gap: 0.8rem 0.4rem; }
	.image_thumb { height: 6rem; }
	.image_detail { width: 100%; border-left: 0; }
	.image_detail_open #results.category-images { margin-right: 0.5rem; }
	.image_detail_open body { overflow: hidden; }
}

@media (max-width: 41.25em) {
	.category_name { display: none; }
}