:root {
	--bg-2: color-mix(in oklab, var(--bg) 82%, var(--surface));
	--surface-2: color-mix(in oklab, var(--surface) 72%, var(--overlay));
	--muted: color-mix(in oklab, var(--fg) 58%, transparent);
	--faint: color-mix(in oklab, var(--fg) 38%, transparent);
	--line: color-mix(in srgb, var(--fg) 8%, transparent);
	--accent-soft: color-mix(in oklab, var(--accent) 18%, transparent);
	--radius: 14px;
	--radius-sm: 10px;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	border: none;
	outline: none;
	height: 100%;
	color-scheme: dark;
	background-color: var(--bg, #12161c);
	color: var(--fg);
	font-family: var(--font-family, sans-serif);
	font-size: var(--font-size-base, 14px);
}

#svelte {
	height: 100%;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid color-mix(in oklab, var(--accent) 70%, white);
	outline-offset: 2px;
}

input[type="range"] {
	accent-color: var(--accent);
}

.btn {
	background: var(--surface-2, var(--surface));
	border: 1px solid var(--line);
	padding: 8px 14px;
	border-radius: var(--radius-sm, 10px);
	font-size: 13px;
	cursor: pointer;
	color: var(--fg);
}

.btn:hover {
	background: color-mix(in oklab, var(--surface-2, var(--surface)) 80%, var(--fg));
}

.btn.primary {
	background: var(--accent);
	color: var(--on-accent);
	border-color: transparent;
	font-weight: 600;
}

.btn.primary:hover {
	filter: brightness(1.06);
}

.btn.danger {
	color: var(--red);
}

.btn:disabled {
	opacity: 0.5;
	cursor: default;
}

.kbd {
	font-size: 11px;
	letter-spacing: 0.04em;
	background: color-mix(in srgb, var(--fg) 6%, transparent);
	border: 1px solid var(--line);
	padding: 2px 7px;
	border-radius: 6px;
	color: var(--muted);
}

.pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 11px;
	border-radius: 999px;
	font-size: 12px;
	background: color-mix(in srgb, var(--fg) 6%, transparent);
	border: 1px solid var(--line);
	color: var(--fg);
	cursor: pointer;
}

.pill.on {
	background: var(--accent);
	color: var(--on-accent);
	border-color: transparent;
	font-weight: 600;
}