:root {
	color-scheme: light dark;
	--background: #f2f4ed;
	--surface: #ffffff;
	--surface-raised: #e5e9df;
	--ink: #17242c;
	--muted: #5a696f;
	--accent: #176b62;
	--accent-strong: #0d514b;
	--border: #cad2c8;
	--danger: #a33131;
	--focus: #e28b24;
	--shadow: 0 2px 8px rgb(20 36 43 / 7%);
	font-family:
		Inter,
		ui-sans-serif,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
	font-synthesis: none;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: #10191e;
		--surface: #17242c;
		--surface-raised: #21323a;
		--ink: #edf4ed;
		--muted: #acbbb9;
		--accent: #75d2bd;
		--accent-strong: #a4ead8;
		--border: #38505a;
		--danger: #ff9a94;
		--focus: #ffbd66;
		--shadow: 0 2px 8px rgb(0 0 0 / 22%);
	}
}

* {
	box-sizing: border-box;
}

html {
	min-width: 320px;
	background: var(--background);
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	color: var(--ink);
	background: var(--background);
}

.elements-workbench {
	display: grid;
	gap: 0.75rem;
	max-width: 90rem;
}

.elements-converters,
.elements-reference,
.element-detail {
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.7rem;
	background: var(--surface);
}

.elements-converters > h2 {
	margin-bottom: 0.65rem;
}

.elements-converter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr));
	gap: 0.65rem;
}

.elements-converter {
	display: grid;
	gap: 0.55rem;
	min-width: 0;
	padding: 0.7rem;
	border-radius: 0.6rem;
	background: var(--surface-raised);
}

.elements-converter h3 {
	margin: 0;
}

.elements-converter label {
	display: grid;
	gap: 0.3rem;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.elements-converter textarea {
	min-height: 4.5rem;
}

.elements-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.elements-reference {
	display: grid;
	gap: 0.65rem;
}

.elements-search {
	width: min(100%, 30rem);
	min-height: 2.65rem;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--border);
	border-radius: 0.6rem;
	color: var(--ink);
	background: var(--background);
}

.elements-match-count {
	margin: 0;
	color: var(--muted);
	font-size: 0.8rem;
}

.elements-table-scroll {
	overflow-x: auto;
	padding-bottom: 0.35rem;
}

.periodic-table,
.f-block {
	display: grid;
	grid-template-columns: repeat(18, minmax(4.25rem, 1fr));
	grid-auto-rows: 5rem;
	gap: 0.25rem;
	min-width: 79rem;
}

.element-search-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
	gap: 0.35rem;
}

.f-block {
	grid-template-columns: repeat(15, minmax(4.25rem, 1fr));
	min-width: 66rem;
	margin-top: 0.65rem;
}

.element-cell {
	display: grid;
	grid-template-columns: 1fr auto;
	align-content: start;
	gap: 0.05rem 0.2rem;
	min-width: 0;
	padding: 0.35rem;
	border-color: var(--border);
	border-radius: 0.4rem;
	color: var(--ink);
	background: var(--surface-raised);
	text-align: left;
}

.element-cell:hover,
.element-cell--selected {
	border-color: var(--accent-strong);
	background: color-mix(in srgb, var(--accent) 15%, var(--surface));
}

.element-cell small {
	color: var(--muted);
	font-size: 0.65rem;
}

.element-cell strong {
	justify-self: end;
	font-size: 1.15rem;
}

.element-cell span {
	grid-column: 1 / -1;
	overflow: hidden;
	font-size: 0.62rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.element-detail {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.75rem;
}

.element-detail > div:first-child {
	display: grid;
	grid-template-columns: auto auto;
	align-items: baseline;
	gap: 0.35rem;
}

.element-detail__number {
	color: var(--muted);
	font-size: 0.8rem;
}

.element-detail__symbol {
	font-size: 1.65rem;
}

.element-detail h2,
.element-detail p {
	margin: 0;
}

.element-detail p,
.elements-attribution {
	color: var(--muted);
	font-size: 0.78rem;
}

.colors-workbench {
	display: grid;
	gap: 0.75rem;
	max-width: 78rem;
}

.color-mixer,
.color-converters {
	display: grid;
	gap: 0.7rem;
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.7rem;
	background: var(--surface);
}

.color-mixer > header,
.color-converters > header,
.color-result > header {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 0.75rem;
}

.color-mixer h2,
.color-mixer p,
.color-converters h2,
.color-converters p,
.color-result h3 {
	margin: 0;
}

.color-mixer p,
.color-converters p,
.color-result small {
	color: var(--muted);
	font-size: 0.8rem;
}

.color-mixer > header label {
	display: grid;
	gap: 0.25rem;
	min-width: min(100%, 15rem);
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.color-mixer > header select {
	min-height: 2.5rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--border);
	border-radius: 0.55rem;
	color: var(--ink);
	background: var(--background);
}

.color-mixer-body {
	display: grid;
	gap: 0.65rem;
}

.color-channel-controls,
.color-palette,
.colors-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.color-channel-controls button {
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	gap: 0.4rem;
}

.color-channel-controls button[aria-pressed="true"] {
	border-color: var(--accent-strong);
	background: color-mix(in srgb, var(--accent) 15%, var(--surface));
}

.color-channel-bit {
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	color: var(--surface);
	background: var(--ink);
	font-family: ui-monospace, monospace;
}

.color-current {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.65rem;
	border-radius: 0.6rem;
	background: var(--surface-raised);
}

.color-current__swatch {
	width: 3.5rem;
	height: 3.5rem;
	border: 1px solid var(--ink);
	border-radius: 50%;
	background: var(--puzzle-color);
}

.color-current > div {
	display: grid;
	gap: 0.15rem;
}

.color-current strong {
	font-size: 1.25rem;
	text-transform: capitalize;
}

.color-palette button {
	display: grid;
	grid-template-columns: 1.25rem auto;
	align-items: center;
	gap: 0.15rem 0.35rem;
	min-width: 6.6rem;
	text-align: left;
}

.color-palette button > span {
	grid-row: 1 / 3;
	width: 1.25rem;
	height: 1.75rem;
	border: 1px solid var(--ink);
	border-radius: 0.3rem;
	background: var(--puzzle-color);
}

.color-palette button strong {
	text-transform: capitalize;
}

.color-palette button code {
	color: var(--muted);
	font-size: 0.7rem;
}

.color-palette__selected {
	border-color: var(--accent-strong);
	background: color-mix(in srgb, var(--accent) 15%, var(--surface));
}

.color-input-grid,
.color-result-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.65rem;
}

.color-input-grid > label {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.35rem;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.color-input-grid textarea {
	grid-column: 1 / -1;
	min-height: 5rem;
}

.color-result {
	display: grid;
	gap: 0.5rem;
	min-width: 0;
	padding: 0.65rem;
	border-radius: 0.6rem;
	background: var(--surface-raised);
}

.permutations-workbench {
	display: grid;
	gap: 0.75rem;
	max-width: 78rem;
}

.permutation-input,
.permutation-unrank {
	display: grid;
	gap: 0.7rem;
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.7rem;
	background: var(--surface);
}

.permutation-controls {
	display: grid;
	grid-template-columns: minmax(18rem, 1fr) repeat(2, minmax(13rem, 0.6fr));
	align-items: start;
	gap: 0.65rem;
}

.permutation-controls label,
.permutation-unrank > label {
	display: grid;
	gap: 0.25rem;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.permutation-controls textarea {
	min-height: 9rem;
}

.permutation-controls input,
.permutation-controls select {
	min-height: 2.5rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--border);
	border-radius: 0.55rem;
	color: var(--ink);
	background: var(--background);
}

.permutation-controls small {
	font-weight: 400;
}

.permutation-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
}

.permutation-actions > label {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.82rem;
}

.permutation-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.45rem;
}

.permutation-summary span {
	padding: 0.55rem;
	border-radius: 0.5rem;
	background: var(--surface-raised);
	font-size: 0.8rem;
	font-weight: 750;
}

.permutation-output-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.65rem;
}

.permutation-output-grid > article {
	display: grid;
	gap: 0.45rem;
	min-width: 0;
	padding: 0.65rem;
	border-radius: 0.55rem;
	background: var(--surface-raised);
}

.permutation-output-grid > article > span {
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.permutation-base-results {
	display: grid;
	gap: 0.55rem;
	padding-top: 0.65rem;
	border-top: 1px solid var(--border);
}

.permutation-base-results h3,
.permutation-base-results p {
	margin: 0;
}

.permutation-base-results p {
	color: var(--muted);
	font-size: 0.78rem;
}

.permutation-base-results > div {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: 0.4rem;
}

.permutation-base-results article {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
	padding: 0.5rem;
	border-radius: 0.45rem;
	background: var(--surface-raised);
}

.permutation-base-results article span,
.permutation-base-results article strong,
.permutation-base-results article code {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.permutation-base-results article span {
	color: var(--muted);
	font-size: 0.72rem;
}

.permutation-unrank textarea {
	min-height: 4.5rem;
}

@media (max-width: 48rem) {
	.permutation-controls,
	.permutation-output-grid {
		grid-template-columns: 1fr;
	}

	.permutation-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 48rem) {
	.color-mixer > header,
	.color-converters > header {
		display: grid;
		align-items: start;
	}

	.color-input-grid,
	.color-result-grid {
		grid-template-columns: 1fr;
	}
}

.elements-attribution {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
}

@media (max-width: 48rem) {
	.element-detail {
		grid-template-columns: auto 1fr;
	}

	.element-detail .elements-actions {
		grid-column: 1 / -1;
	}
}

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

a {
	color: var(--accent-strong);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
textarea:focus-visible,
.visual-input:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

.skip-link {
	position: fixed;
	z-index: 20;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.75rem 1rem;
	color: var(--surface);
	background: var(--ink);
	transform: translateY(-180%);
}

.skip-link:focus {
	transform: none;
}

.site-header,
.page-shell,
.site-footer {
	width: min(100% - 1.5rem, 90rem);
	margin-inline: auto;
}

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 3.25rem;
	padding-top: env(safe-area-inset-top);
	border-bottom: 1px solid var(--border);
}

.site-header nav {
	display: flex;
	gap: 0.75rem;
	font-size: 0.9rem;
}

.brand {
	color: var(--ink);
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	text-decoration: none;
}

.page-shell {
	flex: 1;
	padding-block: 0.85rem 1.5rem;
}

.site-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	padding-block: 0.65rem calc(0.65rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--border);
	color: var(--muted);
	font-size: 0.72rem;
}

.site-footer code {
	font-size: inherit;
}

.hero,
.tool-heading {
	max-width: 50rem;
	margin-bottom: 1rem;
}

h1,
h2,
p {
	margin-top: 0;
}

h1 {
	max-width: 18ch;
	margin-bottom: 0.4rem;
	font-size: clamp(1.65rem, 4vw, 2.35rem);
	line-height: 1.05;
	letter-spacing: -0.04em;
}

h2 {
	letter-spacing: -0.025em;
}

.eyebrow,
.output__label {
	color: var(--accent-strong);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.tool-grid,
.decoder-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: 1rem;
}

.home-tools {
	max-width: 64rem;
}

.home-tools h1 {
	margin-bottom: 0.8rem;
}

.tool-card,
.decoder-panel {
	border: 1px solid var(--border);
	border-radius: 1rem;
	background: color-mix(in srgb, var(--surface) 94%, transparent);
	box-shadow: var(--shadow);
}

.tool-card {
	display: grid;
	gap: 0.8rem;
	min-height: 8rem;
	padding: 1rem;
	color: var(--ink);
	text-decoration: none;
}

.tool-card:hover {
	border-color: var(--accent);
}

.tool-card strong {
	font-size: 1.15rem;
}

.tool-card small {
	color: var(--muted);
}

.tool-card__body {
	display: grid;
	align-content: start;
	gap: 0.35rem;
}

.tool-card__body > span {
	color: var(--muted);
	font-size: 0.88rem;
	line-height: 1.4;
}

.tool-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	color: var(--accent-strong);
}

.decoder-panel {
	min-width: 0;
	padding: clamp(1rem, 3vw, 1.5rem);
}

.decoder-workbench {
	display: grid;
	gap: 0.7rem;
}

.cipher-workbench {
	display: grid;
	gap: 0.7rem;
	max-width: 72rem;
}

.cipher-workbench > * {
	min-width: 0;
}

.tool-state {
	display: grid;
	gap: 0.5rem;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.7rem;
	background: var(--surface);
}

.tool-state__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.tool-history > summary {
	cursor: pointer;
	color: var(--accent-strong);
	font-weight: 750;
}

.tool-history > p {
	margin: 0.4rem 0;
	color: var(--muted);
	font-size: 0.8rem;
}

.tool-history__list {
	display: grid;
	gap: 0.35rem;
	margin: 0.55rem 0 0;
	padding: 0;
	list-style: none;
}

.tool-history__list button {
	display: grid;
	width: 100%;
	min-width: 0;
	text-align: left;
}

.tool-history__list span,
.tool-history__list small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tool-history__list small {
	color: var(--muted);
}

.cipher-controls,
.cipher-input,
.cipher-result,
.cipher-shifts {
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.7rem;
	background: var(--surface);
}

.cipher-controls {
	display: grid;
	gap: 0.65rem;
}

.cipher-picker > div {
	flex-wrap: wrap;
	gap: 0.35rem;
}

.cipher-picker button,
.cipher-picker button:first-child,
.cipher-picker button:last-child {
	width: auto;
	border-radius: 0.55rem;
}

.cipher-picker button + button {
	margin-left: 0;
}

.cipher-coordinate-reference {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
	gap: 0.35rem;
}

.cipher-coordinate-reference > div {
	display: flex;
	justify-content: space-between;
	gap: 0.35rem;
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--border);
	border-radius: 0.45rem;
	background: var(--surface);
}

.cipher-setting-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	align-items: end;
	gap: 0.65rem;
}

.cipher-controls label,
.cipher-input label {
	margin: 0;
}

.cipher-controls label > span {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.cipher-controls input[type="number"],
.cipher-key-control input[type="text"] {
	width: 100%;
	min-height: 2.5rem;
	padding: 0.45rem 0.65rem;
	border: 1px solid var(--border);
	border-radius: 0.6rem;
	color: var(--ink);
	background: var(--background);
}

.cipher-key-control {
	display: grid;
	gap: 0.3rem;
	min-width: 0;
}

.cipher-key-control small,
.cipher-control-note {
	margin: 0;
	color: var(--muted);
	font-size: 0.78rem;
}

.cipher-control-note {
	align-self: center;
}

.cipher-shift-range input {
	width: 100%;
	min-height: 2.5rem;
	margin: 0;
	accent-color: var(--accent);
}

.cipher-result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.cipher-result textarea {
	min-height: 5.5rem;
	background: var(--surface-raised);
}

.cipher-shifts > summary {
	cursor: pointer;
	color: var(--accent-strong);
	font-weight: 750;
}

.cipher-shifts > p {
	margin: 0.55rem 0;
	color: var(--muted);
	font-size: 0.8rem;
}

.cipher-shift-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: 0.45rem;
}

.cipher-shift-grid button {
	display: grid;
	min-width: 0;
	text-align: left;
}

.cipher-shift-grid code,
.cipher-shift-grid small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cipher-shift-grid small {
	color: var(--muted);
}

.cipher-shift-grid .cipher-shift--active {
	border-color: var(--accent-strong);
	background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

.text-analysis-workbench {
	display: grid;
	gap: 0.7rem;
	max-width: 72rem;
}

.text-analysis-workbench > * {
	min-width: 0;
}

.analysis-input,
.analysis-summary,
.analysis-highlighter,
.analysis-hidden,
.analysis-line-comparison,
.analysis-results,
.analysis-table-panel {
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.7rem;
	background: var(--surface);
}

.analysis-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.6rem;
}

.analysis-summary > div {
	display: grid;
	gap: 0.15rem;
	padding: 0.65rem;
	border-radius: 0.55rem;
	background: var(--surface-raised);
}

.analysis-summary strong {
	font-size: 1.3rem;
}

.analysis-summary span,
.analysis-summary p,
.analysis-instructions,
.analysis-results header > p,
.analysis-table-panel > p {
	color: var(--muted);
	font-size: 0.8rem;
}

.analysis-summary p {
	grid-column: 1 / -1;
	margin: 0;
}

.analysis-highlighter,
.analysis-hidden,
.analysis-line-comparison,
.analysis-results {
	display: grid;
	gap: 0.7rem;
}

.analysis-highlighter h2,
.analysis-hidden h2,
.analysis-line-comparison h2,
.analysis-results h2 {
	margin-bottom: 0.15rem;
}

.analysis-line-comparison > header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(14rem, 24rem);
	align-items: end;
	gap: 0.75rem;
}

.analysis-line-comparison > header p,
.analysis-line-comparison > header h2 {
	margin: 0;
}

.analysis-line-comparison > header p,
.analysis-line-reference > span,
.analysis-line-output span,
.analysis-line-row header > span {
	color: var(--muted);
	font-size: 0.78rem;
}

.analysis-line-comparison > header label {
	display: grid;
	gap: 0.25rem;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.analysis-line-comparison > header select {
	min-height: 2.5rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--border);
	border-radius: 0.55rem;
	color: var(--ink);
	background: var(--background);
}

.analysis-line-reference {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem;
	border-radius: 0.5rem;
	background: var(--surface-raised);
}

.analysis-line-reference code {
	overflow-x: auto;
	white-space: pre;
}

.analysis-line-rows {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.analysis-line-row {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
	padding: 0.5rem;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
}

.analysis-line-row > header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.analysis-line-row > header code {
	margin-left: auto;
	font-weight: 750;
}

.analysis-line-cells {
	display: flex;
	overflow-x: auto;
	min-height: 1.8rem;
	padding: 0.25rem;
	white-space: nowrap;
}

.analysis-line-cells > span {
	display: inline-grid;
	place-items: center;
	min-width: 1.25rem;
	padding: 0.15rem;
	border-bottom: 2px solid transparent;
}

.analysis-line-cells > .analysis-line-cell--different {
	border-color: var(--danger);
	color: var(--danger);
	background: color-mix(in srgb, var(--danger) 10%, transparent);
	font-weight: 800;
}

.analysis-line-cells > .analysis-line-cell--missing {
	font-style: italic;
}

.analysis-line-output {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 0.65rem;
}

.analysis-line-output > div:first-child {
	display: grid;
	gap: 0.25rem;
	min-width: 0;
}

.analysis-line-output pre {
	overflow: auto;
	min-height: 2.5rem;
	max-height: 12rem;
	margin: 0;
	padding: 0.55rem;
	border-radius: 0.5rem;
	background: var(--surface-raised);
}

@media (max-width: 48rem) {
	.analysis-line-comparison > header,
	.analysis-line-output {
		grid-template-columns: 1fr;
	}
}

.analysis-hidden > header p,
.analysis-hidden__coverage-note {
	margin: 0;
	color: var(--muted);
	font-size: 0.8rem;
}

.analysis-hidden__form {
	display: grid;
	gap: 0.6rem;
}

.analysis-hidden__primary-controls {
	display: grid;
	grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 0.65fr) auto;
	align-items: end;
	gap: 0.5rem;
}

.analysis-hidden__primary-controls label {
	display: grid;
	gap: 0.25rem;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.analysis-hidden__primary-controls select,
.analysis-hidden__primary-controls input {
	width: 100%;
	min-height: 2.5rem;
	padding: 0.45rem 0.65rem;
	border: 1px solid var(--border);
	border-radius: 0.6rem;
	color: var(--ink);
	background: var(--background);
}

.analysis-hidden__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem 1rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.analysis-hidden__options legend {
	width: 100%;
	margin-bottom: 0.15rem;
	padding: 0;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.analysis-hidden__options label {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.85rem;
}

.analysis-hidden__options input {
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--accent);
}

.analysis-hidden__results {
	display: grid;
	gap: 0.65rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--border);
}

.analysis-hidden__results h3 {
	margin-bottom: 0.15rem;
}

.analysis-hidden__coverage {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: 0.45rem;
}

.analysis-hidden__coverage > div {
	display: grid;
	gap: 0.1rem;
	padding: 0.55rem;
	border-radius: 0.5rem;
	background: var(--surface-raised);
}

.analysis-hidden__coverage strong {
	font-size: 1.05rem;
}

.analysis-hidden__coverage span {
	color: var(--muted);
	font-size: 0.72rem;
}

.analysis-hidden__findings {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.analysis-hidden__finding {
	display: grid;
	gap: 0.4rem;
	width: 100%;
	min-height: 0;
	padding: 0.65rem;
	border-color: var(--border);
	color: var(--ink);
	background: var(--surface-raised);
	text-align: left;
}

.analysis-hidden__finding[aria-pressed="true"] {
	border-color: var(--ink);
	background: color-mix(
		in srgb,
		var(--analysis-color) 18%,
		var(--surface-raised)
	);
	box-shadow: inset 0 0 0 1px var(--ink);
}

.analysis-hidden__finding-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.55rem;
}

.analysis-hidden__finding-heading > span {
	padding: 0.08rem 0.38rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--muted);
	font-size: 0.7rem;
}

.analysis-hidden__finding[aria-pressed="true"]
	.analysis-hidden__finding-heading
	> span:last-child {
	border-color: var(--ink);
	color: var(--ink);
	font-weight: 750;
}

.analysis-hidden__context {
	display: block;
	padding: 0.45rem;
	border-radius: 0.4rem;
	background: var(--background);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

.analysis-hidden__match {
	padding: 0.08rem;
	color: inherit;
	background: color-mix(in srgb, var(--accent) 25%, var(--background));
	font-weight: 800;
	text-decoration: underline;
	text-decoration-thickness: 0.12rem;
	text-underline-offset: 0.12rem;
}

.analysis-hidden__finding[aria-pressed="true"] .analysis-hidden__match {
	background: color-mix(in srgb, var(--analysis-color) 50%, var(--background));
}

.analysis-hidden__finding small {
	color: var(--muted);
	overflow-wrap: anywhere;
}

.analysis-highlight-actions,
.analysis-palette > div {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.analysis-palette {
	margin: 0;
	padding: 0;
	border: 0;
}

.analysis-palette legend {
	margin-bottom: 0.3rem;
	padding: 0;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.analysis-palette button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border-color: var(--border);
}

.analysis-palette .analysis-palette__active {
	border-color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--ink);
}

.analysis-color-swatch {
	width: 1rem;
	height: 1rem;
	border: 1px solid var(--ink);
	border-radius: 50%;
	background: var(--analysis-color);
}

.analysis-color--teal {
	--analysis-color: #3ab7a1;
}

.analysis-color--amber {
	--analysis-color: #e4a52f;
}

.analysis-color--blue {
	--analysis-color: #5b8fdb;
}

.analysis-color--rose {
	--analysis-color: #d46b87;
}

.analysis-instructions {
	margin: 0;
}

.analysis-source {
	min-height: 4.5rem;
	padding: 0.7rem;
	border: 1px solid var(--border);
	border-radius: 0.6rem;
	background: var(--background);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	line-height: 2.25;
	white-space: pre-wrap;
}

.analysis-token {
	display: inline-block;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0.12rem 0.2rem;
	border-color: transparent;
	border-radius: 0.25rem;
	color: inherit;
	background: transparent;
	font: inherit;
}

.analysis-token[aria-pressed="true"] {
	border-color: var(--ink);
	background: color-mix(in srgb, var(--analysis-color) 42%, var(--surface));
	font-weight: 800;
	text-decoration: underline;
	text-decoration-thickness: 0.12rem;
	text-underline-offset: 0.15rem;
}

.analysis-results header > p,
.analysis-table-panel > p {
	margin-bottom: 0;
}

.analysis-value-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 0.5rem;
}

.analysis-value {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
	padding: 0.6rem;
	border: 1px solid var(--border);
	border-radius: 0.55rem;
	background: var(--surface-raised);
}

.analysis-value header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.analysis-value button {
	min-height: 1.8rem;
	padding: 0.15rem 0.5rem;
	font-size: 0.75rem;
}

.analysis-value output {
	overflow-wrap: anywhere;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.analysis-table-panel > summary {
	cursor: pointer;
	color: var(--accent-strong);
	font-weight: 750;
}

.analysis-table-scroll {
	overflow-x: auto;
	margin-top: 0.6rem;
}

.analysis-table-scroll table {
	width: 100%;
	border-collapse: collapse;
}

.analysis-table-scroll th,
.analysis-table-scroll td {
	padding: 0.45rem 0.55rem;
	border-bottom: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
}

.analysis-table-scroll th {
	color: var(--muted);
	font-size: 0.75rem;
}

.analysis-frequency-table {
	max-width: 24rem;
}

.dictionary-workbench {
	display: grid;
	gap: 0.7rem;
	max-width: 72rem;
}

.dictionary-workbench > * {
	min-width: 0;
}

.map-workbench {
	display: grid;
	gap: 0.7rem;
}

.image-workbench {
	display: grid;
	gap: 0.7rem;
}

.image-toolbar,
.image-panel,
.image-region-panel {
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.7rem;
	background: var(--surface);
}

.image-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.image-file-picker {
	display: grid;
	align-content: center;
	min-height: 2.5rem;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--accent);
	border-radius: 0.55rem;
	color: var(--accent-strong);
	font-weight: 750;
	cursor: pointer;
}

.image-file-picker:hover {
	background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.image-file-picker input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.image-status,
.image-help,
.image-provider-note {
	margin: 0;
	color: var(--muted);
	font-size: 0.8rem;
}

.image-layout {
	display: grid;
	grid-template-columns: minmax(24rem, 1.55fr) minmax(19rem, 0.75fr);
	align-items: start;
	gap: 0.7rem;
}

.image-panel,
.image-region-panel {
	min-width: 0;
}

.image-view-controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-bottom: 0.45rem;
}

.image-view-controls label {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.image-view-controls input[type="range"] {
	width: min(12rem, 32vw);
}

.image-view-controls output {
	min-width: 3.5rem;
	font-variant-numeric: tabular-nums;
}

.image-viewer {
	max-height: 72vh;
	overflow: auto;
	border-radius: 0.55rem;
	overscroll-behavior: contain;
}

.image-viewer--pan {
	cursor: grab;
	touch-action: none;
}

.image-stage {
	position: relative;
	flex: none;
	overflow: hidden;
	border-radius: 0.55rem;
	background:
		linear-gradient(45deg, var(--surface-raised) 25%, transparent 25%),
		linear-gradient(-45deg, var(--surface-raised) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, var(--surface-raised) 75%),
		linear-gradient(-45deg, transparent 75%, var(--surface-raised) 75%);
	background-position: 0 0, 0 8px, 8px -8px, -8px 0;
	background-size: 16px 16px;
	touch-action: none;
	user-select: none;
}

.image-stage img {
	display: block;
	width: 100%;
	height: auto;
}

.image-overlay {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	cursor: crosshair;
}

.image-overlay--disabled {
	pointer-events: none;
}

.image-region__box {
	fill: rgb(23 107 98 / 12%);
	stroke: var(--region-color, #17cbb5);
	stroke-width: 3;
	cursor: move;
	transition: fill 120ms ease, stroke-width 120ms ease;
}

.image-region__box:hover {
	fill: rgb(23 107 98 / 22%);
	stroke-width: 5;
}

.image-region__handle {
	fill: var(--region-color, #17cbb5);
	stroke: #ffffff;
	stroke-width: 2;
	cursor: nwse-resize;
}

.image-region text {
	fill: #ffffff;
	stroke: rgb(0 0 0 / 75%);
	stroke-width: 3;
	paint-order: stroke;
	font-size: 16px;
	font-weight: 800;
	pointer-events: none;
}

.image-region--1,
.image-region-card--1 {
	--region-color: #ff5c8a;
}

.image-region--2,
.image-region-card--2 {
	--region-color: #00a8d6;
}

.image-region--3,
.image-region-card--3 {
	--region-color: #f47f32;
}

.image-region--4,
.image-region-card--4 {
	--region-color: #9b63e8;
}

.image-region--5,
.image-region-card--5 {
	--region-color: #b38300;
}

.image-region--6,
.image-region-card--6 {
	--region-color: #347ec7;
}

.image-region--1 .image-region__box,
.image-region--2 .image-region__box,
.image-region--3 .image-region__box,
.image-region--4 .image-region__box,
.image-region--5 .image-region__box,
.image-region--6 .image-region__box {
	stroke: var(--region-color);
}

.image-region--1 .image-region__handle,
.image-region--2 .image-region__handle,
.image-region--3 .image-region__handle,
.image-region--4 .image-region__handle,
.image-region--5 .image-region__handle,
.image-region--6 .image-region__handle {
	fill: var(--region-color);
}

.image-help {
	margin-top: 0.55rem;
}

.image-region-panel {
	display: grid;
	gap: 0.65rem;
}

.image-region-heading,
.image-region-card header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.55rem;
}

.image-region-heading h2 {
	margin: 0;
	font-size: 1rem;
}

.image-region-heading small,
.image-region-card small {
	color: var(--muted);
	font-size: 0.75rem;
}

.image-provider-note {
	padding: 0.55rem;
	border-radius: 0.45rem;
	background: var(--surface-raised);
}

.image-region-list {
	display: grid;
	gap: 0.45rem;
	max-height: 62vh;
	overflow: auto;
}

.image-region-card {
	--region-color: #17cbb5;
	display: grid;
	gap: 0.4rem;
	padding: 0.55rem;
	border: 1px solid var(--border);
	border-left: 4px solid var(--region-color);
	border-radius: 0.5rem;
	background: var(--background);
}

.image-region-card header label {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.image-region-card header input {
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	accent-color: var(--accent);
}

.image-region-fields {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.45rem;
}

.image-region-fields label {
	display: grid;
	gap: 0.2rem;
	min-width: 0;
	color: var(--muted);
	font-size: 0.75rem;
}

.image-region-fields input[type="color"] {
	width: 3rem;
	min-height: 2.25rem;
	padding: 0.15rem;
}

.image-region-fields input[type="text"] {
	width: 100%;
}

.numbers-workbench,
.numbers-input,
.numbers-results {
	display: grid;
	gap: 1rem;
}

.numbers-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.55rem;
}

.numbers-operation-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 0.75rem;
}

.numbers-operation-grid .result-card {
	display: grid;
	align-content: start;
	gap: 0.65rem;
}

.numbers-boundary,
.numbers-invalid {
	color: var(--muted);
}

@media (max-width: 54rem) {
	.image-layout {
		grid-template-columns: 1fr;
	}

	.image-region-list {
		grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
		max-height: none;
	}
}

.map-layout {
	display: grid;
	grid-template-columns: minmax(22rem, 1.45fr) minmax(20rem, 1fr);
	gap: 0.7rem;
}

.map-panel,
.map-controls,
.map-results {
	min-width: 0;
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.7rem;
	background: var(--surface);
}

.map-canvas {
	height: min(64vh, 42rem);
	min-height: 28rem;
	border-radius: 0.55rem;
	background: var(--surface-raised);
}

.map-coverage,
.map-status {
	margin: 0.55rem 0 0;
	color: var(--muted);
	font-size: 0.8rem;
}

.map-controls {
	display: grid;
	align-content: start;
	gap: 0.8rem;
}

.map-controls section,
.map-search-form {
	padding-bottom: 0.8rem;
	border-bottom: 1px solid var(--border);
}

.map-controls h2 {
	margin-bottom: 0.55rem;
	font-size: 1rem;
}

.map-location-form {
	display: grid;
	grid-template-columns: minmax(12rem, 1fr) auto auto;
	gap: 0.45rem;
}

.map-location-form input,
.map-search-form > input {
	width: 100%;
	min-height: 2.5rem;
	padding: 0.45rem 0.65rem;
	border: 1px solid var(--border);
	border-radius: 0.6rem;
	color: var(--ink);
	background: var(--background);
}

.map-search-form > input {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.map-option,
.map-category-grid label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
}

.map-option {
	width: fit-content;
	margin-top: 0.55rem;
}

.map-option input,
.map-category-grid input {
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--accent);
}

.map-categories {
	margin: 0.75rem 0;
	padding: 0;
	border: 0;
}

.map-categories legend {
	margin-bottom: 0.3rem;
	padding: 0;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.map-categories__heading,
.map-search-actions,
.map-results__summary,
.map-result-list li,
.map-result-list nav {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.map-categories__heading,
.map-results__summary,
.map-result-list li {
	justify-content: space-between;
}

.map-search-actions,
.map-result-list nav {
	flex-wrap: wrap;
}

.map-categories__heading small {
	color: var(--muted);
}

.map-category-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.35rem;
	margin-top: 0.45rem;
}

.map-category-grid label {
	min-height: 2.25rem;
	padding: 0.35rem 0.5rem;
	border-radius: 0.45rem;
	background: var(--surface-raised);
}

.map-results__summary {
	align-items: start;
	margin-bottom: 0.65rem;
}

.map-results__summary p {
	margin: 0;
	color: var(--muted);
	font-size: 0.85rem;
}

.map-result-list {
	display: grid;
	gap: 0.35rem;
	max-height: 34rem;
	margin: 0;
	padding: 0;
	overflow: auto;
	list-style: none;
}

.map-result-list li {
	min-height: 3rem;
	padding: 0.45rem 0.55rem;
	border-radius: 0.45rem;
	background: var(--surface-raised);
}

.map-result-list li > span {
	display: grid;
	min-width: 0;
}

.map-result-list strong,
.map-result-list small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.map-result-list small {
	color: var(--muted);
}

.map-result-list nav {
	flex: none;
	font-size: 0.8rem;
}

.dictionary-controls {
	display: flex;
	align-items: end;
	gap: 0.75rem;
}

.dictionary-controls label {
	width: min(100%, 24rem);
	margin: 0;
}

.dictionary-controls label > span,
.dictionary-query label > span,
.dictionary-options legend {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.dictionary-pack-meta,
.query-help,
.copy-status {
	color: var(--muted);
	font-size: 0.8rem;
}

.dictionary-pack-meta {
	padding-bottom: 0.65rem;
}

.dictionary-manager,
.dictionary-notices {
	padding: 0.65rem 0.75rem 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.7rem;
	background: var(--surface);
}

.dictionary-manager > summary,
.dictionary-notices > summary {
	font-size: 0.9rem;
}

.dictionary-notices section {
	margin-top: 0.75rem;
}

.dictionary-notices h2 {
	font-size: 0.9rem;
}

.dictionary-notices pre {
	max-height: 16rem;
	margin: 0.35rem 0 0;
	padding: 0.6rem;
	overflow: auto;
	border-radius: 0.45rem;
	background: var(--background);
	font-size: 0.72rem;
	white-space: pre-wrap;
}

.dictionary-manager__help,
.dictionary-manager__status {
	color: var(--muted);
	font-size: 0.8rem;
}

.dictionary-manager__help {
	margin: 0.55rem 0;
}

.dictionary-manager__grid {
	display: grid;
	grid-template-columns: minmax(12rem, 1fr) minmax(16rem, 2fr);
	gap: 0.65rem;
}

.dictionary-manager__grid label {
	margin: 0;
}

.dictionary-manager__grid label > span,
.dictionary-source-heading label {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.dictionary-manager__grid input[type="text"],
.dictionary-manager__grid input[type="file"] {
	width: 100%;
	min-height: 2.5rem;
	padding: 0.45rem 0.65rem;
	border: 1px solid var(--border);
	border-radius: 0.6rem;
	color: var(--ink);
	background: var(--background);
}

.dictionary-source-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.65rem;
}

.dictionary-source-heading label {
	margin: 0;
}

.dictionary-manager textarea {
	min-height: 8rem;
}

.dictionary-manager__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: 0.55rem;
}

.dictionary-manager__status > p {
	margin: 0.55rem 0 0;
}

.dictionary-manager__status .diagnostics p {
	margin: 0.35rem 0 0;
}

.dictionary-query {
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.7rem;
	background: var(--surface);
}

.dictionary-query__top {
	display: grid;
	grid-template-columns: minmax(10rem, 13rem) minmax(14rem, 1fr) auto;
	align-items: end;
	gap: 0.65rem;
}

.dictionary-query__top > label,
.dictionary-query__input {
	margin: 0;
}

.dictionary-query__input input {
	width: 100%;
	min-height: 2.5rem;
	padding: 0.45rem 0.65rem;
	border: 1px solid var(--border);
	border-radius: 0.6rem;
	color: var(--ink);
	background: var(--background);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.dictionary-query__actions,
.dictionary-history__actions {
	display: flex;
	gap: 0.45rem;
}

.dictionary-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem 1rem;
	margin: 0.75rem 0 0;
	padding: 0;
	border: 0;
}

.dictionary-options legend {
	float: left;
	margin-right: 0.25rem;
}

.dictionary-options label {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	font-size: 0.85rem;
}

.dictionary-options input {
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--accent);
}

.query-help {
	margin: 0.55rem 0 0;
}

.dictionary-history {
	padding: 0.65rem 0.75rem 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.7rem;
	background: var(--surface);
}

.dictionary-history__help {
	margin: 0.55rem 0;
	color: var(--muted);
	font-size: 0.8rem;
}

.dictionary-history__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 0.4rem;
	margin: 0.55rem 0 0;
	padding: 0;
	list-style: none;
}

.dictionary-history__list button {
	display: grid;
	width: 100%;
	min-width: 0;
	text-align: left;
}

.dictionary-history__list span,
.dictionary-history__list small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dictionary-history__list small {
	color: var(--muted);
	font-weight: 500;
}

.persistence-diagnostics {
	margin-top: 0;
}

.word-constraints {
	margin-top: 0.7rem;
	padding-top: 0.55rem;
	border-top: 1px solid var(--border);
}

.word-constraints > summary {
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 750;
}

.word-constraints__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.45rem;
	color: var(--muted);
}

.word-constraints__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.45rem;
	margin-top: 0.45rem;
}

.word-constraints__grid label {
	min-width: 0;
	margin: 0;
}

.word-constraints__grid input {
	width: 100%;
	min-height: 2.1rem;
	padding: 0.3rem 0.45rem;
	border: 1px solid var(--border);
	border-radius: 0.45rem;
	color: var(--ink);
	background: var(--background);
}

.variable-rules {
	display: grid;
	gap: 0.45rem;
	margin-top: 0.7rem;
}

.variable-rules h2 {
	margin: 0;
	font-size: 0.9rem;
}

.variable-rules__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 0.5rem;
}

.variable-rule {
	min-width: 0;
	margin: 0;
	padding: 0.55rem;
	border: 1px solid var(--border);
	border-radius: 0.55rem;
}

.variable-rule legend {
	padding: 0 0.25rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.8rem;
	font-weight: 750;
}

.variable-rule__letters,
.encoding-property-set__controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.45rem;
}

.variable-rule label {
	margin: 0;
}

.variable-rule input,
.variable-rule select {
	width: 100%;
	min-height: 2.1rem;
	padding: 0.3rem 0.45rem;
	border: 1px solid var(--border);
	border-radius: 0.45rem;
	color: var(--ink);
	background: var(--background);
}

.variable-rule details {
	margin-top: 0.45rem;
}

.variable-rule summary {
	cursor: pointer;
	color: var(--muted);
	font-size: 0.78rem;
}

.encoding-property-help {
	display: block;
	margin-top: 0.35rem;
	color: var(--muted);
	font-size: 0.72rem;
}

.encoding-property-sets {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.35rem 0.7rem;
	margin-top: 0.45rem;
}

.encoding-property-set {
	min-width: 0;
	padding-top: 0.35rem;
	border-top: 1px solid var(--border);
}

.encoding-property-set__controls {
	margin-top: 0.4rem;
}

.number-property,
.member-property,
.group-property {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
	border: 0;
}

.number-property legend,
.member-property legend,
.group-property legend {
	padding: 0;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 750;
}

.number-property__range,
.member-property__states,
.group-property__states {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
	gap: 0.3rem;
}

.member-property__states label,
.group-property__states label {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0.25rem;
}

.member-property__states label > span,
.group-property__states label > span {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.member-property__states select,
.group-property__states select {
	min-height: 1.9rem;
	padding: 0.2rem;
	font-size: 0.75rem;
}

.variable-empty {
	margin-top: 0.65rem;
}

.normalization-preview,
.effective-pattern,
.active-filters {
	display: flex;
	gap: 0.45rem;
	margin: 0 0 0.65rem;
	color: var(--muted);
	font-size: 0.75rem;
}

.normalization-preview {
	align-items: baseline;
	flex-wrap: wrap;
}

.effective-pattern {
	overflow: auto;
	white-space: nowrap;
}

.active-filters {
	flex-wrap: wrap;
}

.normalization-preview > span,
.effective-pattern span,
.active-filters span {
	font-weight: 750;
}

.normalization-preview code,
.effective-pattern code {
	color: var(--ink);
}

.normalization-preview small {
	color: var(--muted);
}

.length-histogram {
	margin: 0 0 0.7rem;
	padding: 0.6rem 0;
	border-block: 1px solid var(--border);
}

.length-histogram > header {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 0.65rem;
}

.length-histogram h3 {
	margin: 0;
	font-size: 0.85rem;
}

.length-histogram header small {
	display: block;
	margin-top: 0.15rem;
	color: var(--muted);
	font-size: 0.72rem;
}

.length-histogram header button {
	min-height: 2rem;
	padding: 0.25rem 0.5rem;
	font-size: 0.72rem;
}

.length-histogram__bins {
	display: flex;
	align-items: stretch;
	gap: 0.3rem;
	width: 100%;
	max-width: 100%;
	margin-top: 0.45rem;
	padding-bottom: 0.2rem;
	overflow-x: auto;
}

.length-histogram__bins button {
	display: grid;
	flex: 1 0 2.8rem;
	grid-template-rows: 4.25rem auto auto;
	max-width: 5rem;
	min-height: 0;
	padding: 0.25rem;
	border-color: transparent;
	background: var(--surface-raised);
	text-align: center;
}

.length-histogram__bins button.selected {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.length-histogram__track {
	display: flex;
	align-items: end;
	justify-content: center;
	width: 100%;
	height: 4.25rem;
	border-bottom: 1px solid var(--border-strong);
}

.length-histogram__bar {
	display: block;
	width: min(1.5rem, 70%);
	min-height: 0.12rem;
	border-radius: 0.2rem 0.2rem 0 0;
	background: var(--accent);
}

.length-histogram__bins strong {
	font-size: 0.78rem;
}

.length-histogram__bins small {
	color: var(--muted);
	font-size: 0.65rem;
}

.dictionary-match-list {
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.7rem;
	background: var(--surface);
}

.dictionary-match-list ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: 0.35rem;
	max-height: 55vh;
	margin: 0;
	padding: 0;
	overflow: auto;
	list-style: none;
}

.dictionary-match-list li button {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.45rem;
	width: 100%;
	min-height: 2.25rem;
	padding: 0.35rem 0.55rem;
	overflow: hidden;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dictionary-match-list li button small {
	color: var(--muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.68rem;
}

.grid-workbench {
	display: grid;
	gap: 0.7rem;
	max-width: 72rem;
}

.grid-workbench > * {
	min-width: 0;
}

.grid-toolbar,
.grid-paste,
.grid-image,
.grid-editor,
.grid-selected-cell,
.grid-grille {
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.7rem;
	background: var(--surface);
}

.grid-toolbar,
.grid-paste,
.grid-image,
.grid-editor,
.grid-selected-cell,
.grid-grille {
	display: grid;
	gap: 0.65rem;
}

.grid-resize {
	display: grid;
	grid-template-columns: repeat(2, minmax(7rem, 10rem)) auto;
	align-items: end;
	gap: 0.55rem;
}

.grid-resize label > span {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.grid-resize input,
.grid-selected-cell input {
	width: 100%;
	min-height: 2.5rem;
	padding: 0.45rem 0.65rem;
	border: 1px solid var(--border);
	border-radius: 0.6rem;
	color: var(--ink);
	background: var(--background);
}

.grid-history-actions,
.grid-topology-picker > div,
.grid-transform-picker > div,
.grid-mode-picker > div,
.grid-color-picker > div,
.grid-presentation-picker > div {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.grid-limit,
.grid-paste-report,
.grid-editor header p,
.grid-selected-cell small,
.grid-presentation-picker p,
.grid-transform-picker p {
	margin: 0;
	color: var(--muted);
	font-size: 0.8rem;
}

.grid-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}

.grid-summary > * {
	padding: 0.2rem 0.45rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 0.75rem;
}

.grid-paste textarea {
	width: 100%;
	min-height: 7rem;
	resize: vertical;
}

.grid-paste .input-heading h2,
.grid-editor header h2,
.grid-selected-cell h3 {
	margin: 0;
}

.grid-paste .input-heading small {
	display: block;
	max-width: 65rem;
	margin-top: 0.2rem;
	color: var(--muted);
}

.grid-image > header h2,
.grid-image > header p,
.grid-image-source h3,
.grid-image-source header p,
.grid-image-geometry h3,
.grid-image-geometry header p,
.grid-image-lines h4,
.grid-image-apply-actions span {
	margin: 0;
}

.grid-image > header p,
.grid-image-source header p,
.grid-image-geometry header p,
.grid-image-apply-actions span {
	color: var(--muted);
	font-size: 0.8rem;
}

.grid-image-toolbar,
.grid-image-rotation,
.grid-image-rotation > div,
.grid-image-apply-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
}

.grid-image-rotation > strong {
	margin-right: 0.2rem;
	color: var(--muted);
	font-size: 0.78rem;
}

.grid-image-rotation .mode-option--active {
	border-color: var(--ink);
	color: var(--surface);
	background: var(--ink);
}

.grid-image-source,
.grid-image-geometry {
	display: grid;
	gap: 0.65rem;
	min-width: 0;
	padding: 0.65rem;
	border: 1px solid var(--border);
	border-radius: 0.6rem;
	background: var(--background);
}

.grid-image-source-stage,
.grid-image-preview {
	position: relative;
	width: fit-content;
	max-width: 100%;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: 0.55rem;
	background: var(--surface-raised);
}

.grid-image-source-stage img,
.grid-image-preview canvas {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 65vh;
}

.grid-image-source-stage img {
	width: 100%;
}

.grid-image-crop-overlay,
.grid-image-preview svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.grid-image-crop-overlay {
	cursor: crosshair;
	touch-action: none;
	user-select: none;
}

.grid-image-crop-overlay polygon {
	fill: rgb(23 107 98 / 12%);
	stroke: #17cbb5;
	stroke-width: 3;
	vector-effect: non-scaling-stroke;
}

.grid-image-crop-corner {
	cursor: move;
}

.grid-image-crop-corner circle {
	fill: #17cbb5;
	stroke: #ffffff;
	stroke-width: 3;
}

.grid-image-crop-corner text {
	fill: #ffffff;
	stroke: rgb(0 0 0 / 80%);
	stroke-width: 4;
	paint-order: stroke;
	font-size: 22px;
	font-weight: 850;
	pointer-events: none;
}

.grid-image-corner-editors,
.grid-image-detection-controls,
.grid-image-even-geometry,
.grid-image-lines {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	align-items: end;
	gap: 0.55rem;
}

.grid-image-corner-editors fieldset {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.35rem;
	min-width: 0;
	margin: 0;
	padding: 0.45rem;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
}

.grid-image-corner-editors legend,
.grid-image-detection-controls label > span,
.grid-image-even-geometry label > span {
	color: var(--muted);
	font-size: 0.75rem;
	font-weight: 750;
}

.grid-image-corner-editors label > span {
	display: block;
	color: var(--muted);
	font-size: 0.7rem;
}

.grid-image-corner-editors input,
.grid-image-detection-controls input,
.grid-image-detection-controls select,
.grid-image-even-geometry input {
	width: 100%;
	min-height: 2.35rem;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	color: var(--ink);
	background: var(--surface);
}

.grid-image-preview svg {
	pointer-events: none;
}

.grid-image-preview line {
	stroke-width: 3;
	vector-effect: non-scaling-stroke;
}

.grid-image-line--column {
	stroke: #17cbb5;
}

.grid-image-line--row {
	stroke: #ff8a3d;
	stroke-dasharray: 7 4;
}

.grid-image-lines > section {
	min-width: 0;
	padding: 0.5rem;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
}

.grid-image-lines header,
.grid-image-lines label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.45rem;
}

.grid-image-lines header {
	margin-bottom: 0.45rem;
}

.grid-image-lines label + label {
	margin-top: 0.35rem;
}

.grid-image-lines label > span {
	flex: 0 0 7rem;
	color: var(--muted);
	font-size: 0.72rem;
}

.grid-image-lines input {
	min-width: 3rem;
}

.grid-image-lines .clear-input {
	min-height: 1.9rem;
	padding: 0.25rem 0.4rem;
	font-size: 0.7rem;
}

.grid-image-cell-scroll {
	max-width: 100%;
	padding-bottom: 0.25rem;
	overflow: auto;
	overscroll-behavior-inline: contain;
}

.grid-image-cell-suggestions {
	display: grid;
	gap: 0.3rem;
	width: max-content;
}

.grid-image-cell-suggestions button {
	display: grid;
	gap: 0.2rem;
	min-width: 0;
	min-height: 4.4rem;
	padding: 0.35rem;
	border-style: dashed;
	background: var(--surface);
	text-align: left;
}

.grid-image-cell-suggestions button.grid-image-cell--hole {
	border-width: 3px;
	border-color: var(--ink);
	border-radius: 1.5rem;
	background: color-mix(in srgb, var(--focus) 18%, var(--surface));
}

.grid-image-cell-suggestions strong,
.grid-image-cell-suggestions small {
	overflow: hidden;
	text-overflow: ellipsis;
}

.grid-image-cell-suggestions strong {
	font-size: 0.72rem;
}

.grid-image-cell-suggestions small {
	color: var(--muted);
	font-size: 0.62rem;
}

.grid-topology-picker,
.grid-transform-picker,
.grid-mode-picker,
.grid-color-picker {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.grid-topology-picker legend,
.grid-transform-picker legend,
.grid-mode-picker legend,
.grid-color-picker legend {
	margin-bottom: 0.3rem;
	padding: 0;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.grid-topology-picker .mode-option--active,
.grid-mode-picker .mode-option--active,
.grid-color-picker .grid-color-picker__active,
.grid-presentation-picker .mode-option--active {
	border-color: var(--ink);
	color: var(--surface);
	background: var(--ink);
}

.grid-presentation-picker p {
	margin: 0 0 0.45rem;
}

.grid-transform-picker p {
	margin: 0 0 0.45rem;
}

.grid-color-picker button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.grid-color-swatch {
	width: 0.9rem;
	height: 0.9rem;
	border: 1px solid var(--ink);
	border-radius: 0.2rem;
	background: var(--grid-color);
}

.grid-color--teal {
	--grid-color: #3ab7a1;
}

.grid-color--amber {
	--grid-color: #e4a52f;
}

.grid-color--blue {
	--grid-color: #5b8fdb;
}

.grid-color--rose {
	--grid-color: #d46b87;
}

.grid-scroll {
	max-width: 100%;
	padding: 0.3rem;
	overflow: auto;
	overscroll-behavior-inline: contain;
}

.grid-cells {
	display: grid;
	gap: 0.25rem;
	width: max-content;
	touch-action: pan-x pan-y;
}

.grid-cells--hex {
	row-gap: 0.1rem;
	padding-right: 1.875rem;
}

.grid-cell--hex,
.grid-cell--hex input {
	border-radius: 1rem;
}

.grid-cell {
	position: relative;
	width: 3.5rem;
	height: 3.5rem;
	border: 2px solid transparent;
	border-radius: 0.45rem;
	background: color-mix(
		in srgb,
		var(--grid-color, var(--surface)) 42%,
		var(--background)
	);
}

.grid-cell input {
	width: 100%;
	height: 100%;
	padding: 0.25rem;
	border: 1px solid var(--border);
	border-radius: 0.35rem;
	color: var(--ink);
	background: transparent;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.15rem;
	font-weight: 800;
	text-align: center;
}

.grid-cell input[readonly] {
	cursor: crosshair;
	touch-action: none;
	user-select: none;
}

.grid-cell--visual input {
	color: transparent;
	caret-color: transparent;
}

.grid-cell-visual {
	position: absolute;
	z-index: 1;
	inset: 0.15rem;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.grid-cell-visual .visual-token {
	width: 100%;
	max-width: 2.8rem;
	height: 2.65rem;
}

.grid-cell-visual small {
	position: absolute;
	right: 0;
	bottom: -0.02rem;
	left: 0;
	overflow: hidden;
	color: var(--muted);
	font: 700 0.46rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.grid-cell-visual--invalid {
	color: var(--danger);
}

.grid-cell-visual--invalid strong {
	font-size: 1.35rem;
}

.maze-cell__value .grid-cell-visual {
	inset: 0.08rem;
}

.maze-cell__value .grid-cell-visual .visual-token {
	height: 2.7rem;
}

.grid-cell--selected {
	border-color: var(--focus);
}

.grid-cell--selected::before {
	position: absolute;
	z-index: 2;
	top: -0.35rem;
	left: -0.35rem;
	width: 0.65rem;
	height: 0.65rem;
	border: 2px solid var(--surface);
	border-radius: 50%;
	background: var(--focus);
	content: "";
}

.grid-cell--grille input {
	box-shadow: inset 0 0 0 3px
		color-mix(in srgb, var(--grille-color) 82%, transparent);
}

.grid-grille-color--zero {
	--grille-color: #e4a52f;
}

.grid-grille-color--ninety {
	--grille-color: #3ab7a1;
}

.grid-grille-color--one-eighty {
	--grille-color: #5b8fdb;
}

.grid-grille-color--two-seventy {
	--grille-color: #d46b87;
}

.grid-cell--hole input {
	border: 3px dashed var(--ink);
	border-radius: 50%;
}

.grid-cell--blocked input {
	background:
		linear-gradient(
			45deg,
			transparent 46%,
			var(--ink) 47% 53%,
			transparent 54%
		),
		linear-gradient(
		-45deg,
		transparent 46%,
		var(--ink) 47% 53%,
		transparent 54%
	);
}

.grid-cell__mark,
.grid-cell__annotation,
.grid-cell__grille,
.grid-cell__word-path,
.grid-cell__read-path {
	position: absolute;
	z-index: 3;
	padding: 0.05rem 0.18rem;
	border-radius: 0.18rem;
	color: var(--surface);
	background: var(--ink);
	font-size: 0.52rem;
	font-weight: 800;
	pointer-events: none;
}

.grid-cell__mark {
	bottom: 0.1rem;
	left: 0.1rem;
}

.grid-cell__annotation {
	top: 0.1rem;
	right: 0.1rem;
}

.grid-cell__grille {
	right: 0.1rem;
	bottom: 0.1rem;
	color: var(--ink);
	background: var(--grille-color);
}

.grid-cell--word-path {
	background: color-mix(in srgb, var(--word-path-color) 34%, var(--background));
}

.grid-cell--word-overlap {
	background: repeating-linear-gradient(
		135deg,
		color-mix(in srgb, var(--word-path-color) 45%, var(--background)) 0 0.4rem,
		var(--background) 0.4rem 0.8rem
	);
}

.grid-cell__word-path {
	top: 0.1rem;
	left: 0.1rem;
	max-width: calc(100% - 0.2rem);
	overflow: hidden;
	color: var(--ink);
	background: var(--word-path-color);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.grid-cell--read-path input {
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--focus) 78%, transparent);
}

.grid-cell__read-path {
	right: 0.1rem;
	bottom: 0.1rem;
	color: var(--surface);
	background: var(--focus);
}

.word-path-color--teal {
	--word-path-color: #3ab7a1;
}

.word-path-color--amber {
	--word-path-color: #e4a52f;
}

.word-path-color--blue {
	--word-path-color: #5b8fdb;
}

.word-path-color--rose {
	--word-path-color: #d46b87;
}

.grid-selected-cell header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}

.maze-panel {
	display: grid;
	gap: 0.9rem;
}

.grid-read-panel {
	display: grid;
	gap: 0.75rem;
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.7rem;
	background: var(--surface);
}

.grid-read-heading,
.grid-read-result > header {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 1rem;
}

.grid-read-heading h2,
.grid-read-heading p,
.grid-read-result h3,
.grid-read-result p {
	margin: 0;
}

.grid-read-heading p,
.grid-read-result p,
.grid-read-manual,
.grid-read-coordinates {
	color: var(--muted);
	font-size: 0.82rem;
}

.grid-read-heading > span {
	flex: none;
	padding: 0.25rem 0.45rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--muted);
	font-size: 0.72rem;
}

.grid-read-actions,
.grid-read-direction {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 0.45rem;
}

.grid-read-direction label,
.grid-read-output-options label {
	display: grid;
	gap: 0.2rem;
	font-size: 0.75rem;
}

.grid-read-manual,
.grid-read-coordinates {
	margin: 0;
}

.grid-read-result {
	display: grid;
	gap: 0.65rem;
	padding: 0.7rem;
	border: 1px solid var(--border);
	border-radius: 0.6rem;
}

.grid-read-output-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.grid-read-output-options input {
	width: 6rem;
}

.grid-read-result > textarea {
	min-height: 4.5rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.maze-heading,
.maze-result > header {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 1rem;
}

.maze-heading h2,
.maze-heading p,
.maze-result h3,
.maze-result p {
	margin: 0;
}

.maze-heading p,
.maze-result p {
	color: var(--muted);
	font-size: 0.82rem;
}

.maze-heading > span {
	flex: none;
	padding: 0.25rem 0.45rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--muted);
	font-size: 0.72rem;
}

.maze-actions,
.maze-solve-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.maze-scroll {
	overflow: auto;
	padding: 0.65rem;
	border: 1px solid var(--border);
	border-radius: 0.65rem;
	background: color-mix(in srgb, var(--surface) 70%, var(--background));
}

.maze-board {
	display: grid;
	width: max-content;
	gap: 0.6rem;
	margin: 0 auto;
}

.maze-board--hex {
	row-gap: 0.25rem;
	padding-right: 1.975rem;
}

.maze-cell {
	position: relative;
	width: 3.35rem;
	height: 3.35rem;
}

.maze-cell--hex .maze-cell__value {
	border-radius: 1rem;
}

.maze-cell__value {
	position: relative;
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	padding: 0.2rem;
	border: 1px solid var(--border);
	border-radius: 0.4rem;
	color: var(--ink);
	background: var(--surface);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1rem;
	font-weight: 800;
}

.maze-cell__value strong {
	position: absolute;
	top: 0.08rem;
	left: 0.12rem;
	padding: 0 0.18rem;
	border-radius: 0.2rem;
	color: var(--surface);
	background: var(--ink);
	font-size: 0.58rem;
}

.maze-cell--explored .maze-cell__value::after {
	position: absolute;
	right: 0.18rem;
	bottom: 0.18rem;
	width: 0.35rem;
	height: 0.35rem;
	border-radius: 50%;
	background: var(--muted);
	content: "";
}

.maze-cell--path .maze-cell__value {
	border-color: var(--focus);
	background: color-mix(in srgb, var(--focus) 19%, var(--surface));
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--focus) 55%, transparent);
}

.maze-cell--forbidden .maze-cell__value {
	background:
		linear-gradient(
			45deg,
			transparent 46%,
			var(--ink) 47% 53%,
			transparent 54%
		),
		linear-gradient(
		-45deg,
		transparent 46%,
		var(--ink) 47% 53%,
		transparent 54%
	);
}

.maze-edge {
	position: absolute;
	z-index: 3;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: var(--ink);
	background: transparent;
	font-size: 0.8rem;
	line-height: 1;
}

.maze-edge--right {
	top: 0;
	right: -0.55rem;
	width: 0.5rem;
	height: 100%;
}

.maze-edge--down {
	right: 0;
	bottom: -0.55rem;
	width: 100%;
	height: 0.5rem;
}

.maze-edge--down-left,
.maze-edge--down-right {
	bottom: -0.42rem;
	width: 1.15rem;
	height: 0.55rem;
}

.maze-edge--down-left {
	left: -0.35rem;
}

.maze-edge--down-right {
	right: -0.35rem;
}

.maze-edge--wall.maze-edge--right {
	border-left: 0.24rem solid var(--ink);
}

.maze-edge--wall.maze-edge--down {
	border-top: 0.24rem solid var(--ink);
}

.maze-edge--wall.maze-edge--down-left {
	border-top: 0.24rem solid var(--ink);
	transform: rotate(28deg);
}

.maze-edge--wall.maze-edge--down-right {
	border-top: 0.24rem solid var(--ink);
	transform: rotate(-28deg);
}

.maze-edge--one-way {
	color: var(--focus);
	background: color-mix(in srgb, var(--focus) 18%, var(--surface));
	font-weight: 900;
}

.maze-edge--open:hover,
.maze-edge--open:focus-visible {
	background: color-mix(in srgb, var(--focus) 20%, transparent);
}

.maze-result {
	display: grid;
	gap: 0.65rem;
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.65rem;
}

.music-workbench {
	display: grid;
	gap: 0.7rem;
	max-width: 80rem;
}

.music-workbench > *,
.music-input > *,
.music-piano > *,
.music-results > * {
	min-width: 0;
}

.music-input,
.music-piano,
.music-results {
	display: grid;
	gap: 0.65rem;
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.7rem;
	background: var(--surface);
}

.music-piano > header,
.music-results > header {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 0.75rem;
}

.music-piano h2,
.music-piano p,
.music-results h2,
.music-results p {
	margin: 0;
}

.music-piano p,
.music-results p {
	color: var(--muted);
	font-size: 0.82rem;
}

.music-controls,
.music-piano-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
}

.music-controls label,
.music-piano-options label {
	display: grid;
	gap: 0.25rem;
	color: var(--muted);
	font-size: 0.76rem;
	font-weight: 750;
}

.music-controls input,
.music-controls select,
.music-piano-options input {
	min-height: 2.35rem;
	padding: 0.35rem 0.55rem;
	border: 1px solid var(--border);
	border-radius: 0.45rem;
	color: var(--ink);
	background: var(--background);
}

.music-play-option {
	grid-template-columns: auto 1fr;
	align-items: center;
}

.music-play-option input {
	min-height: auto;
}

.music-input textarea {
	min-height: 6rem;
}

.music-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.music-keys {
	display: grid;
	grid-template-columns: repeat(12, 3.15rem);
	gap: 0.18rem;
	width: 100%;
	padding: 0.35rem;
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: 0.55rem;
	background: var(--surface-raised);
}

.music-key {
	display: grid;
	align-content: space-between;
	justify-items: center;
	width: 3.15rem;
	height: 7rem;
	padding: 0.45rem 0.2rem;
	border: 1px solid var(--border);
	border-radius: 0.3rem 0.3rem 0.55rem 0.55rem;
	color: var(--ink);
	background: var(--surface);
}

.music-key--black {
	height: 5rem;
	color: var(--surface);
	background: var(--ink);
}

.music-key small {
	font-size: 0.65rem;
	opacity: 0.75;
}

.music-table-scroll {
	max-width: 100%;
	min-width: 0;
	overflow: auto;
}

.music-results table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.82rem;
}

.music-results th,
.music-results td {
	padding: 0.45rem;
	border-bottom: 1px solid var(--border);
	text-align: left;
	white-space: nowrap;
}

.music-result--invalid td {
	color: var(--danger);
}

.music-result--invalid code {
	white-space: normal;
}

.calendar-workbench {
	display: grid;
	gap: 0.7rem;
	max-width: 80rem;
}

.calendar-input,
.calendar-browser,
.calendar-name-search,
.calendar-holidays {
	display: grid;
	min-width: 0;
	gap: 0.65rem;
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.7rem;
	background: var(--surface);
}

.calendar-browser > header,
.calendar-holidays > header {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 0.75rem;
}

.calendar-browser h2,
.calendar-browser p,
.calendar-holidays h2,
.calendar-holidays p,
.calendar-name-results p {
	margin: 0;
}

.calendar-browser p,
.calendar-holidays p,
.calendar-name-results p {
	color: var(--muted);
	font-size: 0.82rem;
}

.calendar-date-controls {
	display: grid;
	grid-template-columns: repeat(3, minmax(10rem, 1fr));
	gap: 0.55rem;
}

.calendar-date-controls label,
.calendar-period-controls label {
	display: grid;
	gap: 0.25rem;
	color: var(--muted);
	font-size: 0.76rem;
	font-weight: 750;
}

.calendar-date-controls input,
.calendar-period-controls input,
.calendar-period-controls select,
.calendar-name-search > input {
	min-height: 2.4rem;
	padding: 0.4rem 0.55rem;
	border: 1px solid var(--border);
	border-radius: 0.45rem;
	color: var(--ink);
	background: var(--background);
}

.calendar-date-result {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0.45rem;
}

.calendar-date-result > div {
	display: grid;
	align-content: start;
	gap: 0.2rem;
	padding: 0.55rem;
	border: 1px solid var(--border);
	border-radius: 0.45rem;
	background: var(--background);
}

.calendar-date-result span {
	color: var(--muted);
	font-size: 0.8rem;
}

.calendar-date-result--invalid > div:first-child {
	border-color: var(--danger);
}

.calendar-actions,
.calendar-browser-actions,
.calendar-period-controls,
.calendar-name-results > div {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.calendar-browser-actions .mode-option--active {
	border-color: var(--ink);
	color: var(--surface);
	background: var(--ink);
}

.calendar-month {
	display: grid;
	gap: 0.35rem;
}

.calendar-month h3 {
	margin: 0;
	font-size: 1rem;
}

.calendar-weekdays,
.calendar-days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.2rem;
}

.calendar-weekdays span {
	padding: 0.2rem;
	color: var(--muted);
	font-size: 0.68rem;
	font-weight: 800;
	text-align: center;
}

.calendar-day {
	position: relative;
	display: grid;
	align-content: start;
	justify-items: start;
	min-width: 0;
	min-height: 4.7rem;
	padding: 0.35rem;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: 0.35rem;
	color: var(--ink);
	background: var(--background);
	text-align: left;
}

.calendar-day > span {
	position: absolute;
	top: 0.25rem;
	right: 0.25rem;
	color: var(--accent-strong);
	font-size: 0.6rem;
	font-weight: 900;
}

.calendar-day small {
	max-width: 100%;
	overflow: hidden;
	color: var(--muted);
	font-size: 0.62rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.calendar-day--blank {
	border-color: transparent;
	background: transparent;
}

.calendar-day--selected {
	border-color: var(--focus);
	box-shadow: inset 0 0 0 2px var(--focus);
}

.calendar-year-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 0.9rem;
}

.calendar-month--compact .calendar-day {
	min-height: 2.1rem;
	padding: 0.25rem;
	font-size: 0.72rem;
}

.calendar-name-results {
	display: grid;
	gap: 0.45rem;
}

.calendar-name-results button {
	text-align: left;
}

.calendar-holidays ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.calendar-holidays li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15rem 0.55rem;
	padding: 0.5rem;
	border: 1px solid var(--border);
	border-radius: 0.4rem;
}

.calendar-holidays li span {
	grid-column: 2;
	color: var(--muted);
	font-size: 0.7rem;
}

.countries-workbench {
	display: grid;
	gap: 0.7rem;
	max-width: 80rem;
}

.countries-search,
.country-detail,
.country-map-panel,
.countries-results {
	display: grid;
	min-width: 0;
	gap: 0.65rem;
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.7rem;
	background: var(--surface);
}

.countries-search-controls {
	display: grid;
	grid-template-columns: minmax(14rem, 2fr) repeat(2, minmax(10rem, 1fr));
	gap: 0.55rem;
}

.countries-search-controls label,
.country-reuse label {
	display: grid;
	gap: 0.25rem;
	color: var(--muted);
	font-size: 0.76rem;
	font-weight: 750;
}

.countries-search-controls input,
.countries-search-controls select,
.country-reuse select {
	min-width: 0;
	min-height: 2.4rem;
	padding: 0.4rem 0.55rem;
	border: 1px solid var(--border);
	border-radius: 0.45rem;
	color: var(--ink);
	background: var(--background);
}

.countries-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
}

.country-detail > header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.country-detail h2,
.country-detail p,
.country-map-panel h2,
.country-map-panel p,
.countries-results h2,
.countries-results p {
	margin: 0;
}

.country-detail header p,
.country-map-panel header p,
.countries-results header p {
	color: var(--muted);
	font-size: 0.82rem;
}

.country-kind {
	margin-left: auto;
	padding: 0.25rem 0.45rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 750;
}

.country-flag {
	display: block;
	width: 5.25rem;
	min-width: 5.25rem;
	max-height: 3.6rem;
	overflow: hidden;
	border: 1px solid var(--border);
	background: #ffffff;
}

.country-flag svg {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 3.55rem;
}

.country-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0.45rem;
}

.country-detail-grid > div {
	display: grid;
	align-content: start;
	gap: 0.15rem;
	min-width: 0;
	padding: 0.5rem;
	border: 1px solid var(--border);
	border-radius: 0.4rem;
	background: var(--background);
}

.country-detail-grid span {
	overflow-wrap: anywhere;
	color: var(--muted);
	font-size: 0.78rem;
}

.country-reuse {
	display: grid;
	grid-template-columns: minmax(11rem, 0.6fr) minmax(12rem, 1.4fr);
	align-items: end;
	gap: 0.55rem;
}

.country-reuse output {
	display: block;
	min-width: 0;
	min-height: 2.4rem;
	max-height: 8rem;
	padding: 0.5rem 0.6rem;
	overflow: auto;
	border: 1px solid var(--border);
	border-radius: 0.45rem;
	background: var(--background);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.8rem;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.country-reuse .countries-actions {
	grid-column: 1 / -1;
}

.country-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
	gap: 0.45rem;
}

.country-card {
	position: relative;
	display: grid;
	grid-template-columns: 4.4rem minmax(0, 1fr);
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
	min-height: 4.5rem;
	padding: 0.45rem;
	border: 1px solid var(--border);
	border-radius: 0.45rem;
	color: var(--ink);
	background: var(--background);
	text-align: left;
}

.country-card .country-flag {
	grid-row: 1 / span 2;
	width: 4.4rem;
	min-width: 4.4rem;
	max-height: 3rem;
}

.country-card > span:not(.country-flag) {
	display: grid;
	min-width: 0;
}

.country-card strong,
.country-card small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.country-card small {
	color: var(--muted);
	font-size: 0.68rem;
}

.country-card code {
	font-size: 0.7rem;
}

.country-card em {
	position: absolute;
	top: 0.2rem;
	right: 0.3rem;
	font-size: 0.58rem;
	font-style: normal;
	font-weight: 800;
	text-transform: uppercase;
}

.country-card--selected {
	border-color: var(--focus);
	box-shadow: inset 0 0 0 2px var(--focus);
}

.country-map-scroll {
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--accent) 10%, var(--background));
}

.country-map {
	display: block;
	width: 100%;
	min-width: 38rem;
	height: auto;
}

.country-map-ocean {
	fill: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.country-map-shape {
	cursor: pointer;
	fill: var(--surface-raised);
	stroke: var(--muted);
	stroke-width: 0.7;
	vector-effect: non-scaling-stroke;
}

.country-map-shape:hover,
.country-map-shape:focus-visible {
	fill: color-mix(in srgb, var(--accent) 32%, var(--surface));
	stroke: var(--ink);
	stroke-width: 1.5;
	outline: none;
}

.country-map-shape--selected {
	fill: var(--accent);
	stroke: var(--ink);
	stroke-width: 2;
}

.country-map-marker {
	pointer-events: none;
	fill: var(--focus);
	stroke: var(--ink);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.country-map-status {
	color: var(--muted);
	font-size: 0.76rem;
}

.country-attribution {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.8rem;
	color: var(--muted);
	font-size: 0.68rem;
}

.maze-result > header label {
	display: grid;
	gap: 0.2rem;
	font-size: 0.75rem;
}

.maze-output-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.65rem;
}

.maze-output-grid label {
	display: grid;
	gap: 0.25rem;
}

.maze-output-grid textarea {
	min-height: 4.5rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 42rem) {
	.grid-read-heading,
	.grid-read-result > header,
	.maze-heading,
	.maze-result > header {
		align-items: stretch;
		flex-direction: column;
	}

	.maze-heading > span {
		align-self: start;
	}

	.grid-read-heading > span {
		align-self: start;
	}

	.maze-output-grid {
		grid-template-columns: 1fr;
	}
}

.grid-grille-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 0.65rem;
}

.grid-grille-heading h2,
.grid-grille-heading p {
	margin: 0;
}

.grid-grille-heading p,
.grid-grille-provenance,
.grid-grille-read small,
.grid-coverage-details p {
	color: var(--muted);
	font-size: 0.8rem;
}

.grid-grille-provenance {
	margin: 0;
	overflow-wrap: anywhere;
}

.grid-grille-controls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 0.65rem;
}

.grid-grille-controls fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.grid-grille-controls legend {
	margin-bottom: 0.3rem;
	padding: 0;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.grid-grille-controls fieldset > div {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.grid-grille-controls .mode-option--active,
.grid-grille-read .grid-grille-read--active {
	border-color: var(--ink);
	color: var(--surface);
	background: var(--ink);
}

.grid-coverage-details summary {
	cursor: pointer;
	color: var(--accent-strong);
	font-size: 0.82rem;
	font-weight: 750;
}

.grid-coverage-details p {
	margin: 0.35rem 0 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	overflow-wrap: anywhere;
}

.grid-grille-reads {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: 0.55rem;
}

.grid-grille-read {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
	padding: 0.55rem;
	border: 1px solid var(--border);
	border-radius: 0.55rem;
	background: var(--background);
}

.grid-grille-read header,
.grid-grille-combined .input-heading > div {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.grid-grille-read header {
	justify-content: space-between;
}

.grid-grille-read code {
	min-height: 1.3rem;
	overflow-wrap: anywhere;
	font-size: 1rem;
	font-weight: 800;
}

.grid-grille-read small {
	overflow-wrap: anywhere;
}

.grid-grille-combined textarea {
	width: 100%;
	min-height: 6rem;
	background: var(--surface-raised);
}

.word-search {
	display: grid;
	gap: 0.7rem;
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.7rem;
	background: var(--surface);
}

.word-search > header h2,
.word-search > header p,
.manual-word-path h3,
.manual-word-path p,
.word-search-provenance {
	margin: 0;
}

.word-search > header p,
.manual-word-path p,
.word-search-provenance,
.word-search-actions span,
.word-search .input-heading small {
	color: var(--muted);
	font-size: 0.8rem;
}

.word-search-controls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	align-items: end;
	gap: 0.55rem;
}

.word-search-controls label > span,
.manual-word-path label > span {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.word-search-controls input {
	width: 100%;
	min-height: 2.5rem;
	padding: 0.45rem 0.65rem;
	border: 1px solid var(--border);
	border-radius: 0.6rem;
	color: var(--ink);
	background: var(--background);
}

.word-search > textarea {
	width: 100%;
	min-height: 7rem;
	resize: vertical;
}

.word-search-actions,
.word-search-result-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
}

.word-search-results {
	display: grid;
	gap: 0.65rem;
}

.manual-word-path {
	display: grid;
	gap: 0.55rem;
	padding: 0.65rem;
	border: 1px solid var(--border);
	border-radius: 0.6rem;
	background: var(--background);
}

.manual-word-path > header {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 0.65rem;
}

.manual-word-path select {
	min-width: 8rem;
}

.word-search-provenance {
	overflow-wrap: anywhere;
}

.word-search-occurrences {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 0.55rem;
}

.word-search-occurrence {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
	padding: 0.6rem;
	border: 1px solid var(--border);
	border-left: 0.35rem solid var(--word-path-color, var(--border));
	border-radius: 0.55rem;
	background: color-mix(
		in srgb,
		var(--word-path-color, var(--surface)) 12%,
		var(--background)
	);
}

.word-search-occurrence--hidden {
	border-left-style: dashed;
	opacity: 0.68;
}

.word-search-occurrence header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.45rem;
}

.word-search-occurrence header label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
}

.word-search-occurrence header input {
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--accent);
}

.word-search-occurrence header select {
	width: auto;
	min-width: 6.5rem;
}

.word-search-occurrence p,
.word-search-occurrence small {
	margin: 0;
	overflow-wrap: anywhere;
}

.word-search-occurrence p {
	font-size: 0.85rem;
}

.word-search-occurrence small {
	color: var(--muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.word-search-occurrence > div {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.copy-status {
	margin: 0.55rem 0 0;
}

.tool-heading {
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
	max-width: none;
	margin: 0;
}

.tool-heading h1,
.tool-heading p {
	margin: 0;
}

.tool-heading h1 {
	font-size: 1.4rem;
}

.tool-heading p {
	color: var(--muted);
	font-size: 0.85rem;
}

.decoder-controls {
	display: grid;
	grid-template-columns: minmax(14rem, 22rem) auto minmax(11rem, 18rem);
	align-items: end;
	gap: 0.65rem;
}

.decoder-controls label,
.decoder-input {
	margin: 0;
}

.mode-picker {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.mode-picker legend {
	margin-bottom: 0.3rem;
	padding: 0;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.mode-picker > div {
	display: flex;
}

.mode-picker button {
	min-width: 5rem;
	border-color: var(--border);
	border-radius: 0;
	color: var(--muted);
	font-weight: 700;
}

.mode-picker button:first-child {
	border-radius: 0.55rem 0 0 0.55rem;
}

.mode-picker button:last-child {
	border-radius: 0 0.55rem 0.55rem 0;
}

.mode-picker button + button {
	margin-left: -1px;
}

.mode-picker .mode-option--active {
	position: relative;
	border-color: var(--accent);
	color: var(--surface);
	background: var(--accent-strong);
}

.mode-picker .mode-option--active:hover {
	background: var(--accent-strong);
}

.decoder-controls label > span,
.decoder-input > span {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 750;
}

select {
	width: 100%;
	min-height: 2.5rem;
	padding: 0.45rem 2.1rem 0.45rem 0.65rem;
	border: 1px solid var(--border);
	border-radius: 0.6rem;
	color: var(--ink);
	background: var(--surface);
}

button {
	min-height: 2.5rem;
	padding: 0.45rem 0.75rem;
	border: 1px solid var(--accent);
	border-radius: 0.55rem;
	color: var(--accent-strong);
	background: var(--surface);
	font-weight: 750;
	cursor: pointer;
}

button:hover {
	background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

button:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.decoder-description {
	margin: -0.2rem 0 0;
	color: var(--muted);
	font-size: 0.85rem;
}

.input-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.3rem;
}

.input-heading label {
	margin: 0;
	color: var(--muted);
	font-size: 0.78rem;
}

.clear-input {
	min-height: 1.8rem;
	padding: 0.15rem 0.55rem;
	border-color: transparent;
	font-size: 0.78rem;
}

.variant-picker {
	min-width: 0;
	margin: 0;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--border);
	border-radius: 0.6rem;
	background: color-mix(in srgb, var(--surface) 80%, transparent);
}

.variant-picker summary {
	color: var(--accent-strong);
	font-size: 0.85rem;
	font-weight: 750;
}

.variant-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.65rem 0;
}

.variant-actions button {
	min-height: 2.25rem;
	padding-block: 0.35rem;
	font-size: 0.875rem;
}

.variant-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0.35rem;
}

.variant-option {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.4rem;
	margin: 0;
	padding: 0.45rem 0.65rem;
	border-radius: 0.45rem;
	background: var(--surface-raised);
	font-size: 0.9rem;
	font-weight: 650;
}

.variant-option input {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--accent);
}

.decoder-results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 0.65rem;
}

.result-card,
.selected-output,
.empty-state {
	margin: 0;
	padding: 0.7rem;
	border: 1px solid var(--border);
	border-radius: 0.6rem;
	background: var(--surface);
	box-shadow: var(--shadow);
}

.result-heading {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 0.65rem;
	margin-bottom: 0.55rem;
}

.result-heading h2 {
	margin: 0;
	font-size: 1.1rem;
}

.result-heading small,
.result-heading > span {
	color: var(--muted);
	font-size: 0.78rem;
}

.result-heading button {
	flex: none;
}

.result-card .output__value {
	min-height: 2rem;
	padding: 0.55rem;
	border-radius: 0.5rem;
	background: var(--surface-raised);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.visual-output {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.5rem;
	padding: 0.5rem;
	border-radius: 0.5rem;
	background: var(--surface-raised);
}

.visual-input {
	padding: 0.7rem;
	border: 1px solid var(--border);
	border-radius: 0.8rem;
	background: var(--surface);
}

.visual-input__heading h2 {
	margin-bottom: 0.25rem;
	font-size: 1rem;
}

.visual-input__heading p {
	margin-bottom: 0.5rem;
	color: var(--muted);
	font-size: 0.875rem;
}

.visual-input__keyboard-help {
	margin-bottom: 1rem;
	padding-top: 0;
	border-top: 0;
	color: var(--muted);
	font-size: 0.825rem;
}

.visual-input__keyboard-help summary {
	width: fit-content;
	color: var(--accent-strong);
}

.visual-input__keyboard-help p {
	max-width: 48rem;
	margin: 0.5rem 0 0;
}

.braille-editor__body,
.semaphore-editor__body,
.seven-segment-editor__body {
	display: flex;
	align-items: start;
	gap: 0.65rem;
}

.semaphore-editor__directions {
	display: grid;
	grid-template-columns: repeat(3, 3rem);
	gap: 0.5rem;
	padding: 0.65rem;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: var(--surface-raised);
}

.semaphore-editor__direction,
.semaphore-editor__center {
	width: 3rem;
	height: 3rem;
}

.semaphore-editor__direction {
	min-height: 3rem;
	padding: 0;
	border-color: var(--muted);
	border-radius: 50%;
	color: var(--muted);
	background: var(--surface);
}

.semaphore-editor__direction--selected {
	border-color: var(--ink);
	color: var(--surface);
	background: var(--ink);
}

.semaphore-editor__direction--selected:hover {
	background: var(--ink);
}

.semaphore-editor__center {
	position: relative;
}

.semaphore-editor__center::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--muted);
	content: "";
	transform: translate(-50%, -50%);
}

.braille-editor__cell {
	display: grid;
	grid-template-columns: repeat(2, 3rem);
	gap: 0.5rem;
	padding: 0.65rem;
	border: 1px solid var(--border);
	border-radius: 0.8rem;
	background: var(--surface-raised);
}

.braille-editor__dot {
	width: 3rem;
	height: 3rem;
	min-height: 3rem;
	padding: 0;
	border-color: var(--muted);
	border-radius: 50%;
	color: var(--muted);
	background: var(--surface);
}

.braille-editor__dot--raised {
	border-color: var(--ink);
	color: var(--surface);
	background: var(--ink);
}

.braille-editor__dot--raised:hover {
	background: var(--ink);
}

.braille-editor__controls,
.semaphore-editor__controls,
.seven-segment-editor__controls {
	display: grid;
	flex: 1;
	gap: 0.5rem;
	min-width: 0;
}

.braille-editor__controls output,
.semaphore-editor__controls output,
.seven-segment-editor__controls output {
	min-height: 2.75rem;
	padding: 0.65rem 0.75rem;
	border-radius: 0.5rem;
	background: var(--surface-raised);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 750;
}

.visual-input__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.flag-editor {
	display: grid;
	gap: 0.6rem;
}

.flag-editor__controls,
.flag-editor__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 0.5rem;
}

.flag-editor__controls label {
	display: grid;
	flex: 1 1 14rem;
	gap: 0.25rem;
}

.flag-editor__controls input {
	width: 100%;
}

.flag-editor__coverage {
	margin: 0;
	color: var(--muted);
	font-size: 0.78rem;
}

.flag-editor__palette {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
	gap: 0.35rem;
	max-height: 22rem;
	padding: 0.2rem;
	overflow: auto;
	overscroll-behavior: contain;
}

.flag-editor__palette button {
	display: grid;
	place-items: center;
	gap: 0.2rem;
	min-width: 0;
	min-height: 4.8rem;
	padding: 0.35rem;
	background: var(--surface-raised);
}

.flag-editor__palette .visual-token {
	width: 100%;
	height: 2.8rem;
}

.flag-editor__palette strong {
	font: 750 0.72rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.visual-output__token,
.visual-output__invalid,
.visual-output__word-separator {
	display: grid;
	place-items: center;
	flex: none;
	min-width: 3rem;
}

.visual-output__token {
	grid-template-rows: 1.4rem 4.5rem 1.2rem;
	gap: 0.1rem;
	min-width: 4rem;
}

.visual-output__decoded {
	font-size: 1rem;
	line-height: 1;
}

.visual-output__token code {
	color: var(--muted);
	font-size: 0.72rem;
	line-height: 1;
}

.visual-output__word-separator {
	min-width: 1.5rem;
	color: var(--muted);
	font: 800 1.25rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.visual-output__invalid {
	min-height: 3rem;
	padding: 0.35rem;
	border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
	border-radius: 0.35rem;
	color: var(--danger);
	background: color-mix(in srgb, var(--danger) 12%, transparent);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.visual-token {
	display: block;
	width: auto;
	height: 4rem;
}

.visual-token--semaphore {
	height: 4.5rem;
}

.visual-token--seven-segment {
	height: 4.5rem;
}

.visual-token--signal-flag,
.visual-token--country-flag {
	width: 5.5rem;
	height: 3.3rem;
}

.visual-token--country-flag {
	display: grid;
	place-items: center;
}

.visual-token--country-flag svg {
	display: block;
	max-width: 100%;
	max-height: 100%;
	filter: drop-shadow(
		0 0 0.08rem color-mix(in srgb, var(--ink) 55%, transparent)
	);
}

.signal-flag-outline {
	fill: none;
	stroke: #111111;
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.seven-segment-line {
	stroke: var(--border);
	stroke-linecap: round;
	stroke-width: 8;
}

.seven-segment-line--active {
	stroke: var(--ink);
}

.seven-segment-editor__display {
	position: relative;
	flex: none;
	width: 6rem;
	height: 8rem;
	border: 1px solid var(--border);
	border-radius: 0.8rem;
	background: var(--surface-raised);
}

.seven-segment-editor__segment {
	position: absolute;
	min-height: 0;
	padding: 0;
	border-color: var(--muted);
	border-radius: 999px;
	color: var(--muted);
	background: var(--surface);
	font-size: 0.65rem;
}

.seven-segment-editor__segment--active,
.seven-segment-editor__segment--active:hover {
	border-color: var(--ink);
	color: var(--surface);
	background: var(--ink);
}

.seven-segment-editor__segment--1,
.seven-segment-editor__segment--4,
.seven-segment-editor__segment--7 {
	left: 1.4rem;
	width: 3.2rem;
	height: 0.8rem;
}

.seven-segment-editor__segment--1 {
	top: 0.45rem;
}

.seven-segment-editor__segment--7 {
	top: 3.55rem;
}

.seven-segment-editor__segment--4 {
	bottom: 0.45rem;
}

.seven-segment-editor__segment--2,
.seven-segment-editor__segment--3,
.seven-segment-editor__segment--5,
.seven-segment-editor__segment--6 {
	width: 0.8rem;
	height: 2.35rem;
}

.seven-segment-editor__segment--2,
.seven-segment-editor__segment--3 {
	right: 0.45rem;
}

.seven-segment-editor__segment--5,
.seven-segment-editor__segment--6 {
	left: 0.45rem;
}

.seven-segment-editor__segment--2,
.seven-segment-editor__segment--6 {
	top: 1rem;
}

.seven-segment-editor__segment--3,
.seven-segment-editor__segment--5 {
	bottom: 1rem;
}

.braille-cell {
	fill: var(--surface);
	stroke: var(--border);
	stroke-width: 2;
}

.braille-dot {
	fill: var(--surface-raised);
	stroke: var(--muted);
	stroke-width: 1.5;
}

.braille-dot--raised {
	fill: var(--ink);
	stroke: var(--ink);
}

.semaphore-arm {
	fill: none;
	stroke: var(--ink);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 6;
}

.semaphore-staff {
	stroke: var(--ink);
	stroke-width: 2;
}

.semaphore-flag {
	stroke: var(--ink);
	stroke-linejoin: round;
	stroke-width: 1;
}

.semaphore-flag--yellow {
	fill: #ffd43b;
}

.semaphore-flag--red {
	fill: #d92b36;
}

.selected-output {
	display: grid;
	gap: 0.75rem;
	border-color: var(--accent);
}

.selected-output .result-heading {
	margin: 0;
}

.selected-output textarea {
	min-height: 4rem;
}

.selected-output__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 750;
}

textarea {
	width: 100%;
	min-height: 4.75rem;
	resize: vertical;
	padding: 0.65rem;
	border: 1px solid var(--border);
	border-radius: 0.6rem;
	color: var(--ink);
	background: var(--background);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	line-height: 1.5;
}

.help {
	min-height: 3.5rem;
	margin-top: 0.65rem;
	color: var(--muted);
	font-size: 0.875rem;
	line-height: 1.45;
}

.output {
	display: grid;
	gap: 0.4rem;
	min-height: 6.5rem;
	margin-block: 1rem;
	padding: 1rem;
	border-radius: 0.7rem;
	background: var(--surface-raised);
}

.output__value,
.diagnostics {
	overflow-wrap: anywhere;
}

.output__value {
	display: block;
	font-size: 1.2rem;
	font-weight: 700;
	white-space: pre-wrap;
}

.output__value--empty {
	color: var(--muted);
	font-weight: 500;
}

.output__invalid {
	margin-inline: 0.12em;
	padding: 0.08em 0.22em;
	border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
	border-radius: 0.25em;
	color: var(--danger);
	background: color-mix(in srgb, var(--danger) 12%, transparent);
	font: inherit;
}

.diagnostics {
	margin-top: 0.85rem;
	padding: 0.8rem 0.9rem;
	border-left: 4px solid var(--danger);
	border-radius: 0.35rem;
	background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.diagnostics strong {
	color: var(--danger);
	font-size: 0.85rem;
}

.diagnostics ul {
	display: grid;
	gap: 0.45rem;
	margin: 0.55rem 0 0;
	padding-left: 1.2rem;
}

.diagnostics code {
	white-space: pre-wrap;
}

details:not(.variant-picker) {
	border-top: 1px solid var(--border);
	padding-top: 1rem;
}

summary {
	cursor: pointer;
	font-weight: 700;
}

.reference-grid,
.reference-map {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
	gap: 0.5rem;
	margin-bottom: 0;
}

.reference-panel {
	display: grid;
	gap: 0.6rem;
}

.reference-panel > header {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

.reference-panel h2,
.reference-panel p {
	margin: 0;
}

.reference-panel h2 {
	font-size: 1rem;
}

.reference-panel p {
	color: var(--muted);
	font-size: 0.8rem;
}

.reference-map {
	grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
	gap: 0.4rem;
}

.reference-entry {
	display: grid;
	grid-template-rows: 1fr auto auto;
	place-items: center;
	min-height: 4.8rem;
	padding: 0.45rem;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	background: var(--surface);
}

.reference-entry strong {
	font-size: 0.95rem;
}

.reference-entry code {
	color: var(--muted);
	font-size: 0.72rem;
}

.reference-entry .visual-token {
	height: 3.75rem;
}

.reference-grid div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.4rem 0.55rem;
	border-radius: 0.4rem;
	background: var(--background);
}

.reference-grid dt {
	font-weight: 800;
}

.reference-grid dd {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.update-banner {
	position: fixed;
	z-index: 10;
	right: 1rem;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	left: 1rem;
	width: fit-content;
	max-width: calc(100% - 2rem);
	margin-left: auto;
	padding: 0.75rem;
	border: 1px solid var(--accent);
	border-radius: 0.7rem;
	color: var(--ink);
	background: var(--surface);
	box-shadow: var(--shadow);
}

.update-banner button {
	min-height: 2.75rem;
	margin-left: 0.75rem;
	padding-inline: 1rem;
	border: 0;
	border-radius: 0.5rem;
	color: var(--background);
	background: var(--accent-strong);
	font-weight: 750;
}

.workbench {
	display: grid;
	gap: 1rem;
	max-width: 78rem;
}

.workbench-source,
.workbench-uncertain,
.workbench-stack,
.workbench-results {
	padding: clamp(0.85rem, 2vw, 1.2rem);
	border: 1px solid var(--border);
	border-radius: 0.9rem;
	background: var(--surface);
	box-shadow: var(--shadow);
}

.workbench-source textarea,
.workbench-results > textarea {
	width: 100%;
	min-height: 7rem;
	resize: vertical;
}

.workbench-actions,
.workbench-add,
.workbench-preview header,
.workbench-step__header,
.workbench-branch header {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.workbench-actions,
.workbench-preview header,
.workbench-step__header,
.workbench-branch header {
	justify-content: space-between;
}

.workbench-uncertain,
.workbench-stack,
.workbench-results,
.workbench-step-list,
.workbench-stage-list,
.workbench-branch-list,
.workbench-mappings {
	display: grid;
	gap: 0.75rem;
}

.workbench-boundary-control {
	display: grid;
	max-width: 28rem;
	gap: 0.25rem;
}

.workbench-destinations > summary {
	cursor: pointer;
	color: var(--accent-strong);
	font-weight: 750;
}

.workbench-destinations .workbench-actions {
	justify-content: start;
	flex-wrap: wrap;
	margin-top: 0.55rem;
}

.workbench-boundary-note,
.workbench-boundary-control small,
.workbench-preview p,
.workbench-preview small,
.workbench-branch small {
	margin: 0;
	color: var(--muted);
	font-size: 0.82rem;
}

.workbench-preview-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 0.65rem;
}

.workbench-preview,
.workbench-step,
.workbench-branch {
	display: grid;
	min-width: 0;
	gap: 0.55rem;
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.65rem;
	background: var(--background);
}

.workbench-preview code,
.workbench-output {
	display: block;
	overflow: auto;
	max-height: 10rem;
	padding: 0.55rem;
	border-radius: 0.35rem;
	background: var(--surface-raised);
	white-space: pre-wrap;
	word-break: break-word;
}

.workbench-step__enabled {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.workbench-step > label,
.workbench-config-grid label,
.workbench-mapping label,
.workbench-add label {
	display: grid;
	gap: 0.2rem;
}

.workbench-config-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0.6rem;
}

.workbench-mapping {
	display: grid;
	grid-template-columns: minmax(5rem, 1fr) auto minmax(5rem, 1fr) auto;
	align-items: end;
	gap: 0.45rem;
}

.workbench-variants {
	display: grid;
	gap: 0.35rem;
}

.workbench-variants > div {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
}

.workbench-add {
	align-items: end;
}

.workbench-stage {
	padding-top: 0.7rem;
}

.workbench-branch--selected {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.tool-handoff {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.tool-handoff > a {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding-inline: 0.65rem;
	border: 1px solid var(--accent);
	border-radius: 0.45rem;
	font-weight: 700;
	text-decoration: none;
}

.tool-handoff .inline-error {
	margin: 0;
}

@media (max-width: 48rem) {
	.tool-grid,
	.decoder-grid,
	.decoder-controls,
	.cipher-controls,
	.analysis-hidden__primary-controls,
	.dictionary-query__top,
	.dictionary-manager__grid,
	.map-layout,
	.map-location-form,
	.grid-resize {
		grid-template-columns: 1fr;
	}

	.workbench-step__header,
	.workbench-preview header,
	.workbench-branch header {
		align-items: stretch;
		flex-direction: column;
	}

	.workbench-actions {
		flex-wrap: wrap;
		justify-content: start;
	}

	.workbench-mapping {
		grid-template-columns: 1fr;
	}

	.grid-resize button {
		width: 100%;
	}

	.grid-selected-cell header {
		align-items: start;
		flex-direction: column;
	}

	.music-piano > header,
	.music-results > header,
	.calendar-browser > header,
	.calendar-holidays > header {
		align-items: stretch;
		flex-direction: column;
	}

	.calendar-date-controls {
		grid-template-columns: 1fr;
	}

	.countries-search-controls,
	.country-reuse {
		grid-template-columns: 1fr;
	}

	.country-detail > header {
		align-items: start;
		flex-wrap: wrap;
	}

	.country-kind {
		width: 100%;
		margin-left: 0;
	}

	.calendar-day {
		min-height: 3.15rem;
	}

	.calendar-day small {
		display: none;
	}

	.manual-word-path > header,
	.word-search-occurrence header {
		align-items: start;
		flex-direction: column;
	}

	.grid-grille-heading {
		align-items: start;
		flex-direction: column;
	}

	.analysis-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.map-canvas {
		height: 52vh;
		min-height: 22rem;
	}

	.map-results__summary,
	.map-result-list li {
		align-items: start;
		flex-direction: column;
	}

	.dictionary-controls {
		display: grid;
	}

	.dictionary-query__actions button {
		flex: 1;
	}

	.dictionary-pack-meta {
		padding: 0;
	}

	.variable-rules__grid,
	.encoding-property-sets,
	.encoding-property-set__controls,
	.word-constraints__grid {
		grid-template-columns: 1fr;
	}

	.word-constraints__heading {
		align-items: start;
		flex-direction: column;
	}

	.tool-heading {
		display: block;
	}

	.tool-heading p {
		margin-top: 0.3rem;
	}

	.mode-picker > div,
	.mode-picker button {
		width: 100%;
	}

	.help {
		min-height: auto;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.skip-link,
	.tool-card {
		transition: border-color 140ms ease, transform 140ms ease;
	}

	.tool-card:hover {
		transform: translateY(-2px);
	}
}