/* =========================================
   MACHINE TUNER PANEL
========================================= */

[data-tune-kind="dom"] {
	--tune-x: 0px;
	--tune-y: 0px;
	--tune-r: 0deg;
	--tune-s: 1;
	transform: translate(var(--tune-x), var(--tune-y)) rotate(var(--tune-r)) scale(var(--tune-s));
	transform-origin: center;
}

.machine-tuner {
	display: none;
	position: fixed;
	left: 14px;
	top: 14px;
	z-index: 100000;
	width: min(340px, calc(100vw - 28px));
	max-height: calc(100vh - 28px);
	overflow: auto;
	padding: 12px;
	border: 1px solid rgba(21, 21, 20, 0.22);
	border-radius: 14px;
	background: rgba(248, 239, 225, 0.94);
	box-shadow: 0 18px 44px rgba(21, 21, 20, 0.18);
	color: #151514;
	font: 12px/1.35 system-ui, sans-serif;
}

.machine-tuner.is-tuner-active {
	display: block;
}

.machine-tuner * {
	box-sizing: border-box;
}

.machine-tuner__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: -4px -4px 10px;
	padding: 4px;
	cursor: move;
	user-select: none;
}

.machine-tuner__title {
	margin: 0;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.machine-tuner__hint {
	opacity: 0.55;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.machine-tuner__select,
.machine-tuner__number,
.machine-tuner__output,
.machine-tuner__button {
	font: inherit;
}

.machine-tuner__select {
	width: 100%;
	margin-bottom: 10px;
	padding: 8px;
	border: 1px solid rgba(21, 21, 20, 0.22);
	border-radius: 9px;
	background: #fffaf0;
	color: #151514;
}

.machine-tuner__row {
	display: grid;
	grid-template-columns: 28px 1fr 72px;
	align-items: center;
	gap: 8px;
	margin: 8px 0;
}

.machine-tuner__range {
	width: 100%;
	accent-color: #b8322c;
}

.machine-tuner__number {
	width: 72px;
	padding: 6px;
	border: 1px solid rgba(21, 21, 20, 0.22);
	border-radius: 8px;
	background: #fffaf0;
	color: #151514;
}

.machine-tuner__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin: 11px 0 9px;
}

.machine-tuner__button {
	padding: 8px 9px;
	border: 0;
	border-radius: 999px;
	background: #151514;
	color: #fffaf0;
	font-weight: 800;
	cursor: pointer;
}

.machine-tuner__button--ghost {
	background: rgba(21, 21, 20, 0.1);
	color: #151514;
}

.machine-tuner__output {
	width: 100%;
	height: 128px;
	resize: vertical;
	padding: 8px;
	border: 1px solid rgba(21, 21, 20, 0.22);
	border-radius: 10px;
	background: #fffaf0;
	color: #151514;
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 11px;
}

.machine-tuner__status {
	min-height: 16px;
	margin-top: 7px;
	opacity: 0.72;
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
	.machine-tuner {
		display: none;
	}
}