.tn-hexrgb-page {
	--hx-paper: #faf6ee;
	--hx-surface: #faf6ee;
	--hx-control: #faf6ee;
	--hx-secondary: #ede6d4;
	--hx-ink: #1a1208;
	--hx-muted: #5a4a30;
	--hx-line: #b8a888;
	--hx-soft: #ddd4be;
	--hx-accent: #c44a00;
	--hx-primary: #1a1208;
	--hx-primary-border: #1a1208;
	--hx-primary-text: #faf6ee;
	--hx-secondary-text: #1a1208;
	max-width: 1180px;
	margin: 0 auto;
	color: var(--hx-ink);
	-webkit-text-fill-color: var(--hx-ink);
}

.tn-hexrgb-tool {
	display: block;
	background: var(--hx-paper);
	border: 0;
	border-top: 2px solid var(--hx-ink);
	border-bottom: 1px solid var(--hx-line);
}

/* Kill list: global .entry-content code/pre wash must not reach the tool workspace. */
.tn-hexrgb-tool code,
.tn-hexrgb-tool pre,
.tn-hexrgb-tool kbd,
.tn-hexrgb-tool samp {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	color: inherit;
	-webkit-text-fill-color: inherit;
}

/* Kill list: global .entry-content list markers must not reach the tool workspace. */
.tn-hexrgb-tool ul,
.tn-hexrgb-tool ol,
.tn-hexrgb-tool li {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.tn-hexrgb-input,
.tn-hexrgb-result { min-width: 0; padding: 18px; }
.tn-hexrgb-input { border-bottom: 1px solid var(--hx-line); }
.tn-hexrgb-result {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 0 18px;
	background: var(--hx-surface);
}
.tn-hexrgb-readout,
.tn-hexrgb-formats { display: flex; flex-direction: column; min-width: 0; }

.tn-hexrgb-pane-label,
.tn-hexrgb-band-head p {
	margin: 0 0 12px;
	color: var(--hx-muted);
	-webkit-text-fill-color: var(--hx-muted);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Entry band: picker + HEX + four channels share one width-filling 38px control line. */
.tn-hexrgb-entry {
	display: grid;
	grid-template-columns: 132px 200px repeat(4, minmax(0, 1fr));
	align-items: end;
	gap: 10px;
}
.tn-hexrgb-commands {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 12px;
}
.tn-hexrgb-commands .tn-hexrgb-guide { flex: 1 1 auto; margin: 0; }
.tn-hexrgb-commands .tn-hexrgb-actions { flex: 0 0 auto; }
.tn-hexrgb-field { display: block; margin: 0; min-width: 0; }
.tn-hexrgb-field > span:first-child {
	display: block;
	margin: 0 0 5px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tn-hexrgb-field > input,
.tn-hexrgb-pair input[type="number"] {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--hx-line);
	border-radius: 0;
	background: var(--hx-control);
	color: var(--hx-ink);
	-webkit-text-fill-color: var(--hx-ink);
	font: inherit;
	font-size: 14px;
	box-shadow: none;
}
.tn-hexrgb-field--picker > input[type="color"] {
	-webkit-appearance: none;
	appearance: none;
	padding: 3px;
	cursor: pointer;
}
.tn-hexrgb-field--picker input::-webkit-color-swatch-wrapper { padding: 0; }
.tn-hexrgb-field--picker input::-webkit-color-swatch,
.tn-hexrgb-field--picker input::-moz-color-swatch { border: 0; border-radius: 0; }
.tn-hexrgb-field--hex > input { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.tn-hexrgb-field input::placeholder {
	color: var(--hx-muted);
	-webkit-text-fill-color: var(--hx-muted);
	opacity: .55;
}
.tn-hexrgb-pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 62px;
	gap: 8px;
	align-items: center;
	height: 38px;
}
.tn-hexrgb-pair--alpha { grid-template-columns: minmax(0, 1fr) 62px auto; }
.tn-hexrgb-pair input[type="number"] { text-align: center; padding: 0 4px; }
.tn-hexrgb-pair input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	margin: 0;
	border: 1px solid var(--hx-line);
	border-radius: 0;
	background: var(--hx-soft);
	accent-color: var(--hx-accent);
	cursor: pointer;
}
.tn-hexrgb-pair input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border: 2px solid var(--hx-accent);
	border-radius: 0;
	background: var(--hx-paper);
}
.tn-hexrgb-pair input[type="range"]::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 2px solid var(--hx-accent);
	border-radius: 0;
	background: var(--hx-paper);
}
.tn-hexrgb-pair b {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 38px;
	margin-left: -8px;
	padding: 0 7px;
	border: 1px solid var(--hx-line);
	border-left: 0;
	background: var(--hx-secondary);
	color: var(--hx-ink);
	-webkit-text-fill-color: var(--hx-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}
.tn-hexrgb-guide {
	margin: 10px 0 0;
	color: var(--hx-muted);
	-webkit-text-fill-color: var(--hx-muted);
	font-size: 12px;
	line-height: 1.4;
}
.tn-hexrgb-warning {
	margin: 10px 0 0;
	color: var(--hx-muted);
	-webkit-text-fill-color: var(--hx-muted);
	font-size: 12px;
	line-height: 1.4;
}
.tn-hexrgb-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(104px, 1fr); gap: 8px; }
.tn-hexrgb-tool button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	min-height: 38px;
	padding: 0 10px;
	border: 1px solid var(--hx-line);
	border-radius: 0;
	outline: 0;
	box-shadow: none;
	background: var(--hx-secondary);
	color: var(--hx-secondary-text);
	-webkit-text-fill-color: var(--hx-secondary-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
}
.tn-hexrgb-tool button:hover:not(:disabled) { background: var(--hx-soft); }
.tn-hexrgb-tool button:disabled { opacity: .5; cursor: not-allowed; }
.tn-hexrgb-tool input { box-shadow: none; }
.tn-hexrgb-tool input:focus-visible { outline: 0; }
.tn-hexrgb-field:has(input:focus-visible) { outline: 2px solid var(--hx-accent); outline-offset: -1px; }
.tn-hexrgb-tool button:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 2px; }
.tn-hexrgb-page .tn-hexrgb-tool button.tn-hexrgb-primary {
	border-color: var(--hx-primary-border);
	background: var(--hx-primary);
	color: var(--hx-primary-text);
	-webkit-text-fill-color: var(--hx-primary-text);
}
.tn-hexrgb-page .tn-hexrgb-tool button.tn-hexrgb-primary:hover:not(:disabled) { background: var(--hx-accent); border-color: var(--hx-accent); }

.tn-hexrgb-preview-wrap { display: flex; flex: 1 1 auto; min-height: 158px; }
.tn-hexrgb-preview {
	position: relative;
	overflow: hidden;
	flex: 1 1 auto;
	min-height: 158px;
	border: 1px solid var(--hx-line);
	border-radius: 0;
	background-color: var(--hx-control);
	background-image: linear-gradient(45deg, var(--hx-soft) 25%, transparent 25%), linear-gradient(-45deg, var(--hx-soft) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--hx-soft) 75%), linear-gradient(-45deg, transparent 75%, var(--hx-soft) 75%);
	background-size: 16px 16px;
	background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.tn-hexrgb-preview::after { position: absolute; inset: 0; content: ""; background: var(--hexrgb-alpha, transparent); }
.tn-hexrgb-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 10px 0 0;
	font-size: 13px;
}
.tn-hexrgb-facts > span { display: block; min-width: 0; }
.tn-hexrgb-facts small {
	display: block;
	color: var(--hx-muted);
	-webkit-text-fill-color: var(--hx-muted);
	font-size: 12px;
	line-height: 1.3;
}
.tn-hexrgb-facts b {
	display: block;
	margin-top: 3px;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tn-hexrgb-contrast-label {
	margin: 12px 0 6px;
	color: var(--hx-muted);
	-webkit-text-fill-color: var(--hx-muted);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}
.tn-hexrgb-contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tn-hexrgb-contrast-card {
	padding: 8px;
	border: 1px solid var(--hx-line);
	border-radius: 0;
	background: var(--hexrgb-composite, var(--hx-control));
	text-align: center;
}
.tn-hexrgb-contrast-card--white,
.tn-hexrgb-contrast-card--white * { color: #fff; -webkit-text-fill-color: #fff; }
.tn-hexrgb-contrast-card--black,
.tn-hexrgb-contrast-card--black * { color: #000; -webkit-text-fill-color: #000; }
.tn-hexrgb-contrast span { display: block; font-size: 12px; line-height: 1.3; }
.tn-hexrgb-contrast b { display: block; margin-top: 4px; font-size: 15px; line-height: 1.25; }
.tn-hexrgb-format-grid { display: grid; flex: 1 1 auto; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(38px, 1fr); gap: 7px; }
.tn-hexrgb-format {
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: 38px;
	padding: 0 8px;
	border: 1px solid var(--hx-line);
	border-radius: 0;
	background: var(--hx-control);
}
.tn-hexrgb-format span {
	flex: 0 0 auto;
	min-width: 44px;
	color: var(--hx-muted);
	-webkit-text-fill-color: var(--hx-muted);
	font-size: 11px;
	font-weight: 800;
}
.tn-hexrgb-format code {
	overflow: hidden;
	flex: 1 1 auto;
	min-width: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 12.5px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tn-hexrgb-format button { flex: 0 0 auto; width: 38px; margin-left: 5px; padding: 0; font-size: 11px; }

.tn-hexrgb-band {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border-top: 1px solid var(--hx-line);
}
.tn-hexrgb-band > div { min-width: 0; padding: 14px 18px; }
.tn-hexrgb-band > div + div { border-left: 1px solid var(--hx-line); }
.tn-hexrgb-band-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tn-hexrgb-band-head p { margin-bottom: 8px; }
.tn-hexrgb-band-head button { width: auto; min-width: 38px; padding: 0 9px; font-size: 11px; }
.tn-hexrgb-harmony,
.tn-hexrgb-history { display: flex; flex-wrap: wrap; align-items: center; min-height: 38px; gap: 7px; }
.tn-hexrgb-swatch {
	position: relative;
	width: 38px;
	min-height: 38px;
	padding: 0;
	border-radius: 0;
}
.tn-hexrgb-swatch b {
	position: absolute;
	right: 1px;
	bottom: 1px;
	padding: 0 3px;
	background: var(--hx-paper);
	color: var(--hx-ink);
	-webkit-text-fill-color: var(--hx-ink);
	font-size: 9px;
	font-weight: 800;
	line-height: 13px;
	letter-spacing: 0;
}
.tn-hexrgb-history-empty { color: var(--hx-muted); -webkit-text-fill-color: var(--hx-muted); font-size: 13px; }
.tn-hexrgb-status {
	min-height: 0;
	margin: 0;
	padding: 0;
	color: var(--hx-muted);
	-webkit-text-fill-color: var(--hx-muted);
	font-size: 13px;
	line-height: 1.4;
}
.tn-hexrgb-status:not(:empty) { padding: 10px 18px 12px; border-top: 1px solid var(--hx-line); }
.tn-hexrgb-example { width: 100%; border-collapse: collapse; }
.tn-hexrgb-example th,
.tn-hexrgb-example td { padding: 7px; border-bottom: 1px solid var(--hx-line); text-align: left; }

body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-d="dark"], [data-scheme="auto"][data-l="dark"]):not([data-scheme="light"]) .tn-hexrgb-page,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-hexrgb-page,
html[data-scheme="inverse"] body:not([data-scheme="light"]) .tn-hexrgb-page {
	--hx-paper: #241d12;
	--hx-surface: #322a1a;
	--hx-control: #2c2517;
	--hx-secondary: #2c2517;
	--hx-ink: #f7ead1;
	--hx-muted: #c3b492;
	--hx-line: #6f6047;
	--hx-soft: #3d3421;
	--hx-accent: #e8823f;
	--hx-primary: #4a3116;
	--hx-primary-border: #e8823f;
	--hx-primary-text: #f7ead1;
	--hx-secondary-text: #f7ead1;
}
@media (prefers-color-scheme: dark) {
	body[data-scheme="auto"]:not([data-scheme="light"]) .tn-hexrgb-page,
	html[data-scheme="auto"] body:not([data-scheme="light"]) .tn-hexrgb-page {
		--hx-paper: #241d12;
		--hx-surface: #322a1a;
		--hx-control: #2c2517;
		--hx-secondary: #2c2517;
		--hx-ink: #f7ead1;
		--hx-muted: #c3b492;
		--hx-line: #6f6047;
		--hx-soft: #3d3421;
		--hx-accent: #e8823f;
		--hx-primary: #4a3116;
		--hx-primary-border: #e8823f;
		--hx-primary-text: #f7ead1;
		--hx-secondary-text: #f7ead1;
	}
}

@media (max-width: 900px) {
	.tn-hexrgb-entry { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.tn-hexrgb-result { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.tn-hexrgb-formats { margin-top: 14px; }
	.tn-hexrgb-readout,
	.tn-hexrgb-formats { display: block; }
	.tn-hexrgb-format-grid { grid-auto-rows: minmax(38px, auto); }
	.tn-hexrgb-entry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tn-hexrgb-commands { flex-wrap: wrap; }
	.tn-hexrgb-commands .tn-hexrgb-actions { flex: 1 1 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
	.tn-hexrgb-band { grid-template-columns: minmax(0, 1fr); }
	.tn-hexrgb-band > div + div { border-top: 1px solid var(--hx-line); border-left: 0; }
}
@media (max-width: 480px) {
	.tn-hexrgb-input,
	.tn-hexrgb-result { padding: 14px; }
	.tn-hexrgb-entry { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.tn-hexrgb-field--picker,
	.tn-hexrgb-field--hex { grid-column: auto; }
	.tn-hexrgb-pair { grid-template-columns: minmax(0, 1fr) 54px; gap: 6px; }
	.tn-hexrgb-pair--alpha { grid-template-columns: minmax(0, 1fr) 54px auto; }
	.tn-hexrgb-pair b { margin-left: -6px; padding: 0 5px; }
	.tn-hexrgb-preview-wrap { min-height: 116px; }
	.tn-hexrgb-preview { min-height: 116px; }
	.tn-hexrgb-band > div { padding: 12px 14px; }
	.tn-hexrgb-status:not(:empty) { padding: 10px 14px 12px; }
}